在 flutter 中的 state 上顯示警報

Question

我知道我們可以在特定的 state 肘上返回不同的小部件，但是我們如何顯示警報或其他狀態交互：

BlocBuilder<LoginCubit, LoginState> (
  builder: (context, LoginState loginState) {
    if (loginState is LoginInitial) {
      return Text("LoginInitial");
    } else if (loginState is LoginLoading) {
      return Text("LoginLoading");
    } else if (loginState is LoginLoaded) {
      return Text("LoginLoaded");
    } else if (loginState is LoginError) {
      return Text("LoginError");
    } else {
      return Container();
    }
  },
)

在 LoginError 中，我想顯示一個警告對話框。

Answer 1

您可以使用BlocConsumer ，它具有builder和listener ：

• builder屬性是您已經知道的小部件構建器回調
• listener是在狀態更改時調用的回調，您幾乎可以在其中執行任何操作。

對於更細粒度的控制，您可以使用buildWhen和listenWhen ，如果它們返回true它們將分別觸發builder或listener回調。

例如，您可以看到我如何使用BlocConsumer在此處發生錯誤狀態時顯示SnackBar 。

不要介意仔細檢查類型

if (state is RegionalReportLoadingError)

因為它可能沒用（根據文檔），我只是想確定一下，當我沒有非常清楚的使用listenWhen 。

您可以在文檔中查看有關BlocConsumer更多信息（不幸的是，我無法鏈接錨點）。

Answer 2

顯示對話框、快餐欄、退出屏幕或導航到其他地方——這些類型的任務應該在監聽器中完成，如下所示：

useCubitListener<BookDetailsCubit, BookDetailsPageState>(cubit, (cubit, state, context) {
  state.maybeWhen(
    saveBook: () => context.router.pop<bool>(true),
    deleteBook: () => context.router.pop<bool>(true),
    orElse: () => null,
  );
}, listenWhen: (state) => (state is BookDetailsPageSaveBook || state is BookDetailsPageDeleteBook));

在這里，我使用帶鈎的肘尺。 useCubitListener()是一個全局 function。更多信息請參閱我的Flutter cubits + hooks 教程。