美文网首页
BottomNavigationBar组件

BottomNavigationBar组件

作者: yyggzc521 | 来源:发表于2020-02-09 21:15 被阅读0次

    BottomNavigationBar 是底部导航条,可以定义底部 Tab 切换,BottomNavigationBar是 Scaffold 组件的参数。

    BottomNavigationBar组件

    属性

    属性
    import 'package:flutter/material.dart';
    
    main() {
      runApp(MyApp());
    }
    
    //MaterialApp组件作为根组件使用
    // Scaffold  有下面几个主要属性
    // appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement buildå
        return MaterialApp(
          home: Tabs(),
        );
      }
    }
    
    class Tabs extends StatefulWidget {
      Tabs({Key key}) : super(key: key);
    
      @override
      _TabsState createState() => _TabsState();
    }
    
    class _TabsState extends State<Tabs> {
    
    int _currentIndex=0,
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('导航栏'),
          ),
          body: Text('TabBar'),
          bottomNavigationBar: BottomNavigationBar(
              currentIndex: this._currentIndex,
              onTap: (int index){
                setState(() {
                  this._currentIndex = index;
                });
              },
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text("首页")
                ),
                 BottomNavigationBarItem(
                  icon: Icon(Icons.category),
                  title: Text("分类")
                ),
                
                 BottomNavigationBarItem(
                  icon: Icon(Icons.settings),
                  title: Text("设置")
                )
              ],
            ),
        );
      }
    }
    
    • 例子2
    import 'package:flutter/material.dart';
    import 'tabs/Home.dart';
    import 'tabs/Category.dart';
    import 'tabs/Setting.dart';
    
    class Tabs extends StatefulWidget {
      Tabs({Key key}) : super(key: key);
    
      _TabsState createState() => _TabsState();
    }
    
    class _TabsState extends State<Tabs> {
      int _currentIndex = 0;
      List _pageList = [
        HomePage(),
        CategoryPage(),
        SettingPage(),
      ];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Flutter Demo"),
          ),
          body: this._pageList[this._currentIndex],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: this._currentIndex, //配置对应的索引值选中
            onTap: (int index) {
              setState(() {
                //改变状态
                this._currentIndex = index;
              });
            },
            iconSize: 36.0, //icon的大小
            fixedColor: Colors.red, //选中的颜色
            type: BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.category), title: Text("分类")),
              BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置"))
            ],
          ),
        );
      }
    }
    
    • 点击tab,切换的是Scaffold的body 显示的内容;
    • tab下面的一级页面,不需要Scaffold
    • 一级页面下面的子页面,需要Scaffold,因为要显示导航栏

    相关文章

      网友评论

          本文标题:BottomNavigationBar组件

          本文链接:https://www.haomeiwen.com/subject/irumxhtx.html