Question

下面的代码列出了一个图表，我需要在图表中实现图表在垂直（高度）和水平（宽度）方向上的扩展。建议的方法（例如https://docs.flutter.io/flutter/widgets/Row-class.html）是在Expanded或Row中使用Column。

我正在尝试展开的图表小部件扩展CustomPaint，没有子级，所有内容都使用CustomPainter在CustomPainter.paint(canvas, size)上使用return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'vvvvvvvv:', ), new RaisedButton( color: Colors.green, onPressed: _chartStateChanger, ), new Text( 'vvvvvvvv:', ), new Expanded( // Expanded in Column, no expansion vertically child: new Row( children: [ new Text('>>>'), new Expanded(// Expanded in Row, expands horizontally child: new Chart( // extends CustomPaint // size: chartLogicalSize, painter: new ChartPainter( // extends CustomPainter chartData: _chartData, chartOptions: _chartOptions, ), ), ), new Text('<<<'), ], ), // row ), new Text('^^^^^^:'), new RaisedButton( color: Colors.green, onPressed: _chartStateChanger, ), ], ), ), );画布。

此代码

ChartPainter.paint(canvas, size)

结果如下所示:(为简洁起见，未显示ChartPainter的代码）

在print()内，有CustomPainter.print(canvas, size)打印尺寸。

print（“### Size：paint（）：传递size = $ {size}”）;

上面的paint-＆gt;打印结果是：

I / flutter（4187）：###尺寸：paint（）：传递尺寸=尺寸（340.0,0.0）

打印与图像一起显示，行级别的宽度扩展已传递到CustomPainter（宽度= 340.0），但列上的高度扩展未传递给自定义画家打印（身高= 0.0）。虽然结果显示该行确实得到了它的扩展高度，但是如果没有在行内传递到<complexType name="Type1"> <complexContent> <restriction base="{http://www.w3.org/2001/XMLSchema}anyType"> <sequence> <element name="value" minOccurs="0"> <complexType> <complexContent> <restriction base="{http://www.w3.org/2001/XMLSchema}anyType"> <choice> <element name="bigdecimal" type="{http://www.w3.org/2001/XMLSchema}double"/> <element name="date" type="{http://www.w3.org/2001/XMLSchema}date"/> <element name="string" type="{http://www.w3.org/2001/XMLSchema}string"/> </choice> </restriction> </complexContent> </complexType> </element> <element name="element2" type="{http://www.w3.org/2001/XMLSchema}integer" minOccurs="0"/> </sequence> </restriction> </complexContent> </complexType> - 那么收到了高度。

我还需要改变什么来实现高度扩展？

由于

Answer 1

这是针对您所看到的问题的简化测试用例。解决方案是为Row crossAxisAlignment CrossAxisAlignment.stretch提供CustomPaint。否则，它会尝试确定import 'package:flutter/material.dart'; // from https://stackoverflow.com/questions/45875334/how-to-achieve-expansion-of-a-widget-in-both-vertical-height-and-horizontal-w class MyCustomPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { // NOT using crossAxisAlignment: CrossAxisAlignment.stretch => width = 222.0, height=0.0 // using crossAxisAlignment: CrossAxisAlignment.stretch => width = 222.0, height=560.0 print("width = ${size.width}, height=${size.height}"); canvas.drawRect(Offset.zero & size, new Paint()..color = Colors.blue); } @override bool shouldRepaint(MyCustomPainter other) => false; } void main() { runApp(new MaterialApp( home: new Scaffold( body: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text('Above Paint'), // Expanded - because we are in Column, expand the // contained row's height new Expanded( child: new Row( // The crossAxisAlignment is needed to give content height > 0 // - we are in a Row, so crossAxis is Column, so this enforces // to "stretch height". crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Text('Left of Paint'), // Expanded - because we are in Row, expand the // contained Painter's width new Expanded( child: new CustomPaint( painter: new MyCustomPainter(), ), ), new Text('Right of Paint'), ], ), ), new Text('Below Paint'), ], ) ), )); }的内在高度为零，因为它没有孩子。

scrollTop()

Answer 2

有比嵌套Row，Expended和Column小部件更好的方法。您可以将Container小部件与Constraints到BoxConstraints.expend()一起使用。

这是我的小部件中的代码捕捉。

    Widget build(BuildContext context) {
      return Container(
        constraints: BoxConstraints.expand(), 
        child: FutureBuilder(
          future: loadImage(),
          builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
            switch(snapshot.connectionState) {
              case ConnectionState.waiting : 
                return Center(child: Text("loading..."),);
              default:
                if (snapshot.hasError) {
                  return Center(child: Text("error: ${snapshot.error}"),);
                } else {
                  return ImagePainter(image: snapshot.data);
                }
              }
            },
          ),
      );
    }

Answer 3

对于那些努力在“梯度”与“物质”行为中共同努力的人：

return new Stack(
  children: <Widget>[
    new Material(
      elevation: 10,
      borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
      color: Colors.transparent,
      child: new Container(
        constraints: BoxConstraints.expand(height: 50),
      ),
    ),
    new Container(
      constraints: BoxConstraints.expand(height: 50),
      decoration: BoxDecoration(
        borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
        gradient: new LinearGradient(
            colors: [color1, color2],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter),
      ),
      child: new FloatingActionButton.extended(
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.transparent,
        highlightElevation: 0,
        elevation: 0,
        onPressed: () {
          onPressed();
        },
        label: new Text(this.caption,
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.body1),
      ),
    )
  ],
)

Answer 4

使用SizedBox.expand：

SizedBox.expand(
  child: YourWidget() // Could be anything like `Column`, `Stack`...
)

如何在垂直（高度）和水平（宽度）方向上实现窗口小部件的扩展

4 个答案: