Flutter：状态更新成功后 Bloc 不导航到另一个屏幕

Question

我正在尝试使用 blocs / cubits 导航到另一个页面。我有一个 cubit 在方法完成后成功导航到另一个页面，但由于某种原因，它在另一个 cubit 上不起作用，尽管状态更改成功，并且在方法上完成操作。

class WalletCreateDialog extends StatefulWidget {
  const WalletCreateDialog({required this.mnemonic});

  final String mnemonic;

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

class _WalletCreateDialogState extends State<WalletCreateDialog> {
  @override
  void initState() {
    BlocProvider.of<WalletCreateCubit>(context)
        .addCreatedWalletToWalletList(widget.mnemonic);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<WalletCreateCubit, WalletCreateState>(
      listener: (context, state) {
        if (state is WalletAdded) {
          Navigator.of(context).pop();
          showDialog(
            context: context,
            barrierDismissible: false,
            builder: (context) => AlertDialog(
              content: Text(
                'Wallet added! Navigating back to home screen...',
              ),
            ),
          );
          Navigator.of(context).pushNamedAndRemoveUntil(
            WalletOverviewHomeScreen.routeName,
            (route) => false,
          );
        }
      },
      child: AlertDialog(
        content: Container(
          height: MediaQuery.of(context).size.height * 0.08,
          child: Row(
            children: [
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("Adding wallet..."),
                    const LoadingIndicator(),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在上面的代码行中，它在成功完成 addCreatedWalletToWalletList 方法后成功导航到 WalletOverviewHomeScreen。

class WalletDeleteDialog extends StatefulWidget {
  const WalletDeleteDialog({required this.walletAddress});

  final String walletAddress;

  @override
  State<WalletDeleteDialog> createState() => _WalletDeleteDialogState();
}

class _WalletDeleteDialogState extends State<WalletDeleteDialog> {
  @override
  void initState() {
    BlocProvider.of<WalletDeleteCubit>(context)
        .deleteWallet(widget.walletAddress);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<WalletDeleteCubit, WalletDeleteState>(
      listener: (context, state) {
        if (state is WalletDeleteFinished) {
          Navigator.of(context).pop();
          showDialog(
            context: context,
            barrierDismissible: false,
            builder: (context) => AlertDialog(
              content: Text(
                'Wallet deleted! Navigating back to home screen...',
              ),
            ),
          );
          Navigator.of(context).pushNamedAndRemoveUntil(
            WalletOverviewHomeScreen.routeName,
            (route) => false,
          );
        }
      },
      child: AlertDialog(
        content: Container(
          height: MediaQuery.of(context).size.height * 0.08,
          child: Row(
            children: [
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("Deleting wallet..."),
                    const LoadingIndicator(),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

另一方面，在上面的代码行中，方法完成后它不会导航到同一屏幕。我已经验证了两个肘的状态都发生了变化。此外，热重启应用程序实际上会显示应该删除的内容确实被删除了，因此 deleteWallet 方法本身的实现没有问题。

完成 deleteWallet 方法后如何导航到 WalletOverviewHomeScreen？

对于上下文，以下是 Cubits 的状态类。

part of 'wallet_create_cubit.dart';

abstract class WalletCreateState extends Equatable {
  const WalletCreateState();

  @override
  List<Object> get props => [];
}

class WalletCreateInitial extends WalletCreateState {
  const WalletCreateInitial();

  @override
  List<Object> get props => [];
}

class WalletCreateLoading extends WalletCreateState {
  const WalletCreateLoading();

  @override
  List<Object> get props => [];
}

class WalletCreated extends WalletCreateState {
  final String mnemonic;

  const WalletCreated({required this.mnemonic});

  @override
  List<Object> get props => [mnemonic];
}

class WalletAdding extends WalletCreateState {
  const WalletAdding();

  @override
  List<Object> get props => [];
}

class WalletAdded extends WalletCreateState {
  const WalletAdded();

  @override
  List<Object> get props => [];
}

part of 'wallet_delete_cubit.dart';

abstract class WalletDeleteState extends Equatable {
  const WalletDeleteState();

  @override
  List<Object> get props => [];
}

class WalletDeleteInitial extends WalletDeleteState {
  const WalletDeleteInitial();

  @override
  List<Object> get props => [];
}

class WalletDeleteOngoing extends WalletDeleteState {
  const WalletDeleteOngoing();

  @override
  List<Object> get props => [];
}

class WalletDeleteFinished extends WalletDeleteState {
  const WalletDeleteFinished();

  @override
  List<Object> get props => [];
}

Answer 1

移除Navigator.of(context).pop();
因为你不需要它。当你使用 Navigator.of(context).pushNamedAndRemoveUntil

Answer 2

看起来修复是直接将 deleteFromWallet 的内容复制到 deleteWallet 函数。也就是说，在 WalletDeleteCubit 中，它是从这个开始的：

Future<void> deleteWallet(String address) async {
    FlutterSecureStorage storage = FlutterSecureStorage();
    emit(WalletDeleteOngoing());
    deleteFromWallet(storage, address);
    debugPrint("Wallet with address: $address is deleted");
    emit(WalletDeleteFinished());
    debugPrint('Emit WalletDeleteFinished');
  }

为此：

void deleteWallet(String address) async {
    FlutterSecureStorage storage = FlutterSecureStorage();
    emit(WalletDeleteOngoing());
    await storage.delete(
      key: WalletOverviewHomeScreen.walletKey + address,
    );
    debugPrint("Wallet with address: $address is deleted");
    emit(WalletDeleteFinished());
    debugPrint('Emit WalletDeleteFinished');
  }

Flutter：状态更新成功后 Bloc 不导航到另一个屏幕

Flutter: Bloc not navigating to another screen after succesful state update

flutter

flutter-dependencies

bloc