使用BlocListener顯示對話框-有解無憂

我有 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。

警報對話框

uj5u.com熱心網友回復：

我有 2 個文本欄位

和

上面這個回傳 TextField 的方法在表單內部被用來顯示兩個文本欄位。

基本上解釋了你的問題。由于您執行_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)]) 
},

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/439628.html

標籤：扑镖集团状态管理颤振块

上一篇：如何在Flutter中格式化時間

下一篇：在Dart中共享Plex庫