Flutter中Flexible/Expanded初始布局异常，点击后恢复正常

问题现象 #

使用PagedListView展示罪犯列表时，列表项Row内的两个Expanded组件（已尝试替换为Flexible）初始运行时第二个Expanded仅适配文本宽度，内容换行显示；点击屏幕任意位置后，布局自动恢复正常，第二个Expanded按比例占据空间。

解决方案尝试 #

1. 明确Row的主轴尺寸 #

给包裹Expanded的Row添加mainAxisSize: MainAxisSize.max，强制Row占据父容器的全部宽度：

Row(
  mainAxisSize: MainAxisSize.max, // 添加该行约束
  children: [
    Expanded(
      flex: 2,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8.0),
        child: Image.asset("assets/criminoso.webp", fit: BoxFit.fill),
      ),
    ),
    Expanded(
        flex: 3,
        child: Padding(
          padding: const EdgeInsets.only(left: 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Nome: ${item.name}"),
              Text("Apelido: ${item.vulgo}"),
            ],
          ),
        ))
  ],
)

2. 给Image组件指定明确高度 #

初始渲染时图片加载延迟可能导致Row高度计算异常，给Image.asset添加固定高度约束：

// 方式1：直接指定高度
Image.asset(
  "assets/criminoso.webp",
  fit: BoxFit.fill,
  height: 100,
)

// 方式2：用SizedBox包裹约束
SizedBox(
  height: 100,
  child: Image.asset("assets/criminoso.webp", fit: BoxFit.fill),
)

3. 给列表项添加唯一Key #

确保每个列表项能正确重建，避免复用旧的布局状态：

itemBuilder: (_, item, __) => Padding(
  key: ValueKey(item.name), // 用罪犯姓名作为唯一标识，或使用更唯一的id字段
  padding: const EdgeInsets.all(1.5),
  child: InkWell(...),
)

4. 手动触发布局刷新 #

在PagingController数据加载完成后，触发setState强制刷新布局：

// 在初始化PagingController的位置添加监听
_pagingController.addListener(() {
  if (_pagingController.value.itemList != null && mounted) {
    setState(() {});
  }
});

原因分析 #

这类初始布局异常通常由以下原因导致：

• 列表项初始渲染时，父容器的宽度约束未正确传递到Row组件
• 图片加载延迟导致Row的高度计算错误，进而干扰Expanded的空间分配逻辑
• PagedListView初始渲染阶段的布局约束未完全生效

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