Flutter GridView中自定义Widget动画滚动后反转问题求助

你的猜测完全正确——GridView的item滚动出视图范围后会被销毁，对应的State也会被dispose，当你滚回顶部时，Widget会重新创建，动画控制器回到初始的未完成状态，所以之前已经完成动画的Widget看起来像是“反转”了。

解决核心是把状态从子Widget提升到父组件，让父组件保存每个item的选中状态，子Widget根据父组件传递的状态来同步动画，而不是自己维护状态。

修改后的完整代码：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Thirty Seconds',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

// 改为StatefulWidget，保存每个item的选中状态
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 用Map记录每个index的选中状态（true=动画完成，false=未完成）
  final Map<int, bool> _selectedStates = {};

  void _toggleItemState(int index) {
    setState(() {
      _selectedStates[index] = !_selectedStates.containsKey(index) ? true : !_selectedStates[index]!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 2,
        children: List.generate(20, (index) {
          final itemIndex = index + 1;
          return MyCustomWidget(
            index: itemIndex,
            isSelected: _selectedStates[itemIndex] ?? false,
            onToggle: () => _toggleItemState(itemIndex),
          );
        }),
      ),
    );
  }
}

// 自定义Widget修改：接收父组件的状态和回调
class MyCustomWidget extends StatefulWidget {
  const MyCustomWidget({
    super.key,
    required this.index,
    required this.isSelected,
    required this.onToggle,
  });

  final int index;
  final bool isSelected;
  final VoidCallback onToggle;

  @override
  State<MyCustomWidget> createState() => _MyCustomWidgetState();
}

class _MyCustomWidgetState extends State<MyCustomWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _colorAnimation = ColorTween(begin: Colors.white, end: Colors.yellow)
        .animate(_animationController)
      ..addListener(() => setState(() {}));
    
    // 初始化时同步父组件的状态
    if (widget.isSelected) {
      _animationController.value = 1.0;
    }
  }

  @override
  void didUpdateWidget(covariant MyCustomWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 父组件状态变化时，同步动画控制器
    if (widget.isSelected != oldWidget.isSelected) {
      if (widget.isSelected) {
        _animationController.forward();
      } else {
        _animationController.reverse();
      }
    }
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onToggle,
      child: Container(
        color: _colorAnimation.value,
        child: Center(
          child: Text("Custom Widget ${widget.index}"),
        ),
      ),
    );
  }
}

关键修改点：

• 父组件MyHomePage改为Stateful，用_selectedStates存储每个item的选中状态
• 子Widget新增isSelected和onToggle参数，不再自己维护动画状态
• 子Widget在initState和didUpdateWidget中同步动画控制器的状态，确保和父组件保存的状态一致
• 点击事件改为调用父组件的回调，更新全局状态

这样无论怎么滚动，父组件都保存着所有item的选中状态，子Widget重建时会根据父组件的状态恢复动画，就不会出现状态丢失的问题了。

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