为什么Flutter的AnimatedSwitcher组件切换文本时没有触发动画？

AnimatedSwitcher的动画触发逻辑是识别child是否为不同的组件实例，你的代码里不管_smallTitle是true还是false，最外层的child都是固定的Column组件，组件类型没有变，也没有设置唯一的key，所以AnimatedSwitcher会认为前后是同一个child，就不会触发过渡动画。

你有两种常用的修复方式：

• 方式一：给外层的Column添加唯一的key，让AnimatedSwitcher可以识别到两个状态下的Column是不同的实例

AnimatedSwitcher(
  duration: Duration(milliseconds: 400),
  // 这里绑定_smallTitle的值作为key，值变更后key同步变更，组件就会被识别为新实例
  child: Column(
    key: ValueKey(_smallTitle),
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      _smallTitle ? Text('Text1/', style: TextStyle(fontSize: 12.0)) : SizedBox.shrink(),
      Text(
        _smallTitle ? _smallHeaderText : _largeHeaderText,
      ),
    ],
  ),
),

补充小优化：空占位用SizedBox.shrink()比空Container性能更好

• 方式二：把需要切换的部分单独拆出来作为AnimatedSwitcher的child，不用包整个Column，适合只有部分内容需要切换的场景

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    AnimatedSwitcher(
      duration: Duration(milliseconds: 400),
      child: _smallTitle ? Text('Text1/', style: TextStyle(fontSize: 12.0), key: ValueKey('smallTitle')) : SizedBox.shrink(key: ValueKey('noSmallTitle')),
    ),
    AnimatedSwitcher(
      duration: Duration(milliseconds: 400),
      child: Text(
        _smallTitle ? _smallHeaderText : _largeHeaderText,
        key: ValueKey(_smallTitle ? 'smallText' : 'largeText'),
      ),
    )
  ],
)

如果想要自定义切换动画，可以搭配AnimatedSwitcher.defaultTransitionBuilder参数设置你想要的过渡效果，默认是渐隐渐显的过渡。

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