如何在其他类 flutter 中将 main 的命名路由传递给 BottomNavigationBar?

How to pass named routes of main to BottomNavigationBar in other class flutter?

提问人:Mohammad Bilal Akbar 提问时间:12/2/2022 更新时间:12/2/2022 访问量:106

问:

我的 main.dart 屏幕调用 SplashScreen,然后 SplashScreen 调用 BottomNavigationScreen。我在 widgetOptions 中手动调用 _widgetOptions.elementAt(_selectedIndex) 的所有屏幕。

我不想手动调用所有屏幕。相反,我想使用main.dart文件中定义的命名路由来调用屏幕。如何将命名路由传递给我定义 BottomNavigatioBar 的另一个类?

如何在 main 以外的类中添加 BottomNavigationBar 并调用命名路由而不是手动调用类?

main.dart

import 'package:flutter/material.dart';
import 'package:form_data_api/screens/all_articles_screen.dart';
import 'package:form_data_api/screens/article_detail_screen.dart';
import 'package:form_data_api/screens/user_profile_screen.dart';

// import 'package:form_data_api/screens/all_children_screen.dart';
// import 'package:form_data_api/screens/child_detail_screen.dart';
// import 'package:form_data_api/screens/user_profile_screen.dart';

import 'screens/all_children_screen.dart';
import 'screens/bottom_navigation_screen.dart';
import 'screens/child_detail_screen.dart';
import 'splash_screen.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/splashScreen',
      routes: {
        // When navigating to the "/" route, build the FirstScreen widget.
        '/splashScreen': (_) =>  const SplashScreen(),
        // When navigating to the "/second" route, build the SecondScreen widget.
        '/bottomNavigationScreen': (_) =>  const BottomNavigationScreen(),
        '/userProfileScreen': (_) =>  const UserProfileScreen(),
        '/allChildrenScreen': (_) => const AllChildrenScreen(),
        '/childDetailScreen': (context) => const ChildDetailScreen(childName: '', childId: '',),
        '/allArticleScreen': (context) => const AllArticleScreen(),
        '/articleDetailScreen': (context) => const ArticleDetailScreen(articleName: '', articleId: '',),
      },
      // home: SplashScreen(),
    );
  }
}

bottom_navigation_screen.飞镖

import 'package:flutter/material.dart';
import 'all_articles_screen.dart';
import 'all_children_screen.dart';
import 'user_profile_screen.dart';


class BottomNavigationScreen extends StatefulWidget {
  const BottomNavigationScreen({super.key});

  @override
  State<BottomNavigationScreen> createState() => _BottomNavigationScreenState();
}

class _BottomNavigationScreenState extends State<BottomNavigationScreen> {
  int _selectedIndex = 0;
  // static const TextStyle optionStyle =
  // TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    UserProfileScreen(),
    AllChildrenScreen(),
    AllArticleScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: _widgetOptions,
      ),
      // body: Center(
      //   child: _widgetOptions.elementAt(_selectedIndex),
      // ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue[50],
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Children',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.article),
            label: 'Articles',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

我的 main.dart 屏幕调用 SplashScreen,然后 SplashScreen 调用 BottomNavigationScreen。我在 widgetOptions 中手动调用 _widgetOptions.elementAt(_selectedIndex) 的所有屏幕。

我不想手动调用所有屏幕。相反,我想使用main.dart文件中定义的命名路由来调用屏幕。如何将命名路由传递给我定义 BottomNavigatioBar 的另一个类?

flutter dart 参数 参数传递 named-routing

评论


答:

0赞 Amit Bahadur 12/2/2022 #1

使用这个

onTap: (index){
  switch(index){
      case 0:
        Navigator.pushNamed(context, "/userProfileScreen");
        break;
      case 1:
        Navigator.pushNamed(context, "/allChildrenScreen");
        break;
      case 2:
        Navigator.pushNamed(context, "/childDetailScreen");
        break;
      case 3:
        Navigator.pushNamed(context, "/allArticleScreen");
        break;

        ...etc
    }
 },

评论

0赞 Mohammad Bilal Akbar 12/2/2022
body: IndexedStack( index: _selectedIndex, children: _widgetOptions, ),
0赞 Mohammad Bilal Akbar 12/2/2022
如何通过 children 中 main 中定义的路由导入屏幕:_widgetOptions?
0赞 Amit Bahadur 12/3/2022
然后@MohammadBilalAkbar使用这个 Navigator.pushNamed(context, AppRoute.userProfileScreen);
0赞 yaman hafez 12/2/2022 #2

你好,兄弟,你好吗?非常容易,您应该创建这个类类

这是您的材料应用程序

return MaterialApp(
  initialRoute: '/splashScreen',
  routes: {
    // When navigating to the "/" route, build the FirstScreen widget.
    AppRoute.splashScreen: (_) =>  const SplashScreen(),
    // When navigating to the "/second" route, build the SecondScreen widget.
    AppRoute.bottomNavigationScreen: (_) =>  const 
    BottomNavigationScreen(),
    .......
  },
  // home: SplashScreen(),
);

以及您应该创建的这个 AppRoute 类

Class AppRoute{
static const String splashScreen = '/splash-screen';
static const String bottomNavigationScreen = '/bottom-navigation-bar-screen';
....
}

之后,当您想调用该页面时;

Navigator.pushNamed(context, AppRoute.splashScreen);

我会帮助你的

评论

0赞 Mohammad Bilal Akbar 12/2/2022
如何通过 children 中 main 中定义的路由导入屏幕:_widgetOptions?
0赞 yaman hafez 12/2/2022
如果在孩子中你不能,因为这个小部件没有路由