在一行中使用 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 强制无限宽度。

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

为什么这不起作用？

Answer 1

正如 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)),
              ),
            )
        ),
      ),
    ],
),

结果： 均匀分布的条形

Answer 2

您不能FractionallySizedBox直接在 Row 或 Column 中使用。您可以使用 Expand 小部件的 flex 参数将行和列拆分为百分比，如下所示。

Row(
      children: <Widget>[
        Expanded(
          flex: 6, // 60% of space => (6/(6 + 4))
          child: Container(
            color: Colors.red,
          ),
        ),
        Expanded(
          flex: 4, // 40% of space
          child: Container(
            color: Colors.purple,
          ),
        ),
      ],
    ),

Answer 3

FractionallySizedBox 似乎只能在 Row、Column 和 Wrap 小部件之外工作。我会推荐这种方法：

class FractionalPositioningQuestion extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    // Replace with the size your parent widget is.
    final pWidth = MediaQuery.of(context).size.width;

    return Row(children: <Widget>[
      Container(
        width: pWidth * 0.25,
        color: Colors.orange,
      ),
      Container(
        width: pWidth * 0.15,
        color: Colors.green,
      ),
      Container(
        width: pWidth * 0.05,
        color: Colors.blue,
      ),
    ],
    mainAxisAlignment: MainAxisAlignment.center, // Depending on what you want
    );
  }
}

不过，您仍然需要找到一种方法来获取父窗口小部件的任意宽度。

希望这至少有一点帮助:-)