Flutter搭建底部導航

一、基礎知識介紹

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下載下傳位址：https://download.csdn.net/download/yoonerloop/19150600