博客

Flutter BottomNavigationBar 组件

BottomNavigationBar 常见的属性

使用过程中几点需要注意的：

1. BottomNavigationBar用在Scaffold组件下

2. 当底部导航页面超过三个时，必须要添加type属性（BottomNavigationBarType.fixed），否则的话底部导航会全白，看不到效果

3. items中是一个BottomNavigationBarItem的集合，里面包含图片及文字标签，在视频教程中给的文字使用的是title属性，我在使用时提示被弃用，用烂了替换title
   

4. currentIndex是BottomNavigationBar 中的属性，是为底部导航页面编的号，从零开始

5. 我们要改变页面时在onTap中获取点击页面的编号

onTap: (int index) {
            setState(() {
              currentIndex = index;
            });
          },

调用setState改变展示的页面
7. body中是我们展示的页面，我们将所有页面放在一个集合中，通过上一步中获取到的下标定位到指定页面

示例：

分类页面（Category.dart）

import 'package:flutter/material.dart';

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

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

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("这是分类页面"),
    );
  }
}

邮件页面（Email.dart）

import 'package:flutter/material.dart';

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

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

class _EmailPageState extends State<EmailPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("这是邮件页面"),
    );
  }
}

Home页面（Home.dart）

// ignore_for_file: prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const Text("我是首页组件");
  }
}

设置页面(Setting.dart)

// ignore_for_file: prefer_const_literals_to_create_immutables

import 'package:flutter/material.dart';

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

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

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          title: Text("我是设置页面"),
        )
      ],
    );
  }
}

整合导航栏的页面(Tabs.dart)

import 'package:flutter/material.dart';
import 'tabs/Category.dart';
import 'tabs/Email.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';

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

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

class _TabsState extends State<Tabs> {
  int currentIndex = 0;
  List _pageList = [HomePage(), CategoryPage(), SettingPage(), EmailPage()];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
        body: _pageList[currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: currentIndex,
          onTap: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "首页",
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.category), title: Text("分类")),
            BottomNavigationBarItem(icon: Icon(Icons.mail), title: Text("邮件")),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), title: Text("设置")),
          ],
        ),
      ),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

在main.dart中运行

// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables, avoid_print

import 'package:flutter/material.dart';
import 'pages/Tabs.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Tabs();
  }
}

文件结构及运行结果如下：