Question

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

此圆形图表（https://pub.dev/packages/flutter_circular_chart）具有必需大小属性。因此，我们必须定义它的大小，但是以这种方式，它不会对所有UI屏幕大小都响应，它不能适应我想要的整个空间。

例如我想将其大小设置为也覆盖蓝色标注的空间：

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

我尝试了扩展，fitbox具有double.infinity尺寸参数等，但是它们都不起作用。

我的代码：

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

您愿意帮助我解决这个问题吗？我如何使其尺寸敏感？可能吗？

Answer 1

将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。

Answer 2

为此使用LayoutBuilder类。 layoutbuilder类允许您根据父窗口小部件约束来定义高度。例如，您可以说图表高度是parant小部件可用高度的40％。

有关进一步的响应（屏幕旋转等），请查看MediaQuery

如何使用具有必需的size属性的子代小部件填充列中的整个空闲位置？

2 个答案: