flutter - 连续使用FractionallySizedBox

Question

我想拥有一个任意宽度的小部件，其中包含一行相对于其父级尺寸大小为三个的小部件。
FractionallySizedBox听起来像是完成这项工作的正确工具，所以我这样尝试了它:

Container(height: 24.0, color: Colors.black, child:
  Row(children: [
    FractionallySizedBox(heightFactor: 1, widthFactor: 0.25,
                         child: Container(color: Colors.orange)),
    FractionallySizedBox(heightFactor: 1, widthFactor: 0.15,
                         child: Container(color: Colors.green)),
    FractionallySizedBox(heightFactor: 1, widthFactor: 0.05,
                         child: Container(color: Colors.blue)),
  ]
)

但是我遇到了一个错误

BoxConstraints forces an infinite width.

即使我在封闭容器上设置了一些宽度，也会发生这种情况。

为什么不起作用？

Answer 1

正如Flutter团队在“FractionallySizedBox(本周Flutter窗口小部件)”视频中所解释的那样，FractionallySizedBox需要包装在Flexible窗口小部件中，“以便它在行或列中都能很好地发挥作用”。

引用:https://www.youtube.com/watch?v=PEsY654EGZ0

这应该是原始问题的解决方案，格式如下:

Container(
    height: 24.0, 
    color: Colors.black, 
    child: Row(
        children: [
            Flexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.25,
                    child: Container(color: Colors.orange),
                ),
            ),
            Fexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.15,
                    child: Container(color: Colors.green)),
            ),
            Fexible(
                child: FractionallySizedBox(
                    heightFactor: 1, widthFactor: 0.05,
                    child: Container(color: Colors.blue)
                ),
            ),
        ]
    )
)

我也从事类似的工作，并正在寻找解决问题的方法，这是我用来表示数据级别的代码:

Row(
    children: <Widget>[
      Flexible(
        child: FractionallySizedBox(
            widthFactor: 1,
            child: Container(
              margin: EdgeInsets.only(right: 5),
              height: 6,
              decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.all(Radius.circular(125)),
              ),
            )
        ),
      ),
      Flexible(
        child: FractionallySizedBox(
            widthFactor: 1,
            child: Container(
              margin: EdgeInsets.only(right: 5),
              height: 6,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(125)),
              ),
            )
        ),
      ),
      Flexible(
        child: FractionallySizedBox(
            widthFactor: 1,
            child: Container(
              margin: EdgeInsets.only(right: 5),
              height: 6,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(125)),
              ),
            )
        ),
      ),
      Flexible(
        child: FractionallySizedBox(
            widthFactor: 1,
            child: Container(
              margin: EdgeInsets.only(right: 5),
              height: 6,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(125)),
              ),
            )
        ),
      ),
      Flexible(
        child: FractionallySizedBox(
            widthFactor: 1,
            child: Container(
              margin: EdgeInsets.only(right: 5),
              height: 6,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(125)),
              ),
            )
        ),
      ),
    ],
),

导致:
evenly spaced bars