使容器高度与 ListView 内的固有行高度匹配

Question

我想让容器高度与此 ListView 内的行高度相匹配，这样我就可以为每张卡片提供一个很好的指示器。该列的长度是可变的，因此我无法设置特定的高度。如果我尝试使用 Expanded 小部件、IntrinsicHeight 小部件或“height: double.infinity”，我将收到渲染异常。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Card(
              child: Row(
                children: [
                  Container(
                    width: 10,
                    //height: 50,
                    color: Colors.blue,
                  ),
                  Column(
                    children: [
                      Text('A\nB\nC\nD'),
                    ],
                  ),
                  Column(
                    children: [
                      Text('$index'),
                    ],
                  ),
                ],
              ),
            );
          }),
    );
  }
}

Answer 1

您可以将整个

Row

包裹在

IntrinsicHeight

小部件中，如下所示：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Card(
              child: IntrinsicHeight(
                child: Row(
                  children: [
                    Container(
                      width: 10,
                      color: Colors.blue,
                    ),
                    const Column(
                      children: [
                        Text('A\nB\nC\nD'),
                      ],
                    ),
                    Column(
                      children: [
                        Text('$index'),
                      ],
                    ),
                  ],
                ),
              ),
            );
          }),
    );
  }

并删除容器的高度，这将使容器占据卡片的完整高度。