Flutter中Row组件内文本溢出时在View前实现渐隐效果的问题

我这段Flutter代码里的ExpansionTile，当文本过长时会溢出。需求是文本过长时，在右侧“View”组件前用渐隐（TextOverflow.fade）的方式展示文本。但尝试用Expanded或Flexible包裹溢出的文本后，文本和前面的bullet图标都消失了，求解决办法。

原代码 #

ExpansionTile(
    leading: Wrap(
      spacing: DynamicSize.Azwidth(30),
      children: [
        Icon(
          Icons.menu_rounded,
          color: Color(0xFFE0E0E0),
        ),
        SvgPicture.asset('images/fire.svg'),
      ],
    ),
    title: Text(
      'Foam Rolling',
      style: TextStyle(
        fontSize: DynamicSize.Azheight(16),
        fontWeight: FontWeight.w500,
        fontFamily: 'DMSans',
        color: Color(0xFF193669),
      ),
    ),
    children: [
      Padding(
        padding: EdgeInsets.only(
            left: DynamicSize.Azwidth(97), right: DynamicSize.Azwidth(24)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              child: Row(
                children: [
                  SvgPicture.asset('images/bullet.svg'),
                  SizedBox(width: DynamicSize.Azwidth(16)),
                  Text(
                    'Foam Rolling Front Hip !!!!!!!!!!!!!!!!!!',
                    overflow: TextOverflow.fade,
                    maxLines: 1,
                    softWrap: false,
                  ),
                ],
              ),
            ),
            GestureDetector(
              onTap: () {},
              child: Row(
                children: [
                  Text('View'),
                  Icon(
                    Icons.arrow_forward_ios_rounded,
                    size: DynamicSize.Azheight(13),
                  ),
                ],
              ),
            )
          ],
        ),
      )
    ],
  );

当前问题效果 #

当前代码运行时，过长文本会直接超出容器边界，无法正常显示渐隐效果。

解决方案 #

问题根源在于外层Row的布局约束没处理好：原代码用无约束的Container包裹左侧内容，直接给Text加Expanded/Flexible会导致整个Row失去约束，内容被压缩消失。调整方案如下：

1. 把左侧的Container替换成Expanded，让它占据Row中除右侧“View”外的所有可用空间
2. 在包含bullet图标和Text的内部Row里，给Text包裹Flexible，让文本在可用空间内收缩并触发渐隐效果

修改后的代码：

ExpansionTile(
  leading: Wrap(
    spacing: DynamicSize.Azwidth(30),
    children: [
      Icon(
        Icons.menu_rounded,
        color: Color(0xFFE0E0E0),
      ),
      SvgPicture.asset('images/fire.svg'),
    ],
  ),
  title: Text(
    'Foam Rolling',
    style: TextStyle(
      fontSize: DynamicSize.Azheight(16),
      fontWeight: FontWeight.w500,
      fontFamily: 'DMSans',
      color: Color(0xFF193669),
    ),
  ),
  children: [
    Padding(
      padding: EdgeInsets.only(
          left: DynamicSize.Azwidth(97), right: DynamicSize.Azwidth(24)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // 用Expanded替代Container，占据剩余空间
          Expanded(
            child: Row(
              children: [
                SvgPicture.asset('images/bullet.svg'),
                SizedBox(width: DynamicSize.Azwidth(16)),
                // Flexible包裹Text，实现文本渐隐
                Flexible(
                  child: Text(
                    'Foam Rolling Front Hip !!!!!!!!!!!!!!!!!!',
                    overflow: TextOverflow.fade,
                    maxLines: 1,
                    softWrap: false,
                  ),
                ),
              ],
            ),
          ),
          GestureDetector(
            onTap: () {},
            child: Row(
              children: [
                Text('View'),
                Icon(
                  Icons.arrow_forward_ios_rounded,
                  size: DynamicSize.Azheight(13),
                ),
              ],
            ),
          )
        ],
      ),
    )
  ],
);

说明 #

• Expanded确保左侧内容有足够的布局空间，不会被右侧“View”挤压
• Flexible让文本在可用宽度内自适应，超出时触发TextOverflow.fade的渐隐效果
• 移除无意义的Container，简化布局层级

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