Flutter | 使用BottomNavigationBar快速构建底部导航

平时我们在使用 app 时经常会看到底部导航栏,而在 flutter 中它的实现也较为简单.

需要用到的组件:

• BottomNavigationBar 导航栏的主体
• BottomNavigationBarItem 导航栏用到的条目

使用方法:

1. 为了使用导航栏,我们需要先创建一个 StatefulWidget来承载我们的导航栏

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  
  final String title;
  
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _currentIndex = 0;

  List<Widget> list = <Widget>[];

  @override
  void initState() {
    list
      ..add(const HomePage())
      ..add(const MePage());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items:  const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.shop_outlined), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

这里我们使用了 Scaffold 布局,它默认提供了一个 bottomNavigationBar 的属性,我们只需要把我们的导航栏赋值给它即可.

BottomNavigationBar 用于存放我们的导航条目,由于 items 是一个数组,所以必定会有一个值来存放当前的选中条目的索引, bottomNavigationBar 为我们提供了 currentIndex 属性,这里我们设置为_currentIndex,默认为0.

当用户点击不同条目,需要显示不同的页面,bottomNavigationBar 为我们提供了 onTap 方法,方便在用户点击后来修改当前选中的索引.这样当用户点击条目会,body中对应的组件便会更新.

这里我们定义了两个页面 HomePage 和 MePage.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(
          child: Text("首页"),
        ),
      ),
    );
  }
}

页面很简单,只有一个标题.

总结:

使用 BottomNavigationBar分为 步

1. 使用 Scaffold 布局并添加 bottomNavigationBar
2. 定义当前索引值变量 _currentIndex
3. 定义条目对应的视图,如上 HomePage并添加到 list 变量中放于 body 属性中用于展示.