Flutter：具有不同高度約束的水平 ListView 視圖

Question

我有一個固定高度為 100 的水平列表欄（在 Column 內使用）。 高度 100 適合 iPhone8。 但由於 100 高度限制，iPhone-X 中的像素溢出。 如果我做到140，兩者都很好。 但是在 iphone8 中該欄看起來並不好。 所以我想要一台設備的高度為 120，而另一台設備的高度為 140。 我想我可以使用 ConstrainedBox 來實現它，如下所示：

ConstrainedBox(constraints: BoxConstraints(minHeight: 100, maxHeight: 140), child: ListView(...))

但是 listview 一直以 140 高度運行。 那么如何實現不同設備的動態高度約束呢？

示例小部件：

class MyHorizontalBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100, // 140
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          _myCard(),
          _myCard(),
          _myCard(),
        ],
      ),
    );
  }

  Widget _myCard(){
    return Container(
      width: 115,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Top', style: TextStyle(fontSize: 12)),
          Text('Middle', style: TextStyle(fontSize: 25)),
          Text('Bottom', style: TextStyle(fontSize: 18)),
        ],
      ),
    );
  }
}

Answer 1

嘗試使用 MediaQuery.of(context).size.height 或 width 代替恆定的高度和寬度。

Answer 2

您可以使用LayoutBuilder小部件。 但是這些問題通常可以通過靈活的布局來解決。

例如，將您的水平條高度定義為可用高度的 1/3。

Answer 3

使用 MediaQuery.of(context)

試試下面的代碼。

class MyHorizontalBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double magicNumber = 5; // Try playing with this number to get the appearence. 
    return SizedBox(
      height: MediaQuery.of(context).size.height / magicNumber, 
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          _myCard(),
          _myCard(),
          _myCard(),
        ],
      ),
    );
  }

  Widget _myCard() {
    return Container(
      width: 115,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
              Text('Top', style: TextStyle(fontSize: 12)),
              Text('Middle', style: TextStyle(fontSize: 25)),
              Text('Bottom', style: TextStyle(fontSize: 18)),
            ],
          ),
        );
      }
    }

嘗試使用變量 magicNumber。