底部导航栏tabbar

Mr.Liu大约 4 分钟

底部导航栏tabbar

自定义底部导航栏

首先，bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合使用

属性

BottomNavigationBar 常见的属性

items：底部导航栏的显示项，
onTap：点击导航栏子项时的回调
currentIndex：当前显示项的下标
type：底部导航栏的类型，有fixed和shifting两个类型，显示效果不一样
fixedColor：底部导航栏type为fixed时导航栏的颜色，默认使用ThemeData.primaryColor
iconSize：BottomNavigationBarItem icon的大小
backgroundColor：BottomNavigationBar的背景颜色
selectedFontSize: 选中字体大小
selectedItemColor: 选中字体颜色
selectedIconTheme: 选中Icon的主题
selectedLabelStyle: 选中字体的样式
unselectedFontSize: 未选中字体大小
unselectedItemColor: 未选中字体颜色
unselectedIconTheme: 未选中Icon的主题
unselectedLabelStyle: 未选中字体的样式

BottomNavigationBarItem属性

icon：要显示的图标控件
title：要显示的标题控件
activeIcon：选中时要显示的icon
backgroundColor：背景颜色，BottomNavigationBarType为shifting时， BottomNavigationBar的背景颜色，会覆盖BottomNavigationBar.backgroundColor

新建文件

创建tabs文件夹来管理底部导航栏的几个页面，创建tabs.dart文件，来存放main.dat中剥离出来处理底部导航栏
在tabs文件夹下面创建首页home.dart，分类category.dart，设置settings.dart三个页面

main.dart代码如下

import 'package:flutter/material.dart';
import 'package:startkey/tabs/tabs.dart';//引入剥离出去对底部选项卡处理的文件
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),//这里把底部导航栏剥离出去成一个自定义有状态组件
    );
  }
}

tabs.dart代码如下

import 'package:flutter/material.dart';
import 'package:startkey/tabs/category.dart';
import 'package:startkey/tabs/home.dart';
import 'package:startkey/tabs/settings.dart';
class Tabs extends StatefulWidget {
  const Tabs({Key? key}) : super(key: key);

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex=0;//定义一个私有变量，控制切换选项卡
  // 定义控制选项卡切换内容
  List _PageList = [
    Home(), //引入文件中的首页方法
    Category(), //引入文件中的分类方法
    Settings(), //引入文件中的设置方法
  ];
  //各个页面标题
  List _PageTitle = ["首页","分类","设置"];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('${_PageTitle[_currentIndex]}'), //标题部分设置
        ),
        body: this._PageList[_currentIndex], //这里调用方法切换选项
        bottomNavigationBar: BottomNavigationBar(
          //底部导航栏配置
          currentIndex: this._currentIndex, //默认选中第几个
          onTap: (int index) {
            //点击选项触发的方法 里面有一个index属性
            setState(() {
              this._currentIndex = index; //改变状态，点击切换选中选项卡
            });
          },
          items: const [
            // 这里设置选项卡
            // 只能是BottomNavigationBarItem的类型
            BottomNavigationBarItem(
              icon: Icon(Icons.home), //图标
              label: "首页", //这里使用label title在1.19版本废弃了
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.category), //图标
              label: "分类", //这里使用label title在1.19版本废弃了
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings), //图标
              label: "设置", //这里使用label title在1.19版本废弃了
            ),
          ],
        ),
      ),
    );
  }
}

home.dart代码如下

import 'package:flutter/material.dart';
class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('我是首页页面'),
    );
  }
}

category.dart代码如下

import 'package:flutter/material.dart';
class Category extends StatelessWidget {
  const Category({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('我是分类页面'),
    );
  }
}

settings.dart代码如下

import 'package:flutter/material.dart';
class Settings extends StatelessWidget {
  const Settings({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('我是设置页面'),
    );
  }
}

结果如下

拦截登录配置tabbar

登录的时候在首页做一个拦截判断即可

import 'package:flutter/material.dart';
import 'package:startkey/pages/logon.dart';
import 'package:startkey/tabbar/index.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  //这里可根据本地缓存来处理操作
  final status = true;
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    //根据是否登录做跳转
    if(status){
      //调用tabbar配置页
      return MaterialApp(
        debugShowCheckedModeBanner: false, //配置模拟器右上角 debug是否显示
        home: Index(),
      );
    }else{
      //跳转登录
      return Logon();
    }
  }
}

封装的tabbar

//封装tabbar
import 'package:flutter/material.dart';
import 'package:startkey/tabbar/home.dart';
import 'package:startkey/tabbar/user.dart';
class Index extends StatefulWidget {
  const Index({Key? key}) : super(key: key);

  @override
  State<Index> createState() => _IndexState();
}

class _IndexState extends State<Index> {
  //定义一个私有变量，控制底部选项卡切换
  int _currentIndex = 0;
  //定义
  List _pageList = [
    Home(),//首页方法
    User()//我的页方法
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('标题'),//标题部分
        ),
        body: this._pageList[_currentIndex],//这里调用方法切换各个内容页面
        bottomNavigationBar: BottomNavigationBar(//底部导航栏配置
          currentIndex: this._currentIndex,//默认选中第几个
          onTap: (index){//点击选项触发的方法，里面有一个index方法
            setState((){
              this._currentIndex = index;//改变状态，点击切换选中选项卡
            });
          },
          //配置选项卡
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页'),
            BottomNavigationBarItem(icon: Icon(Icons.home),label: '我的'),
          ],
        ),
      ),
    );
  }
}