Flutter搭建TabBar

Posted 2021-05-21 一杯清泉

一、基础知识介绍

1、修改状态栏颜色

SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,  
      statusBarIconBrightness: Brightness.light);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

• statusBarColor: Colors.transparent：设置状态栏颜色透明，也可以设置的和AppBar的背景颜色一样。
• statusBarIconBrightness: Brightness.light：信号，时间、电量显示的图标的颜色，light白色，dark黑色。

2、修改标题栏

 appBar: 

•  title：标题
•  backgroundColor: 背景颜色
•  centerTitle：是否居中

3、Scaffold

• appBar：用于设置顶部的标题栏。
• body：显示Scaffold的主要内容。
• bottomNavigationBar：用于设置Scaffold的底部导航栏，
• drawer：用于设置抽屉效果。
• floatingActionButton：用于设置位于右下角的按钮。

4、actions

• IconButton：设置一个按钮、
• PopupMenuButton：设置下拉选项

appBar: AppBar(
	actions: <Widget>[
	  PopupMenuButton(
	      itemBuilder: (context) => [
	        PopupMenuItem(child: Text('微信')),
	        PopupMenuItem(child: Text('QQ')),
	        PopupMenuItem(child: Text('盆友圈')),
	      ] ,
	  ),
	  IconButton(
	    icon: Icon(Icons.add),
	    tooltip: '微信',
	    onPressed: () {
	      Fluttertoast.showToast(msg: '点击了');
	    },
	  ),
	],
),

4、StatelessWidget和StatefulWidget

• StatelessWidget：无状态的
• StatefulWidget：有状态的

5、底部导航

bottomNavigationBar

• items：BottomNavigationBarItem类型的List    底部导航栏的显示项
• onTap : onChanged < int >    点击导航栏子项时的回调
• currentIndex：当前显示项的下标
• type ： 底部导航栏的类型，有BottomNavigationBarType.fixed和BottomNavigationBarType.shifting两个类型，显示效果不一样
• fixedColor：底部导航栏type为fixed时导航栏的颜色，如果为空的话默认使用ThemeData.primaryColor
• iconSize：BottomNavigationBarItem icon的大小

items——>BottomNavigationBarItem

• icon：要显示的图标控件，一般都是Iocn
• title ： 要显示的标题控件，一般都是Text
• activeIcon：选中时要显示的icon，一般也是Icon
• backgroundColor：BottomNavigationBarType为shifting时的背景颜色

  bottomNavigationBar: BottomNavigationBar(
    items: getTabList(),
    selectedItemColor: Colors.blue,
    unselectedItemColor: Colors.grey,
    currentIndex: currentIndex,
    showSelectedLabels: true,
    type: BottomNavigationBarType.fixed,
    backgroundColor: Colors.grey[100],
    onTap: (index) {
      setState(() {
        this.currentIndex = index;
      });
    },
  ),
  body: tabPage[currentIndex],

二、基础知识介绍

1、main

void main() {
  runApp(MyApp());
  //状态栏颜色透明，即显示的主题颜色，也可以设置和主题颜色一致
  SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark);
  SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}

2、MyApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primaryColor: Colors.blue, primarySwatch: Colors.blue),
        home: MyHome());
  }
}

3、MyHome

class MyHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHome();
  }
}

4、_MyHome

class _MyHome extends State<MyHome> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(tabBarList[currentIndex].title),
        centerTitle: true,
        backgroundColor: Colors.blue,
        actions: <Widget>[
          PopupMenuButton(
            itemBuilder: (context) => [
              PopupMenuItem(child: Text('微信')),
              PopupMenuItem(child: Text('QQ')),
              PopupMenuItem(child: Text('盆友圈')),
            ],
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: getTabList(),
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        currentIndex: currentIndex,
        showSelectedLabels: true,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.grey[100],
        onTap: (index) {
          setState(() {
            this.currentIndex = index;
          });
        },
      ),
      body: tabPage[currentIndex],
    );
  }
}

5、其他

List tabBarList = [
  TitleBar('首页', Icons.home),
  TitleBar('问答', Icons.question_answer),
  TitleBar('体系', Icons.auto_awesome_mosaic),
  TitleBar('我的', Icons.person_outline),
];

List<BottomNavigationBarItem> getTabList() {
  List<BottomNavigationBarItem> list = [];
  for (int i = 0; i < tabBarList.length; i++) {
    list.add(BottomNavigationBarItem(
      title: Text(tabBarList[i].title, style: TextStyle(fontSize: 12)),
      icon: Icon(tabBarList[i].icon),
    ));
  }
  return list;
}

List<Widget> tabPage = [Home(), Question(), System(), Me()];

class TitleBar {
  
  String title;
  IconData icon;

  TitleBar(this.title, this.icon);
}

6、页面page

以home为例：

import 'package:flutter/material.dart';

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text('s首页'),
    );
  }
}

三、其他Tab实现的案例

https://www.jianshu.com/p/3bf61b805d11

Demo下载地址：