flutter底部導航欄

​​更多文章請檢視 lutter從入門 到精通​​

實作底部導航欄并點選切換頁面可簡述為有三種方式

• TabBar + TabBarView
• BottomNavigationBar + BottomNavigationBarItem
• 自定義 BottomAppBar

flutter BottomNavigationBar

• 一般來說，點選底部導航欄都是要進行頁面我們需要動态的改變一些狀态，是以，我們要繼承自StatefulWidget.
• bottomNavigationBar 是屬于 Scaffold 中的一個位于底部的控件。通常和 BottomNavigationBarItem 配合 開發底部導航欄。

1 基本構造方法說明

1.1 BottomNavigationBar構造方法

BottomNavigationBar({
    Key key,
    @required this.items,  
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.fixedColor,
    this.iconSize = 24.0,
  })

      

屬性	值類型	說明
items	BottomNavigationBarItem類型的List	底部導航欄的顯示項
onTap	ValueChanged < int >	點選導航欄子項時的回調
currentIndex	int	目前顯示項的下标
type	BottomNavigationBarType	底部導航欄的類型，有fixed和shifting兩個類型，顯示效果不一樣
fixedColor	Color	底部導航欄type為fixed時導航欄的顔色，如果為空的話預設使用ThemeData.primaryColor
iconSize	double	BottomNavigationBarItem icon的大小

1.2 BottomNavigationBarItem

底部導航欄要顯示的Item，有圖示和标題組成

BottomNavigationBarItem的構造方法

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  })

      

icon	Widget	要顯示的圖示控件，一般都是Iocn
title		要顯示的标題控件，一般都是Text
activeIcon		選中時要顯示的icon，一般也是Icon
backgroundColor		BottomNavigationBarType為shifting時的背景顔色

2 效果實作

import 'package:flutter/material.dart';

/**
 * 有狀态StatefulWidget
 *  繼承于 StatefulWidget，通過 State 的 build 方法去建構控件
 */
class BotomeMenumPage extends StatefulWidget {
  通過構造方法傳值
  BotomeMenumPage();

  //主要是負責建立state
  @override
  BotomeMenumPageState createState() => BotomeMenumPageState();
}

/**
 * 在 State 中,可以動态改變資料
 * 在 setState 之後，改變的資料會觸發 Widget 重新建構重新整理
 */
class BotomeMenumPageState extends State<BotomeMenumPage> {
  BotomeMenumPageState();

  @override
  void initState() {
    ///初始化，這個函數在生命周期中隻調用一次
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //建構頁面
    return buildBottomTabScaffold();
  }

  //目前顯示頁面的
  int currentIndex = 0;

  //底部導航欄顯示的内容
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      title: Text("首頁"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.blue[600],
      icon: Icon(Icons.format_indent_increase),
      title: Text("發現"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.blue[800],
      icon: Icon(Icons.message),
      title: Text("動态"),
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.blue[900],
      icon: Icon(Icons.person),
      title: Text("我的"),
    ),
  ];

  //點選導航項是要顯示的頁面
  final pages = [
    ChildItemView("首頁"),
    ChildItemView("發現"),
    ChildItemView("動态"),
    ChildItemView("我的")
  ];

  Widget buildBottomTabScaffold() {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        //是以一般都是使用fixed模式，此時，導航欄的圖示和标題顔色會使用fixedColor指定的顔色，
        // 如果沒有指定fixedColor，則使用預設的主題色primaryColor
        type: BottomNavigationBarType.fixed,
        //底部菜單點選回調
        onTap: (index) {
          _changePage(index);
        },
      ),
      //對應的頁面
      body: pages[currentIndex],
    );
  }

  /*切換頁面*/
  void _changePage(int index) {
    /*如果點選的導航項不是目前項  切換 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }
}

      

//子頁面
class ChildItemView extends StatefulWidget {
  String _title;

  ChildItemView(this._title);

  @override
  _ChildItemViewState createState() => _ChildItemViewState();
}

class _ChildItemViewState extends State<ChildItemView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text(widget._title)),
    );
  }
}