如何在 Flutter 中使用 flex 实现嵌套列/行

Question

我正在尝试实现像ListTile这样具有Column (2:7:1)和Row(8:2)的小部件。 这是我想要的小部件。

我试过这个代码。

Widget _buildCard() {
  return Card(
    child: Row(
      children: <Widget>[
        Expanded(
          flex: 2,
          child: Container(),
        ),
        Expanded(
          flex: 7,
          child: Column(
            children: <Widget>[
              Expanded(
                flex: 8,
                child: Container(),
              ),
              Expanded(
                flex: 2,
                child: Container(),
              ),
            ],
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(),
        ),
      ],
    ),
  );
}

但我收到了这个错误。

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

我明白这个错误意味着什么，但我不知道如何避免它。 实现这一点的最佳方法是什么？

Answer 1

问题是框​​架无法计算items的高度，因为你有一个无限的高度（因为你可能在一个ListView里面）和几个Expanded在Column中，这个列试图尽可能大，但你缺乏高度的限制。

你在这里有两个选择，给Card一个垂直约束（例如，包裹在一个Container并设置一个固定的高度）或给 ListView 的itemExtent一个值

检查文档https://api.flutter.dev/flutter/widgets/Column-class.html上的列故障排除信息