Flutter 基础控件 BottomNavigationBar

Flutter 基础控件 BottomNavigationBar

创建子页面

/// 首页
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("HOME"),),
      body: Center(
        child: Text("HOME"),
      ),
    );
  }
}

/// 搜索页面
class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SEARCH"),),
      body: Center(
        child: Text("SEARCH"),
      ),
    );
  }
}

/// 邮箱页面
class EmailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("EMAIL"),),
      body: Center(
        child: Text("EMAIL"),
      ),
    );
  }
}

创建一个状态可变的控件

/// 底部导航栏
class BottomNavigationDemo extends StatefulWidget {
  @override
  _BottomNavigationDemoState createState() {
    return _BottomNavigationDemoState();
  }
}
class _BottomNavigationDemoState extends State<BottomNavigationDemo> {
  @override
  Widget build(BuildContext context) {
    return null;
    }
}

创建底部导航栏

     // 底部导航栏
      bottomNavigationBar: BottomNavigationBar(items: [
        BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: Colors.grey,
            ),
            title: Text("HOME", style: TextStyle(color: Colors.grey),),
            activeIcon: Icon(
              Icons.home,
              color: Colors.blue,
            ),
        ),
        BottomNavigationBarItem(
            icon: Icon(
              Icons.search,
              color: Colors.grey,
            ),
            title: Text("SEARCH", style: TextStyle(color: Colors.grey)),
            activeIcon: Icon(
              Icons.search,
              color: Colors.blue,
            ),
        ),
        BottomNavigationBarItem(
            icon: Icon(
              Icons.email,
              color: Colors.grey,
            ),
            title: Text("EMAIL", style: TextStyle(color: Colors.grey)),
            activeIcon: Icon(
              Icons.email,
              color: Colors.blue,
            )
        ),
      ],

设置底部导航栏状态，及相关属性

class _BottomNavigationDemoState extends State<BottomNavigationDemo> {
  int currentPosition = 0;
  List<Widget> pageList = [];

  @override
  void initState() {
  	// 初始化添加页面
    pageList..add(HomePage())..add(SearchPage())..add(EmailPage());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pageList[currentPosition],
      // 底部导航栏
      bottomNavigationBar: BottomNavigationBar(items: ...,
        fixedColor: Colors.blue,
        type: BottomNavigationBarType.fixed,
        // 当前位置
        currentIndex: currentPosition, 
        // item 点击事件
        onTap: (index) {
        	// 改变位置
          setState(() {
            currentPosition = index;
          });
        },
      ),
    );
  }
}

效果

自定义底部导航栏

/// 自定义底部导航栏
class CustomBottomNavigationDemo extends StatefulWidget {
  @override
  _CustomBottomNavigationDemoState createState() {
    return _CustomBottomNavigationDemoState();
  }
}

class _CustomBottomNavigationDemoState
    extends State<CustomBottomNavigationDemo> {
  int currentPosition = 0;
  List<Color> colorsList = [];
  List<Widget> widgetList = [];

  @override
  void initState() {
    super.initState();
    widgetList..add(NewPage("首页"))..add(NewPage("消息"));
    colorsList..add(Colors.blue)..add(Colors.grey);
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: widgetList[currentPosition],
      bottomNavigationBar: BottomAppBar(
        child: Row(
          // 在主轴方向占有空间的值，默认是max。
          mainAxisSize: MainAxisSize.max,
          // 主轴方向上的对齐方式，会对child的位置起作用，默认是start。
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            RaisedButton(
              color: Colors.white,
              elevation: 0,
              onPressed: () {
                setState(() {
                  currentPosition = 0;
                  colorsList[0] = Colors.blue;
                  colorsList[1] = Colors.grey;
                });
              },
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(Icons.home, color: colorsList[0], size: 30,),
                  Text("HOME", style: TextStyle(color: colorsList[0]),)
                ],
              ),
            ),
            RaisedButton(
              color: Colors.white,
              elevation: 0,
              onPressed: () {
                setState(() {
                  currentPosition = 1;
                  colorsList[0] = Colors.grey;
                  colorsList[1] = Colors.blue;
                });
              },
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(Icons.message, color: colorsList[1], size: 30,),
                  Text("Message", style: TextStyle(color: colorsList[1]),)
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  final String content;

  NewPage(this.content);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(content),),
      body: Center(
        child: Text(content, style: TextStyle(color: Colors.red),),
      ),
    );
  }
}

不规则底部导航栏

// 创建一个浮动按钮并显示它的位置
floatingActionButton: FloatingActionButton(onPressed: (){},
elevation: 0,
tooltip: "长按我就提示",
child: Icon(Icons.add,color:Colors.white),),
// 设置FloatingButton的显示
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

效果

遇到的问题

• 页面切换回来后，发现页面被重置了

  body: pageList[currentPosition],
  // 修改为       
  body: IndexedStack(index: currentPosition,children: pageList,),