Question

我有一个StatefulWidgets（容器）列表。这些容器描述了课程的参与者。

用户可以通过单击FlatButton删除这些参与者。

由于该列表是直接从 Firestore 中检索为流的，因此在单击FlatButton并删除时会有很小的延迟。

在这种情况下，我想禁用此按钮，直到删除此Container。为此，我用 AbsorbPointer 包装容器，并使用在 setState 内变化的布尔值编辑吸收参数的值。

更新列表后出现问题。特定容器的吸收的值保持为 true 。因此，用户无法删除在旧的已删除参与者列表中占位的另一个参与者。

在减小参与者列表的长度之后，如何将 disabled 的值重置为 false ？

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

为每个列表项生成一个密钥，以防止框架重用错误的状态。

实际上，这是非全局密钥的真正目的：区分子代，否则子代在和解过程中将变得难以区分。 https://api.flutter.dev/flutter/foundation/Key-class.html

可以通过participant通过ValueKey()数据库中的任何类似UUID的属性（参与者ID，或者简称为name）生成密钥。

  @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可能比您预期的要早禁用，这很危险。

Answer 2

由于我使用的是Bloc，最后，我在状态类中添加了String deletedId。删除参与者时，只需将其uid传递到新产生的状态。

此外，我摆脱了有状态窗口小部件，并进行了以下检查以禁止单击刚刚删除的参与者。

absorbing: state.deleteId == state.participants[index].uid,

@First_Strike推荐的方法的工作原理类似，只是他会使用其他状态管理（有状态的小部件，而不是Bloc）。

删除项目后，UI在ListView.builder中更改

2 个答案: