Flutter Bloc：如何为底部条屏幕和普通屏幕提供一个cubit的实例？

Question

我的应用中有一个导航底栏。 我创建了一个自定义类，用于路由，该类设置所有逻辑，用于导航到应用程序中的所有屏幕，但是底部的bar页面不在此自定义类中。 我有一个问题，为底栏的屏幕提供一个cubit的实例，在自定义类中提供了一个屏幕。 有建议吗？

class UserNavScreen extends StatefulWidget {
  static const routeName = 'homepage_screen';

  UserNavScreen();

  @override
  State<UserNavScreen> createState() => _UserNavScreenState();
}

class _UserNavScreenState extends State<UserNavScreen> {
  var _index = 2;

  final _userPages = [
    const UserProfileScreen(),
    const UserNotificationScreen(),
    BlocProvider<MapCubit>(
        create: (context) => MapCubit(
              mapRepositery: MapRepositery(
                mapProvider: MapProvider(),
              ),
              storesRepositery: StoresRepositery(
                storesProvider: StoresProvider(),
              ),
            )..getStoresLocation(),
        child: UserMapScreen()),
    const UserTopTenScreen(),
    const UserHomepageScreen()
  ];

 

  Widget build(BuildContext context) {
    return Scaffold(
      body: _userPages[_index],
      bottomNavigationBar: _buildNavUser(),
    );
  }

  Widget _buildNavUser() {
    return StyleProvider(
      style: StyleNavBottomBar(),
      child: ConvexAppBar(
        style: TabStyle.fixedCircle,
        backgroundColor: Colors.white,
        color: Colors.grey,
        initialActiveIndex: _index,
        activeColor: Colors.green,
        cornerRadius: 16,
        curveSize: 90,
        height: 60,
        onTap: (index) {
          setState(() {
            _index = index;
          });
        },
        elevation: 2,
        items: const [
          TabItem(
            icon: Icons.person,
          ),
          TabItem(
            icon: Icons.notifications,
          ),
          TabItem(icon: Icons.navigation),
          TabItem(
            icon: FontAwesomeIcons.medal,
          ),
          TabItem(
            icon: Icons.home,
          ),
        ],
      ),
    );
  }
}


class AppRoute {
  
  Route? onGenerateRoute(RouteSettings routeSettings) {
    switch (routeSettings.name) {
 case StoreMap.routeName:
        final args = routeSettings.arguments as Store;
        return MaterialPageRoute(
          builder: (context) => StoreMap(store: args),
        );
    }
  }
}

Answer 1

看来我们几乎具有相同的导航设置，我经历的是懒惰地实例化路由类内的肘，然后使用 blocprovider.value.value 将其提供给命名路线，之后提供路由全球使用 repositoryProvider 如下：

class AppRoute {
  //* This will only get instantiated when used
  late final MapCubit mapCubit = MapCubit(MapRepository(
      mapProvider: MapProvider(), storesProvider: StoresProvider()));

  Route? onGenerateRoute(RouteSettings routeSettings) {
    switch (routeSettings.name) {
      case StoreMap.routeName:
        final args = routeSettings.arguments as Store;
        return MaterialPageRoute(
          builder: (context) => BlocProvider.value(
            value: mapCubit,
            child: StoreMap(store: args),
          ),
        );
    }
  }

  void dispose() {
    mapCubit.close();
  }
}

现在在 main.dart 中

void main() {
  runApp(
    App(),
  );
}

class App extends StatefulWidget {
  App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  void dispose() {
    context.read<AppRoute>().dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RepositoryProvider(
      create: (context) => AppRoute(),
      child: MaterialApp(
        // some traditional code & boilerplate....
        onGenerateRoute: context.read<AppRoute>().onGenerateRoute,
      ),
    );
  }
}

，我们可以在任何地方访问cubit，尤其是从 usernavscreen ，我们可以在其中进一步提供它到所需的页面：

class UserNavScreen extends StatefulWidget {
  static const routeName = 'homepage_screen';

  const UserNavScreen({Key? key}) : super(key: key);

  @override
  State<UserNavScreen> createState() => _UserNavScreenState();
}

class _UserNavScreenState extends State<UserNavScreen> {
  var _index = 2;
  late final AppRoute _appRoute;
  late final List<Widget> _userPages;

  @override
  void initState() {
    _appRoute = context.read<AppRoute>();
    _userPages = [
      const UserProfileScreen(),
      const UserNotificationScreen(),
      //* Here we're accessing the same cubit instance that named routes will access.
      BlocProvider<MapCubit>.value(
        value: _appRoute.mapCubit..getStoresLocation(),
        child: const UserMapScreen(),
      ),
      const UserTopTenScreen(),
      const UserHomepageScreen(),
    ];
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: _userPages[_index],
      bottomNavigationBar: _buildNavUser(),
    );
  }

  Widget _buildNavUser() {
    return StyleProvider(
      style: StyleNavBottomBar(),
      child: ConvexAppBar(
        style: TabStyle.fixedCircle,
        backgroundColor: Colors.white,
        color: Colors.grey,
        initialActiveIndex: _index,
        activeColor: Colors.green,
        cornerRadius: 16,
        curveSize: 90,
        height: 60,
        onTap: (index) {
          setState(() {
            _index = index;
          });
        },
        elevation: 2,
        items: const [
          TabItem(
            icon: Icons.person,
          ),
          TabItem(
            icon: Icons.notifications,
          ),
          TabItem(icon: Icons.navigation),
          TabItem(
            icon: FontAwesomeIcons.medal,
          ),
          TabItem(
            icon: Icons.home,
          ),
        ],
      ),
    );
  }
}

PS：请注意批准类中的处置方法（我更喜欢将其称为Applouter btw），此方法是在我们确定将永远不会再使用的情况下处置Cubit，在我们的情况下，它是获得的。首先实例化（在usernavscreen内部），这是因为我们有责任关闭由 blocprovider.value.value 提供的cub/bloc。