Flutter中BottomNavigationBar 定义底部导航条

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，在Scaffold 组件中通过配置bottomNavigationBar来实现该功能。

常见的属性：

1. items 底部导航条按钮集合；

2. iconSize 图标大小；

3. currentIndex 默认选中Tab的下标；

4. fixedColor 选中Tab的颜色；

5. onTap 点击Tab时的回调函数；

6. type 按钮的显示类型。常用以下两种值：

(1). BottomNavigationBarType.fixed 固定效果；

(2). BottomNavigationBarType.shifting 动画效果；

利用BottomNavigationBar实现一个App的分页切换。

首先是入口文件 main.dart。

代码语言：javascript复制

import 'package:flutter/material.dart';

// 引入拆分的Tabs组件
import 'pages/Tabs.dart';

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

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Tabs(),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

以下是入口文件main.dart中引入的Tabs.dart。

代码语言：javascript复制

// lib/pages/Tabs.dart

import "package:flutter/material.dart";

// 引入子页面
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';


class Tabs extends StatefulWidget {
    Tabs({Key key}) : super(key: key);
    _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs>{

    // 当前选中标签的下标
    int _currentIndex = 0;
    // 当前页面数组
    List _pageList = [
        HomePage(),
        CategoryPage(),
        SettingPage()
    ];
    
    @override
    Widget build(BuildContext context) {
    return Container(
        child: Scaffold(
            // 导航条
            appBar:AppBar(title:Text('Flutter App')),
            // 主体
            body:this._pageList[this._currentIndex],
            // 底部导航条
            bottomNavigationBar: BottomNavigationBar(
                // 当前菜单下标
                currentIndex: this._currentIndex,
                // 点击事件,获取当前点击的标签下标
                onTap: (int index){
                    setState(() {
                       this._currentIndex=index;
                    });
                },
                // 图标大小
                iconSize: 30.0,
                // 选中图标的颜色
                fixedColor: Colors.red,
                // 配置底部可以有多个Tab标签页(5个时就需要)
                type: BottomNavigationBarType.fixed,
                items: [
                    // 只能是BottomNavigationBarItem的类型
                    BottomNavigationBarItem(
                        icon:Icon(Icons.home),
                        label:"首页"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.category),
                        label:"分类"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.settings),
                        label:"设置"
                    )
                ]
            ),
        ));
    }
}

Tabs.dart中引入的Home.dart。

代码语言：javascript复制

// lib/pages/tabs/Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    HomePage({Key key}) : super(key: key);
  	_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
    @override
    Widget build(BuildContext context) {
        return Container(
            child:Text("我是首页")
        );
    }
}

Tabs.dart中引入的Gategory.dart。

代码语言：javascript复制

// lib/pages/tabs/Category.dart

import "package:flutter/material.dart";

class CategoryPage extends StatefulWidget {
    CategoryPage({Key key}) : super(key: key);
    _CategoryPageState createState() => _CategoryPageState();
}

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

Tabs.dart中引入的Setting.dart。

代码语言：javascript复制

// lib/pages/tabs/Setting.dart

import "package:flutter/material.dart";

class SettingPage extends StatefulWidget {
    SettingPage({Key key}) : super(key: key);
    _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: Text("我是设置页面")
    );
  }

以下是效果图：

dart app fixed tabs

0 人点赞