Flutter实现含图片的行布局：Text1可省略、Text2需完整显示

直接上代码实现，完全匹配你的需求：

Row(
  crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中对齐
  children: [
    // 开头的图片（可替换为Image.asset/Image.network）
    SizedBox(
      width: 25,
      height: 25,
      child: Image.asset('assets/avatar_icon.png'),
    ),
    const SizedBox(width: 8),
    // 名称文本：过长时自动省略
    Expanded(
      child: Text(
        "这是一个可能很长的用户名称示例",
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
        style: TextStyle(fontSize: 14),
      ),
    ),
    const SizedBox(width: 8),
    // ID文本：强制完整展示
    const Text(
      "USER_9876543210",
      style: TextStyle(fontSize: 12, color: Colors.grey),
    ),
    const SizedBox(width: 8),
    // 末尾固定尺寸25的图片
    SizedBox(
      width: 25,
      height: 25,
      child: Image.network('https://example.com/arrow_icon.png'),
    ),
  ],
)

关键细节说明： #

• Text1（名称）：用Expanded包裹，让它占据Text2和末尾图片之外的剩余空间，配合TextOverflow.ellipsis和maxLines:1实现文本过长时省略显示。
• Text2（ID）：不使用弹性布局组件，确保它能自适应自身宽度，完整展示内容不会被截断。
• 末尾图片：通过SizedBox固定宽高25，保证尺寸一致。
• 加入SizedBox设置元素间距，优化布局的视觉效果。

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