flutter - 使用 BlocListener 显示对话框

Question

我有 2 个带有手势检测器的文本字段，点击手势检测器后，我使用 BlocListener 小部件打开一个 AlertDialog。

Widget _getSourceAndOriginTextField(String hintText, controller) {
    final portsCubit = BlocProvider.of<PortsCubit>(context);
    return TextFormField(
      controller: controller..text = "",
      readOnly: true,
      decoration: InputDecoration(
          suffixIcon: GestureDetector(
              onTap: () {
                portsCubit.getAllPorts();
              },
              child: BlocListener<PortsCubit, PortsState>(
                listenWhen: (previous, current) => previous != current,
                listener: (context, state) async {
                  if (state is PortsLoadedState) {
                    await showDialog(
                        context: context,
                        builder: (_) => BlocProvider.value(
                              value: portsCubit,
                              child: PortsDialog(state.portsList),
                            ));
                  }
                },
                child: SvgPicture.asset(
                  'assets/svg/chevron_down_icon.svg',
                  fit: BoxFit.scaleDown,
                  height: 10,
                  width: 18,
                ),
              )),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: BorderSide(
              color: Colors.transparent,
              style: BorderStyle.solid,
              width: 1,
            ),
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: BorderSide.none,
          ),
          filled: true,
          contentPadding: EdgeInsets.all(8),
          hintText: hintText,
          hintStyle: AppStyle.hintStyle),
    );
  }

上面的方法返回一个 TextField，用于在表单内显示两个文本字段。

Form(
    children:[_getSourceAndOriginTextField('Origin',controller),
    SizedBox(height:10),
    _getSourceAndOriginTextField('Origin',controller)])

当我点击其中一个文本字段时，状态会发生变化，对话框会打开，但对话框会显示两次。我在这里缺少什么？

以下是供引用的图片，任何帮助将不胜感激。

TextField inside the form .

The AlertDialog

Answer 1

I have 2 textFields

和

This method above which returns a TextField is being used inside the form to display two textfields.

基本上解释了你的问题。由于您正在执行 _getSourceAndOriginTextField()两次，您还创建了 BlocListener<PortsCubit, PortsState>(...)两次。因此，当 PortsCubit状态更改为 PortsLoadedState ，两个监听器都会触发 showDialog功能。

你能做的就是抬起BlocListener并包裹 Form用它。这样您将只有一个可以打开对话框的监听器:

BlocListener<PortsCubit, PortsState>(
  listenWhen: (previous, current) => previous != current,
  listener: (context, state) async {
    if (state is PortsLoadedState) {
      await showDialog(
        context: context,
        builder: (_) => BlocProvider.value(
          value: portsCubit,
          child: PortsDialog(state.portsList),
      ));
  },
  child: Form(
    children:[_getSourceAndOriginTextField('Origin',controller),
    SizedBox(height:10),
    _getSourceAndOriginTextField('Origin',controller)]) 
},