Flutter BottomNavigationBar组件(底部导航栏)

  • Post author:
  • Post category:其他

Flutter BottomNavigationBar 组件

BottomNavigationBar 常见的属性

属性名 说明
items List 底部导航条按钮集合(页面集合)
iconSize icon
currentIndex 默认选中第几个(页面)
onTap 选中变化回调函数(点击后专跳指定页面)
fixedColor 选中的颜色
type BottomNavigationBarType.fixed
BottomNavigationBarType.shifting

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

  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();
  }
}


文件结构及运行结果如下:
在这里插入图片描述


版权声明:本文为m0_46527751原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。