Flutter中如何让Expanded子元素占屏幕一半宽度，不受横竖屏影响？

问题现象 #

• 给横向ListView的子容器设置固定宽度width: 100时，组件正常显示
• 替换为width: double.infinity / 2，容器完全不显示
• 替换为width: MediaQuery.of(context).size.width / 2，竖屏显示正常，但横屏模式下屏幕左侧会出现间隙

问题原因 #

1. double.infinity / 2无效：double.infinity代表无限大的数值，即使除以2依然是无限宽。横向ListView要求子组件宽度必须是有限值，所以无法渲染出内容。
2. MediaQuery适配失效：MediaQuery.of(context).size.width获取的是整个屏幕的宽度，但ListView外层的Expanded是在父组件的约束下分配可用宽度，横屏时父组件可能存在padding、AppBar占用空间等情况，导致屏幕宽度和Expanded的实际可用宽度不匹配，计算出的容器宽度偏宽，滚动后左侧出现间隙。

解决方案 #

使用LayoutBuilder获取Expanded的实际可用宽度，以此来计算容器的宽度，能完美适配横竖屏以及各种父组件约束场景。

修改后的代码：

Expanded(
  flex: 1,
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 获取父组件（Expanded）的最大可用宽度，除以2作为每个容器的宽度
      final itemWidth = constraints.maxWidth / 2;
      return ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: itemWidth,
            height: 200,
            color: Colors.red,
          ),
          Container(
            width: itemWidth,
            height: 200,
            color: Colors.blue,
          ),
        ],
      );
    },
  ),
),

原理说明 #

LayoutBuilder会在组件布局时拿到父组件传递的约束条件，constraints.maxWidth就是当前Expanded能提供给ListView的最大宽度。用这个值来计算子容器宽度，能保证容器宽度始终匹配父组件的可用空间，不会出现宽度溢出或间隙问题。

内容的提问来源于stack exchange，提问作者victorvance2