新贵 Flutter(5) 底部导航栏

flutter

底部导航是现在移动应用的标配，Flutter 也提供了底部导航栏 Widget

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: ZiApp()));

class ZiApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: Colors.black87,
              ),
              title: Text("首页")),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.message,
                color: Colors.black87,
              ),
              title: Text("消息")),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.image,
                color: Colors.black87,
              ),
              title: Text("图片")),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.build,
                color: Colors.black87,
              ),
              title: Text("设置")),
        ],
      ),
    );
  }
}

• 在 Scoffold 页面的 bottomNavigationBar 添加底部导航 Widget BottomNavigationBar 在 items 接收一个 Widget 的数组，每一个元素都是 BottomNavigationBarItem 对象，可以 icon 属性配置图片和 title 配置文字。

图

现在只有选中的菜单才会显示文字，我们写可以通过修改 type 为 BottomNavigationBarType.fixed 来显示底部菜单的文字。

type: BottomNavigationBarType.fixed,

显示文字

添加事件

class ZiApp extends StatelessWidget {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: index,
        onTap: (int idx) {
          index = idx;
        },

• 定义一个变量 index = 0 默认为 0 表示开始位置，通过为 BottomNavigationBar 指定 currentIndex 为 index 表示当选中的菜单位置，然后添加 onTap 事件，事件回调函数中接收到一个表示位置的 index 。将idx 赋值给变量 index。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: ZiApp()));

class ZiApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ZiAppState();
  }
}

class _ZiAppState extends State<ZiApp> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: index,
        onTap: (int idx) {
          setState(() {
            index = idx;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: Colors.black87,
              ),
              title: Text(
                "首页",
                style: TextStyle(color: Colors.black87),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.message,
                color: Colors.black87,
              ),
              title: Text(
                "消息",
                style: TextStyle(color: Colors.black87),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.image,
                color: Colors.black87,
              ),
              title: Text(
                "图片",
                style: TextStyle(color: Colors.black87),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.build,
                color: Colors.black87,
              ),
              title: Text(
                "设置",
                style: TextStyle(color: Colors.black87),
              )),
        ],
      ),
    );
  }
}

切换图片

class _ZiAppState extends State<ZiApp> {
  int index = 0;
  List<Widget> pages = [
    Container(
      color: Colors.amber,
    ),
    Container(
      color: Colors.orange,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: index,
        onTap: (int idx) {
          setState(() {
            index = idx;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: Colors.black87,
              ),
              title: Text(
                "首页",
                style: TextStyle(color: Colors.black87),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.message,
                color: Colors.black87,
              ),
              title: Text(
                "消息",
                style: TextStyle(color: Colors.black87),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.image,
                color: Colors.black87,
              ),
              title: Text(
                "图片",
                style: TextStyle(color: Colors.black87),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.build,
                color: Colors.black87,
              ),
              title: Text(
                "设置",
                style: TextStyle(color: Colors.black87),
              )),
        ],
      ),
      body: pages[index],
    );
  }
}

• 指定一个 page 列表当我们切换 index 后，我们根据 index 变换来切换页面。