Flutter如何让RTL ListView项中多个Chip仅单行显示、超出部分省略

实现步骤 #

• 第一步：将现有代码中存放文字和Chip的Column外层包裹Expanded组件，让其占用Row布局的剩余可用宽度，获得明确的最大宽度约束，避免横向溢出
• 第二步：在Chip展示位置使用Wrap组件，配置单行展示、溢出省略的属性即可实现需求，RTL方向下系统会自动适配从右到左的排列逻辑，无需额外处理

完整修改代码 #

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8.0),
  child: Card(
    elevation: 16,
    color: Colors.white,
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Container(
              height: 100,
              width: 80,
              color: Colors.black54,
              child: MyNetworkImage(
                url: item.imageUrl,
                height: 100,
                width: 80,
              ),
            ),
          ),
          const SizedBox(width: 8),
          // 新增Expanded包裹Column，限制最大宽度
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(item.nurseName),
                const SizedBox(height: 8),
                Text(item.nurseType),
                const SizedBox(height: 8),
                // Chip展示逻辑
                Wrap(
                  direction: Axis.horizontal,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  spacing: 4, // 可自行调整Chip之间的横向间距
                  children: [
                    // 替换为你实际业务的Chip列表即可
                    Chip(label: Text('标签1')),
                    Chip(label: Text('标签2')),
                    Chip(label: Text('标签3')),
                    Chip(label: Text('长文本测试标签')),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    ),
  ),
)

注意事项 #

• 如果你使用的Flutter版本低于3.10，Wrap组件暂不支持overflow属性，可升级Flutter版本，或使用SingleChildScrollView配合NeverScrollableScrollPhysics实现截断效果，也可使用对应第三方组件库的单行溢出配置实现需求
• 如果需要自定义省略样式，可自行计算Chip总宽度与可用宽度的差值，超出时手动在末尾添加带省略号的自定义提示组件即可

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