在 Flutter 中让 Row 子节点尽可能宽（父节点的剩余宽度）？

Posted 2023-02-23

【中文标题】在 Flutter 中让 Row 子节点尽可能宽（父节点的剩余宽度）？

【英文标题】：Make a Row child as wide as possible (the remaining width of the parent) in Flutter?

【发布时间】：2021-10-04 06:09:27

【问题描述】：

我想在从 REST API 下载一些数据时显示一个小部件。当Future 尚未完成时，FutureBuilder 将使用它。

它应该显示一个灰色的正方形和一条灰色的线。

类似于 Facebook 所做的事情：

我用一个Row 和两个Containers 实现了它。但是，我希望这条线向右水平扩展，并在Row 内占用尽可能多的可用空间。那就是碰壁的地方。我该怎么做？

这是我的代码：

class Waiting extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Container(
              color: Colors.grey[200],
              height: 40,
              width: 40,
            ),
            SizedBox(width: 20),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
              child: Container(
                color: Colors.grey[200],
                width: 140, // I want this to be as wide as possible
                height: 10,
              ),
            )
          ],
        ),
      ),
    );
  

【问题讨论】：

如果你想扩展Rows 项目使用Expanded

【参考方案1】：

只需用扩展的小部件包装该部分：-

class Waiting extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Container(
              color: Colors.grey[200],
              height: 40,
              width: 40,
            ),
            SizedBox(width: 20),
            Expanded(                           //added expanded over here
            child: Padding(
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
              child: Container(
                color: Colors.grey[200],                    
                height: 10,
              ),
            ),
            ),
          ],
        ),
      ),
    );