如何在垂直(高度)和水平(宽度)方向上实现小部件的扩展 [英] How to achieve expansion of a widget in both vertical (height) and horizontal (width) direction

问题描述

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

The code below lays out a chart in which I'd need to achieve for the chart to be expanded in both vertical (height) and horizontal (width) direction. The suggested method (e.g. https://docs.flutter.io/flutter/widgets/Row-class.html) is to use Expanded in Row or Column.

我要扩展的图表窗口小部件扩展了CustomPaint，没有子级，所有内容都使用CustomPainter在画布上的CustomPainter.paint(canvas, size)中进行了绘制.

The chart widget I am trying to expand extends CustomPaint, with no children, everything is painted using a CustomPainter on canvas, in the 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的代码)

result looks like this: (code of ChartPainter is not shown for brevity)

在ChartPainter.paint(canvas, size)内部有一个print()打印尺寸.

Inside the ChartPainter.paint(canvas, size) there is a print() printing the size.

print("###大小:paint():传递的大小= $ {size}");

print(" ### Size: paint(): passed size = ${size}");

上面paint-> print的结果是:

The result from the paint->print above is:

I/flutter(4187):###大小:paint():通过的大小= Size(340.0，0.0)

I/flutter ( 4187): ### Size: paint(): passed size = Size(340.0, 0.0)

打印件与图像一起显示，行级上的宽度扩展已传递给CustomPainter.print(canvas, size)(宽度= 340.0)，但列上的高度扩展没有传递给自定义画家打印件(高度= 0.0).尽管结果表明该行确实达到了它的扩展高度，但如果未在行内传递到CustomPainter-则收到0高度.

The print along with the image shows, that the width expansion on the row level was passed to the CustomPainter.print(canvas, size) (width = 340.0), but the height expansion on the column did not get passed to the custom painter print (height = 0.0). Although the result shows that the row did get it's expanded height, if was not passed inside the row to the CustomPainter - 0 height was received.

要实现高度扩展，我还需要更改什么?

What do I need to change to achieve the height expansion as well?

谢谢

推荐答案

以下是针对您所遇到的问题的简化测试案例.解决方案是为您的Row赋予crossAxisAlignment的CrossAxisAlignment.stretch.否则，它将尝试确定CustomPaint的固有高度，该高度为零，因为它没有孩子.

Here is a reduced test case for the issue you are seeing. The solution is to give your Row a crossAxisAlignment of CrossAxisAlignment.stretch. Otherwise it will try to determine the intrinsic height of your CustomPaint which is zero because it doesn't have a child.

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'),
          ],
        )
    ),
  ));
}

这篇关于如何在垂直(高度)和水平(宽度)方向上实现小部件的扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！