flutter - 项目删除后 ListView.builder 中的 UI 更改

Question

我有一个 StatefulWidgets(容器)列表。这些容器描绘了类(class)的参与者。
用户可以通过单击平面按钮来删除这些参与者。
由于列表是直接从 中检索的火库 作为流，单击 FlatButton 并删除时会有一点延迟。
在这种情况下，我想禁用该按钮，直到此 Container 被删除。我通过用 包裹容器来做到这一点。吸收指针 并使用在 内变化的 bool 值编辑吸收参数的值设置状态 .
更新列表后出现问题。 的值吸纳对于某个 Container 剩余 真实 .因此，用户不能删除另一个参与者，该参与者在旧的已删除参与者的列表中占据了位置。
如何重置 已禁用 值为 假 在参与者列表的长度减少后？

class _ParticipantList extends StatelessWidget {
  final CourseEventFormBloc courseEventFormBloc;

  const _ParticipantList({
    Key key,
    this.courseEventFormBloc,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CourseEventFormBloc, CourseEventFormState>(
      builder: (context, state) {
        return Expanded(
          child: ListView.builder(
            itemCount: state.participants.length,
            itemBuilder: (context, index) {
              return _ParticipantContainer(
                index: index,
                courseEventFormBloc: courseEventFormBloc,
              );
            },
          ),
        );
      },
    );
  }
}

class _ParticipantContainer extends StatefulWidget {
  final CourseEventFormBloc courseEventFormBloc;
  final int index;
  const _ParticipantContainer({
    Key key,
    @required this.index,
    @required this.courseEventFormBloc,
  }) : super(key: key);

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

class __ParticipantContainerState extends State<_ParticipantContainer> {
  bool disabled = false;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CourseEventFormBloc, CourseEventFormState>(
      builder: (context, state) {
        print('${widget.index} - disabled:$disabled');
        return AbsorbPointer(
          absorbing: disabled,
          child: Container(
            margin: const EdgeInsets.symmetric(vertical: 4.0),
            decoration: BoxDecoration(
              color: Colors.blueGrey.shade100,
              borderRadius: BorderRadius.all(Radius.circular(13)),
            ),
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.07,
            alignment: Alignment.center,
            child: Stack(
              // mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Align(
                  alignment: Alignment.center,
                  child: Text(state.participants[widget.index].name),
                ),
                SizedBox(width: 20.0),
                Align(
                  alignment: Alignment.centerLeft,
                  child: FlatButton(
                    onPressed: () {
                      // through this AlertDialog I can delete a participant
                      // showAlertDialog(context, index, state.participants[index]);
                      showDialog(
                          context: context,
                          builder: (BuildContext context) {
                            return AlertDialog(
                              //! I might get an error for the Bloc since the Dialog has another context
                              title: BlocBuilder<CourseEventFormBloc,
                                  CourseEventFormState>(
                                cubit: widget.courseEventFormBloc,
                                builder: (context, state) {
                                  return Text(state.participants.isNotEmpty
                                      ? state.participants[widget.index].name
                                      : '');
                                },
                              ),
                              content:
                                  Text('Möchtest du den Teilnehmer entfernen?'),
                              actions: <Widget>[
                                FlatButton(
                                  onPressed: () => Navigator.pop(context),
                                  child: Text(
                                    'nein',
                                    style: TextStyle(color: kDarkRosaColor),
                                  ),
                                ),
                                FlatButton(
                                  onPressed: () {
                                    widget.courseEventFormBloc.add(
                                      CourseEventAdminParticipantDeleted(
                                        widget.index,
                                        state.participants[widget.index],
                                        state.courseEventObject,
                                      ),
                                    );
                                    setState(() {
                                      disabled = true;
                                    });
                                    Navigator.pop(context);
                                  },
                                  child: Text(
                                    'ja',
                                    style: TextStyle(color: kDarkRosaColor),
                                  ),
                                ),
                              ],
                            );
                          });
                    },
                    child: Container(
                      // margin: const EdgeInsets.only(right: 27.0),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          border: Border.all(width: 2, color: kDarkRosaColor)),
                      child: Icon(
                        Icons.delete,
                        color: kDarkRosaColor,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

在 build 之前使用这个有意义吗？有状态小部件的方法？

@override
  void didUpdateWidget(covariant _ParticipantContainer oldWidget) {
    super.didUpdateWidget(oldWidget);
    disabled = false;
  }

Answer 1

为每个列表项生成一个 key ，以防止框架重用错误的状态。
事实上，这正是非全局 key 的目的:区分在和解过程中将变得无法区分的 child 。 https://api.flutter.dev/flutter/foundation/Key-class.html
可以从您的 participant 中的任何类似 UUID 的属性生成 key 。数据库，(参与者 ID，或简称为名称)，作者 ValueKey() .

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CourseEventFormBloc, CourseEventFormState>(
      builder: (context, state) {
        return Expanded(
          child: ListView.builder(
            itemCount: state.participants.length,
            itemBuilder: (context, index) {
              return _ParticipantContainer(
                key: ValueKey(state.participants[index].id), // Generate ValueKey based on UUID
                index: index, // Perhaps you should pass entire participant instead of an index
                courseEventFormBloc: courseEventFormBloc,
              );
            },
          ),
        );
      },
    );
  }

覆盖 didUpdateWidget适用于您的特殊情况。但请记住，如果任何祖先在您的网络请求中触发了重建，那么 didUpdateWidget将被调用。因此。 AbsorbPointer可能比您预期的更早被禁用，这是有风险的。