如何在Flutter中实现基于Stream的UI变化动画？

要实现Stream数据变化时的平滑动画过渡，核心是让动画组件保持实例稳定，不能每次数据流更新就重建组件。你可以把Stream的监听逻辑放在StatefulWidget的生命周期里，用状态变量保存目标值，再配合Flutter的Animated系列组件（比如AnimatedContainer）来自动处理过渡动画。

修改后的完整代码 #

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _targetSize = 50.0;
  final DataStreamSource _dataSource = DataStreamSource();

  @override
  void initState() {
    super.initState();
    // 监听Stream，收到新值时更新目标尺寸
    _dataSource.dataStream.listen((newSize) {
      setState(() {
        _targetSize = newSize.toDouble();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: _dataSource.generate,
          // 用AnimatedContainer实现自动过渡动画
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 500),
            curve: Curves.easeInOut,
            height: _targetSize,
            width: _targetSize,
            color: Colors.deepOrange,
          ),
        ),
      ),
    );
  }
}

class DataStreamSource {
  static final DataStreamSource _instance = DataStreamSource._internal();
  factory DataStreamSource() => _instance;
  DataStreamSource._internal();

  final BehaviorSubject<int> _dataController = BehaviorSubject();
  Stream<int> get dataStream => _dataController.stream;

  void generate() => _dataController.add(Random().nextInt(100) + 100);
}

关键改动说明 #

• 将MyHomePage改为StatefulWidget，用_targetSize状态变量保存当前目标尺寸，避免每次Stream更新重建组件
• 在initState中监听Stream，收到新数据时通过setState更新目标尺寸，触发AnimatedContainer的动画
• 使用AnimatedContainer替代普通Container，它会自动在尺寸变化时生成过渡动画，你可以通过duration和curve调整动画时长和曲线

为什么之前的方法无效？ #

你之前在StreamBuilder的builder里直接创建Container，每次Stream有新数据时，builder都会生成一个全新的Container实例。Flutter无法识别新旧组件的关联，自然不会触发动画过渡。而现在的方案中，AnimatedContainer是同一个实例，只是更新它的尺寸参数，Flutter会自动处理动画逻辑。

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