时间戳

首页 > 解决方案 > 连续使用 FractionallySizedBox

flutter - 连续使用 FractionallySizedBox

问题描述

我想要一个任意宽度的小部件，其中包含一排三个大小相对于其父级大小的小部件。

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 强制无限宽度。

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

为什么这不起作用？

标签： flutter

解决方案

正如 Flutter 团队在“FractionallySizedBox (Flutter Widget of the Week)”视频中所解释的那样，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)),
              ),
            )
        ),
      ),
    ],
),

产生： 均匀分布的条形

推荐阅读