flutter - 如何使用具有所需大小属性的子小部件填充列中的整个空闲位置？

问题描述

我在 Flutter 中有一个 UI，它有一个带有一些文本的简单圆形图表。

此圆形图表 ( https://pub.dev/packages/flutter_circular_chart ) 具有所需的大小属性。所以，我们必须定义它的大小，但是这样它就不会响应所有的 UI 屏幕大小，它不适合我想要的整个空间。

因此，例如，我想将其大小设置为也覆盖用蓝色注释的空间：

是否可以动态设置其大小以适应列中的整个可用空间？

我尝试了使用 double.infinity 大小参数等扩展的、fittedbox，但它们都没有帮助。

我的代码：

Widget _buildChart() {
    return Expanded(
      child: Container(
        color: Colors.green,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            AnimatedCircularChart(
              duration: Duration(milliseconds: 0),
              key: _chartKey,
              size: const Size(140.0, 140.0),
              chartType: CircularChartType.Radial,
              percentageValues: true,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                _buildText(
                    '${AppLocalizations.of(context).localize("free")}: $freeCount',
                    Colors.white),
                _buildText(
                    '${AppLocalizations.of(context).localize("busy")}: $busyCount',
                    Theme.of(context).buttonColor),
              ],
            )
          ],
        ),
      ),
    );
  }

你能帮我解决这个问题吗？我怎样才能使它的大小响应？有可能吗？

标签： flutterdart

将您的包裹AnimatedCircularChart在FittedBox其中进一步包裹Expanded，您无需再处理Size。无论您提供什么尺寸，它都会为您提供最大的剩余空间。

Expanded( // add this 
   child: FittedBox( // and  add this 
     child: AnimatedCircularChart(
       key: Key("chart_key"),
       duration: Duration(milliseconds: 0),
       size: Size(1, 1), // no matter even if it is 1, it will take up all remaining space 
       chartType: CircularChartType.Radial,
       percentageValues: true,
       initialChartData: data,
     ),
   ),
 )

完整代码：

Widget _buildChart() {
  return Expanded(
    child: Container(
      color: Colors.green,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(  // add this
            child: FittedBox(  // and  add this
              child: AnimatedCircularChart(
                key: Key("chart_key"),
                duration: Duration(milliseconds: 0),
                size: Size(1, 1), // no matter even if it is 1, it will take up all remaining space
                chartType: CircularChartType.Radial,
                percentageValues: true,
                initialChartData: data,
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("Free: 14"),
              Text("Busy: 31"),
            ],
          )
        ],
      ),
    ),
  );
}

更新：

如果你说的是大屏幕上圆环上方的剩余空间，那是因为圆环能够保持圆形的形状，所以真的不能超越。我创建了一个小视频记录来向您展示效果。而且我用过size: 1。

flutter - 如何使用具有所需大小属性的子小部件填充列中的整个空闲位置？

问题描述

解决方案

推荐阅读