时间戳

首页 > 解决方案 > 有没有办法在 Flutter 中重建 AnimatedList？

flutter - 有没有办法在 Flutter 中重建 AnimatedList？

问题描述

我的“锻炼”应用程序使用具有各种锻炼项目的多个锻炼列表时遇到以下问题：

我选择了一个包含12 个锻炼项目的锻炼列表。显示带有 AnimatedList 的“活动”屏幕。
之后，我选择了一个包含 80 个锻炼项目的不同锻炼列表。 AnimatedList 现在显示新的锻炼列表，但只显示前 12 个锻炼项目。为什么？

我认为构建小部件中的 AnimatedList 每次都会重建（我没有使用 GlobalKey）。

class WorkoutListView extends StatelessWidget {
  const WorkoutListView({this.filename});
  final String filename;

  @override
  Widget build(BuildContext context) {
    return Selector<WorkoutListModel, List<Workout>>(
      selector: (_, model) => model.filterWorkouts(filename),
      builder: (context, workouts, _) {
        return AnimatedWorkoutList(
            list: workouts,
        );
      },
    );
  }
}

class AnimatedWorkoutList extends StatefulWidget {
 const AnimatedWorkoutList({
    Key key,
    @required List<Workout> list,
  })  : _list = list,
        super(key: key);  
  final List<Workout> _list;

  @override
  _AnimatedWorkoutListState createState() => _AnimatedWorkoutListState();
}

class _AnimatedWorkoutListState extends State<AnimatedWorkoutList> {
  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      initialItemCount: widget._list.length,
      itemBuilder: (context, index, animation) {
        final workout = widget._list[index];
        return Column(
          children: [
         // Using AnimatedList.of(context).removeItem() for list manipulation
         ],
        );
      },
    );
  }
}

标签： flutterflutter-animation

解决方案

尝试这个：

class AnimatedWorkoutList extends StatefulWidget {
 const AnimatedWorkoutList({
    @required List<Workout> list,
  });  
  final List<Workout> list;

  @override
  _AnimatedWorkoutListState createState() => _AnimatedWorkoutListState();
}

class _AnimatedWorkoutListState extends State<AnimatedWorkoutList> {
  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      initialItemCount: widget.list.length,
      itemBuilder: (context, index, animation) {
        final workout = widget.list[index];
        return Column(
          children: [
         // Using AnimatedList.of(context).removeItem() for list manipulation
         ],
        );
      },
    );
  }
}

推荐阅读