如何在 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上的列故障排除信息