Flutter 颤振：具有不同高度约束的水平ListView视图

我有一个固定高度为100的水平列表栏（用于列内部）。 高度100适合iPhone8。 但是，由于高度限制，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)),
        ],
      ),
    );
  }
}

尝试使用MediaQuery.of（context）.size.height或width代替恒定的高度和宽度。

您可以使用小部件。但这些问题通常是通过一个简单的方法来解决的

e、 g.将水平条高度定义为可用高度的1/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。

它在列中使用，因此任何类似于extended的flex都是无限的。但是LayoutBuilder建议有助于调试该问题。谢谢你的提示。应用这个想法，它在垂直模式下确实玩得很好，但是一旦设备水平旋转就会被翻转。虽然也有可能解决这个问题，但感觉像是一个黑客。但是这个想法把我带向了“MediaQuery.of（ctx.textScaleFactor）”的方向。在我的例子中，使用textScaleFactor缩放小部件的高度给了我更好的视觉效果。那么，继续吧。谢谢你的帮助。