Flutter：如何将PageView与ExpansionTile放入同一Row并适配高度

要实现Row高度由ExpansionTile决定，同时让PageView铺满Row高度，核心是约束PageView的高度依赖于ExpansionTile的动态高度，避免PageView默认的无限高度导致布局冲突。具体实现方案如下：

核心思路 #

ExpansionTile展开/折叠时会动态改变自身高度，Row会自动适配这个高度。通过CrossAxisAlignment.stretch让Row内子组件拉伸至Row高度，再用IntrinsicHeight强制PageView继承该高度约束，同时通过Expanded分配横向空间，确保PageView铺满Row的宽度和高度。

代码示例 #

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    // PageView 占满剩余宽度，高度跟随Row
    Expanded(
      child: IntrinsicHeight(
        child: PageView(
          children: [
            Container(color: Colors.lightBlueAccent),
            Container(color: Colors.lightGreenAccent),
          ],
        ),
      ),
    ),
    // ExpansionTile 固定宽度，动态决定Row高度
    SizedBox(
      width: 220,
      child: ExpansionTile(
        title: const Text('折叠面板'),
        children: [
          for (int i = 0; i < 6; i++)
            ListTile(title: Text('列表项 $i')),
        ],
      ),
    ),
  ],
)

细节说明 #

• CrossAxisAlignment.stretch：让Row内所有子组件拉伸至Row的当前高度，这个高度由ExpansionTile的展开状态动态决定。
• IntrinsicHeight：限制PageView的高度不能超过父级（Row）的高度，避免PageView因默认特性无限扩展高度。
• Expanded：给PageView分配Row剩余的横向空间，保证它铺满Row的宽度。
• SizedBox：给ExpansionTile设置固定宽度，避免它与PageView争抢横向空间，也可根据需求替换为Flexible来分配宽度比例。

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