Flutter学习之BottomNavigationBar以及路由(界面跳转)学习

文章用来记录属性和使用方法，防止之后忘记，可以过来查找。

BottomNavigationBar

创建方式

class _TabbarsState extends State<Tabbars> {
  late int currentIndex = 0;
  final List list = [    SSLHome(),    SSLCategory(),    SSLSetting()  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('这是首页'),
      ),
      //设置当前界面
      body: list[currentIndex],
      //设置底部tabBar
      bottomNavigationBar: BottomNavigationBar(
        //设置当前的下标.设置好之后会动态改变
        currentIndex: currentIndex,
        //点击事件
        onTap: (int index){
          //想要动态更新当前界面必须使用setState更新数据
          setState(() {
            currentIndex = index;
          });
        },
        //大小
        iconSize: 36,
        //选中之后的颜色
        fixedColor: Colors.red,
        //设置按钮的名称和图标
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.category),label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.settings),label: '设置'),
        ],
      ),
    );
  }
}

路由，也就是iOS中的界面跳转。

路由分为两种，1、普通路由，2、命名路由。

普通路由

Navigator.of(context).push(
  MaterialPageRoute(builder: (context)=> SSLSearch(title: '这是搜索界面',))
);

只需要吧上述代码中的 SSLSearch(title: '这是搜索界面',) 替换成你的组件（页面）即可。很简单。

既然有push 那么一定有pop。

Navigator.of(context).pop();

命名路由

命名路由不传值。可以这样使用。

首先在App入口处，注册路由。

main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: const Tabbars(),
      title: '这是首页',
      //在这里注册命名路由
      routes: {
        '/search':(context)=>SSLSearch(),
      },
    );
  }
}

如上 吧 SSLSearch()替换成你的页面即可（这种跳转怎么传值暂时未知）

然后

Navigator.of(context).pushNamed('/search');

调用以上代码就可以跳转到指定界面。

但实际情况界面跳转经常需要传值例如产品列表跳转到产品详情，需要传递productId。

命名路由传值的方式。

继续使用routes属性注册路由。

class MyApp extends StatelessWidget {
  var routes = {
    '/search': (context) => SSLSearch(),
  };
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: const Tabbars(),
      title: '这是首页',
      //在这里注册命名路由
      routes: routes,
    );
  }
}

然后在跳转的地方传值

Navigator.of(context).pushNamed('/search',arguments:"这是一个标题arguments");

接收值通过 ModalRoute.of(context)!.settings.arguments。

class SSLSearch extends StatefulWidget {
  @override
  State<SSLSearch> createState() => _SSLSearchState();
}

class _SSLSearchState extends State<SSLSearch> {
  String title = "";
  @override
  Widget build(BuildContext context) {
    //接收值
    title = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text('adas'),
        onPressed: (){
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text(title),
      ),
      body: Text('搜索界面'),
      backgroundColor: Colors.blue,
    );
  }
}