Flutter 在嵌套 Row 和 ListView 中展开高度

Question

我在 ListView 中有一个 Card，应该如上图所示。

//Code has been simplified by removing most theme.
ListView(
          children: [
            Card(
              child: Row(children: [
                Container(
                  color: Colors.red,
                  width: 8,
                  height: double.infinity, //Promblem here!!!
                ),
                SizedBox(width: 8),
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Text(
                        'Detail',
                      ),
                      Text('Detail'),
                      SizedBox(
                        width: double.infinity,
                        child: Text(
                          DateTime.now().toString(),
                          textAlign: TextAlign.end,
                        ),
                      ),
                    ],
                  ),
                )
              ]),
            ),
          ]),

问题出在红色的 Container 上。这是一条红色的垂直线作为通知。我希望它与 Row 或 Card 一样高，但保持有限的宽度，如 4。

所以我已经尝试 height: double.infinity 和 Expanded 使用容器。它要么是异常，要么是溢出。而且，尝试用 Expanded 包装 Row 会导致另一个布局异常。

那么如何让这条红色竖线有合适的高度呢？

Answer 1

实现此目的的简单方法是：

ListView(
        children: [
          ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),
          ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),
          ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),ListTile(
            leading: SizedBox(height: 40, width: 8.0, child: Container(color: Colors.red, width: 6.0,)),
            title: const Text("Random Name"),
            subtitle:  Text("Short Description \n ${DateTime.now()}"),
          ),

        ],
      ),

Flutter 在嵌套 Row 和 ListView 中展开高度

Flutter expanded height in nested Row and ListView

layout

nested

flutter