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,
    );
  }
}