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

概述下面的代码列出了一个图表,我需要在图表中实现图表在垂直(高度)和水平(宽度)方向上的扩展.建议的方法(例如 https://docs.flutter.io/flutter/widgets/Row-class.html)是在行或列中使用扩展. 我试图扩展的图表小部件扩展了CustomPaint,没有子节点,所有内容都是使用CustomPainter.paint(画布,大小)在画布上使用CustomP 下面的代码列出了一个图表,我需要在图表中实现图表在垂直(高度)和水平(宽度)方向上的扩展.建议的方法(例如 https://docs.flutter.io/flutter/widgets/Row-class.html)是在行或列中使用扩展.

我试图扩展的图表小部件扩展了CustomPaint,没有子节点,所有内容都是使用CustomPainter.paint(画布,大小)在画布上使用CustomPainter绘制的.

这段代码

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('^^^^^^:'),);

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

在ChartPainter.paint(画布,大小)内部有一个print()打印大小.

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

上面的paint->打印的结果是：

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

打印与图像一起显示,行级别的宽度扩展已传递给CustomPainter.print(画布,大小)(宽度= 340.0),但列上的高度扩展未传递给自定义画家打印(身高= 0.0).虽然结果显示行确实得到了它的扩展高度,但如果没有在行内传递给CustomPainter – 接收到0高度.

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

谢谢

解决方法 这是针对您所看到的问题的简化测试用例.解决方案是为您的Row提供CrossAxisAlignment.stretch的crossAxisAlignment.否则,它将尝试确定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-wclass 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'),)    ),));}

总结

以上是内存溢出为你收集整理的flutter – 如何在垂直(高度)和水平(宽度)方向上实现窗口小部件的扩展全部内容，希望文章能够帮你解决flutter – 如何在垂直(高度)和水平(宽度)方向上实现窗口小部件的扩展所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。