如何在Row中结合SizeTransition使用Text且避免溢出问题

一、解决Tile收缩时文本溢出问题 #

问题核心是收缩状态下文本和trailing图标仍占据布局空间导致溢出，同时要保证leading图标始终在Row末尾、Spacer生效。可通过以下方式调整布局：

1. 绑定组件显隐与动画状态
   将title文本和trailing图标包裹在一个容器内，通过动画值控制该容器的尺寸，而非仅依赖SizeTransition。示例代码结构：

   Row(
     children: [
       // 仅在展开状态显示文本和trailing图标
       SizeTransition(
         sizeFactor: animation,
         axis: Axis.horizontal,
         child: Row(
           children: [
             Text(tile.title),
             const SizedBox(width: 8),
             Icon(tile.trailingIcon),
           ],
         ),
       ),
       const Spacer(), // 保证leading图标始终固定在Row末尾
       Icon(tile.leadingIcon),
     ],
   )
   

   收缩时文本区域宽度随动画逐渐变为0，Spacer自动填充剩余空间，既实现动画效果，又彻底避免文本溢出。

2. 避免滥用Flexible/Expanded
   不要用Flexible包裹文本，否则会破坏Spacer的布局逻辑。通过SizeTransition控制文本区域的显隐，既能保证动画流畅，又能维持布局稳定性。

3. 强化收缩时的组件隐藏
   可结合AnimatedOpacity进一步优化，在动画值低于阈值时完全隐藏文本区域，彻底消除溢出风险：

   AnimatedOpacity(
     opacity: animation.value > 0.1 ? 1 : 0,
     duration: const Duration(milliseconds: 100),
     child: SizeTransition(
       sizeFactor: animation,
       axis: Axis.horizontal,
       child: Row(
         children: [Text(tile.title), const SizedBox(width: 8), Icon(tile.trailingIcon)],
       ),
     ),
   )
   

二、动画编排优化（父类Controller供子类使用） #

1. 传递Animation而非Controller
   父类负责创建和管理AnimationController，仅将Animation<double>（如controller.drive(Tween(begin: 0, end: 1))）传递给子类Tile，避免子类直接操作Controller，降低耦合度。

2. 统一动画时序
   所有Tile共享同一Animation，确保展开/收缩动画完全同步。父类只需调用Controller的forward()/reverse()，所有子类Tile的SizeTransition会自动响应动画值变化。

3. 严格管理生命周期
   父类必须在dispose()方法中销毁Controller，避免内存泄漏。子类无需处理Controller的生命周期，仅接收Animation即可。

4. 优化动画流畅度
   可通过CurvedAnimation添加缓动效果，提升动画的自然感：

   final animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
   

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