Flutter:具有不同高度约束的水平ListView视图

Question

我有一个固定高度为100的水平列表栏(在列中使用)。身高100对于iPhone8来说是很好的。但在iPhone-X中，由于高度限制为100，像素溢出。如果我加到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(上下文)、.size.height或width代替固定的高度和宽度。

Answer 2

您可以使用LayoutBuilder小部件。但这类问题通常是通过flexible layout解决的。

例如，将您的单杠高度定义为可用高度的1/3。

Answer 3

使用MediaQuery.of(上下文)

尝试以下代码。

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。