使容器在 Flutter 中的 Row 小部件中占用剩余宽度的有效方法

Question

我是 Flutter 的新手，在练习它 UI 时遇到了这样一种情况：我有一个列表，其中每个列表元素左侧有一个图像，右侧有一些文本。

下面是我的方法

child: ListView(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            children: [
            const SizedBox(height: 5),
            Row(
              children: [
                 Container(
                        height: 80,
                        width: 80,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          image: const DecorationImage(
                            image: NetworkImage('http://images.unsplash.com/photo-1555010133-d883506aedee?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max'),
                            fit: BoxFit.cover
                          )
                        ),
                      ),
                      const SizedBox(width: 10),
                      Container(
                        color: Colors.green,
                        height: 80,
                        width: 280,
                      )
                    ],
                  ),
                ],
              ),

这里我分别为两个容器指定宽度，这不是一种有效的方法，因为 phone 大小可能会有所不同。以下是上述代码块的结果

Screenshot of the app screen

我尝试将 crossAxisAlignment: CrossAxisAlignment.stretch 指定给 Row() 但它抛出如下错误

The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.

我怎样才能做到这一点？请协助

谢谢

Answer 1

在行内用 Expanded 包裹小部件：

Row(
  children: [
    ...otherChildren,
    Expanded(
      child: Container(
        color: Colors.green,
        height: 80,
      ),
    ),
  ],
),

Answer 2

将 ListView.builder 与 ListTile 小部件一起使用。它的左边有一个前导小部件（通常是一个图标或头像），中间有一个文本和一个尾随小部件（通常是一个图标），每个都是可选的。

ListView.builder(
  itemCount: ...,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: const CircleAvatar(
        radius: 20.0,
        foregroundImage: NetworkImage(...),
      ),
      title: Text(...),
      subtitle: Text(...),
      trailing: ...,
      onTap: () => ...,
    );
  },
)

使容器在 Flutter 中的 Row 小部件中占用剩余宽度的有效方法

Efficient way to make container take remaining width in a Row widget in Flutter

flutter

flutter-layout