在应用程序内使用两个不同的集团不起作用

Question

我正在使用冻结的 bloc，我在 MyApp 上使用 AuthBloc 然后我需要在 [=] 中使用另一个 bloc 30=]产品页面 .

用户点击产品页面内的按钮，详情页面将会打开。但是当用户点击按钮时没有任何动作发生，或者出现错误。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<AuthBloc>(
      create: (context) => AuthBloc(),
      child: MaterialApp(
        home: Router(
          routerDelegate: AppRouterDelegate(),
          backButtonDispatcher: RootBackButtonDispatcher(),
        ),
      ),
    );
  }
}

产品页面：

class ProductPage extends StatelessWidget {
  const ProductPage();

  @override
  Widget build(BuildContext context) {
    return BlocProvider<ProductsBloc>(
      create: (context) => ProductsBloc(),
      child: Scaffold(
          appBar: AppBar(
            title: Text('Products'),
          ),
          body: Center(
              child: FittedBox(child: BlocBuilder<ProductsBloc, ProductsState>(
            builder: (context, state) {
              return TextButton(
                child: Text("More Details"),
                onPressed: () => BlocProvider.of<ProductsBloc>(context)
                    .add(const ProductsEvent.goToDetailsEvent()),
              );
            },
          )))),
    );
  }
}

ProductBloc:

class ProductsBloc extends Bloc<ProductsEvent, ProductsState> {
  ProductsBloc() : super(_Initial());

  @override
  Stream<ProductsState> mapEventToState(
    ProductsEvent event,
  ) async* {
    if(event is GoToDetailsEvent){
      yield GoToDetailsState();
    }
  }
}

产品活动：

@freezed
class ProductsEvent with _$ProductsEvent {
  const factory ProductsEvent.started() = _Started;
  const factory ProductsEvent.goToDetailsEvent() = GoToDetailsEvent;
}

产品状态：

@freezed
class ProductsState with _$ProductsState {
  const factory ProductsState.initial() = _Initial;
  const factory ProductsState.goToDetailsState()=GoToDetailsState;
}

路由器代理代码：

class AppRouterDelegate extends RouterDelegate
    with ChangeNotifier, PopNavigatorRouterDelegateMixin {
  AppRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();
  final GlobalKey<NavigatorState> navigatorKey;

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        return Navigator(
          key: navigatorKey,
          pages: [
            MaterialPage(
              key: ValueKey("Home"),
              child: HomePage(),
            ),
            if (state is SignInState)
              MaterialPage(
                 key: ValueKey("Auth"),
                child: AuthPage(),
              ),
            if (state is ProductState)
              MaterialPage(
                 key: ValueKey("Product"),
                child: ProductPage(),
              ),
            if (state is GoToDetailsState)
              MaterialPage(
                 key: ValueKey("Details"),
                child: DetailsPage(),
              ),
          ],
          onPopPage: (route, result) {
            if (!route.didPop(result)) return false;
            return true;
          },
        );
      },
    );
  }

  @override
  Future<void> setNewRoutePath(configuration) {
    throw UnimplementedError();
  }
}

Answer 1

您在 ProductPage 发送了 'ProductsEvent.goToDetailsEvent'，但您在 AppRouterDelegate 的构建方法中的 'BlocBuilder' 用于 AuthBloc。

如果要使用2个BlocBuilder，参考下面的代码即可。
您需要更改每个州的名称以区分每个集团州。
（但我不确定这是最好的方法。）

...
BlocBuilder<AuthBloc, AuthState>(
    builder: (context, authState) {
        return BlocBuilder<ProductBloc, ProductState>(
            builder: (context, productState) {
                return Navigator(
                    key: navigatorKey,
...

Answer 2

这是替代答案，而不是嵌套的 blocBuilder。

class AppRouterDelegate extends RouterDelegate
    with ChangeNotifier, PopNavigatorRouterDelegateMixin {
  AppRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();
  final GlobalKey<NavigatorState> navigatorKey;

  @override
  Widget build(BuildContext context) {
    final authState = context.watch<AuthBloc>().state;
    final productsState = context.watch<ProductsBloc>().state;
    return Navigator(
      key: navigatorKey,
      pages: [
        MaterialPage(
          key: ValueKey("Home"),
          child: HomePage(),
        ),
        if (authState is SignInState)
          MaterialPage(
            key: ValueKey("Auth"),
            child: AuthPage(),
          ),
        if (authState is ProductState)
          MaterialPage(
            key: ValueKey("Product"),
            child: ProductPage(),
          ),
        if (productsState is GoToDetailsState)
          MaterialPage(
            key: ValueKey("Details"),
            child: DetailsPage(),
          ),
      ],
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        return true;
      },
    );
  }

  @override
  Future<void> setNewRoutePath(configuration) {
    throw UnimplementedError();
  }
}

在应用程序内使用两个不同的集团不起作用

using two diffrenet bloc inside the app does not work

navigator

flutter

bloc