Flutter BLoC：在父 Widget 更新时维护子状态

Question

我现在有一个应用程序可以创建计时器列表。它使用两个 BLoC，一个用于单个计时器，一个用于整个列表。您可以查看以下列表的示例：

在图像中，您可以看到索引 0 和 2 尚未启动，而索引 1 已启动。我的问题是，每当我从列表中添加或删除项目时，所有计时器都会重置。

当父窗口部件被重绘时，有没有办法让它们的状态保持不变？

这是列表代码：

这里的 Item Tile 包含计时器的 BLoC：

  class HomePage extends StatefulWidget {
  static const TextStyle timerTextStyle = TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.bold,
  );

  final Stream shouldTriggerChange;
  HomePage({@required this.shouldTriggerChange});
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  StreamSubscription streamSubscription;

  @override
  initState() {
    super.initState();
    streamSubscription = widget.shouldTriggerChange.listen((data) {
      createTimer(context, data);
    });
  }

  void createTimer(BuildContext context, timer_type timer) {
    BlocProvider.of<ListBloc>(context).add(Add(
        id: DateTime.now().toString(),
        duration: timer == timer_type.timer ? 100 : 0,
        timer: timer,
        timerTextStyle: HomePage.timerTextStyle));
  }

  @override
  didUpdateWidget(HomePage old) {
    super.didUpdateWidget(old);
    // in case the stream instance changed, subscribe to the new one
    if (widget.shouldTriggerChange != old.shouldTriggerChange) {
      streamSubscription.cancel();
      streamSubscription = widget.shouldTriggerChange
          .listen((data) => createTimer(context, data));
    }
  }

  @override
  dispose() {
    super.dispose();
    streamSubscription.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ListBloc, ListState>(
      builder: (context, state) {
        if (state is Failure) {
          return Center(
            child: Text('Oops something went wrong!'),
          );
        }
        if (state is Loaded) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              state.timers.isEmpty
                  ? Center(
                      child: Text('no content'),
                    )
                  : Expanded(
                      child: ListView.builder(
                        itemBuilder: (BuildContext context, int index) {
                          return ItemTile(
                            index: index,
                            timer: state.timers[index],
                            onDeletePressed: (id) {
                              BlocProvider.of<ListBloc>(context)
                                  .add(Delete(id: id));
                            },
                          );
                        },
                        itemCount: state.timers.length,
                      ),
                    ),
            ],
          );
        }
        return Center(
          child: CircularProgressIndicator(),
        );
      },
    );
  }
}

最初我认为这是一个关键问题，因为列表没有正确删除，但我相信我已经按照示例中显示的方式实现了键，但问题仍然存在。

class ItemTile extends StatelessWidget {
  final key = UniqueKey();
  final Function(String) onDeletePressed;
  final int index;
  final Timer timer;
  ItemTile({
    Key key,
    @required this.index,
    @required this.timer,
    @required this.onDeletePressed,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          Text('${index.toString()}'),
          BlocProvider(
            create: (context) => TimerBloc(ticker: Ticker(), timer: timer),
            child: Container(
              height: (MediaQuery.of(context).size.height - 100) / 5,
              child: Row(
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 10.0),
                        child: Center(
                          child: BlocBuilder<TimerBloc, TimerState>(
                            builder: (context, state) {
                              final String minutesStr =
                                  ((state.duration / 60) % 60)
                                      .floor()
                                      .toString()
                                      .padLeft(2, '0');
                              final String secondsStr = (state.duration % 60)
                                  .floor()
                                  .toString()
                                  .padLeft(2, '0');
                              return Text(
                                '$minutesStr:$secondsStr',
                              );
                            },
                          ),
                        ),
                      ),
                      BlocBuilder<TimerBloc, TimerState>(
                        buildWhen: (previousState, currentState) =>
                            currentState.runtimeType !=
                            previousState.runtimeType,
                        builder: (context, state) => TimerActions(),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          timer.isDeleting
              ? CircularProgressIndicator()
              : IconButton(
                  icon: Icon(Icons.delete, color: Colors.red),
                  onPressed: () {
                    onDeletePressed(timer.id);
                  },
                ),
        ],
      ),
    );
  }
}

这是在列表 BLoC 中传递的计时器模型：

class Timer extends Equatable {
  final timer_type timer;
  final int duration;
  final String id;
  final bool isDeleting;
  const Timer({
    @required this.id,
    @required this.timer,
    @required this.duration,
    this.isDeleting = false,
  });
  Timer copyWith({timer_type timer, int duration, String id, bool isDeleting}) {
    return Timer(
      id: id ?? this.id,
      duration: duration ?? this.duration,
      timer: timer ?? this.timer,
      isDeleting: isDeleting ?? this.isDeleting,
    );
  }

  @override
  List<Object> get props => [id, duration, timer, isDeleting];
  @override
  String toString() =>
      'Item { id: $id, duration: $duration, timer type: $timer, isDeleting: $isDeleting }';
}

任何帮助将不胜感激。

谢谢！

Answer 1

每次重建列表时都会创建一个新的UniqueKey，这会强制删除状态

因此，要修复它，您必须将键与计时器相关联，例如通过将计时器包装在包含计时器和键的类中，如下所示：

class KeyedTimer {
  final key = UniqueKey();
  Timer timer;
}

所以现在您将拥有一个 KeyedTimer 对象列表而不是计时器列表，并且您可以在列表的 itembuilder 中使用键