Flutter横向GridView如何填满可用高度 仿Telegram桌面端布局问题

仿制Telegram桌面端应用时，最初尝试将ListView放入Row组件实现分栏布局失败，改用设置了crossAxisCount: 2参数的GridView.count组件后，组件无法填满内容下方的空白区域，无法实现高度撑满的效果。

• 直接将ListView放入Row布局失败的核心原因：Row的水平方向为无界约束，而ListView本身会在水平方向尝试占用最大可用空间，在无明确宽度约束的环境下会触发布局溢出错误。
• 使用GridView.count无法撑满高度的核心原因：GridView是为滚动网格场景设计的组件，默认会根据childAspectRatio（默认值为1.0，即子组件宽高比1:1）计算子组件尺寸，不会自动让子组件适配父容器的垂直高度，因此会出现下方留白。

固定两栏分栏布局不需要使用GridView，直接使用Row配合Expanded组件即可实现，既可以解决布局报错问题，也能让两栏自动撑满整个可用高度，性能也更优。

修正后的分栏组件代码 #

将原有ChatListWithRoom组件替换为以下实现：

class ChatListWithRoom extends StatelessWidget {
  const ChatListWithRoom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      // 强制所有子组件垂直方向撑满Row的高度
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 左侧聊天列表：分配一半可用宽度
        Expanded(
          child: ChatList(),
        ),
        // 右侧聊天区域：分配一半可用宽度
        Expanded(
          child: Container(
            color: Colors.blue,
            child: const Center(child: Text("请选择聊天室")),
          ),
        )
      ],
    );
  }
}

扩展优化 #

如果需要贴近真实Telegram桌面端的宽度比例（左侧聊天列表较窄，右侧聊天区较宽），可以通过flex参数调整两栏占比，例如实现1:2的宽度比：

class ChatListWithRoom extends StatelessWidget {
  const ChatListWithRoom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 左侧占1/3宽度
        Expanded(
          flex: 1,
          child: ChatList(),
        ),
        // 右侧占2/3宽度
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.blue,
            child: const Center(child: Text("请选择聊天室")),
          ),
        )
      ],
    );
  }
}

注意：

1. Expanded组件会自动为子组件（包括ListView这类滚动组件）分配明确的宽度/高度约束，从根源上避免滚动组件在Flex布局（Row/Column）中触发的无界约束报错。
2. 原有ChatList组件中ListView.builder未设置itemCount参数，会默认生成无限个列表项，建议补充itemCount: 聊天列表数据长度避免不必要的性能损耗。

内容的提问来源于stack exchange，提问作者강수경