一.復習上一節

• 有狀態組件寫法

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyButtonWidget();
  }
}

class MyButtonWidget extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
            child: Text("點擊增加條目"),
            onPressed: () {
              setState(() {
             
              });
            },
          );
  }
}

二. BottomNavigationBar底部導航條

• BottomNavigationBar 是底部導航條，可以讓我們定義底部Tab切換，BottomNavigationBar是Scaffold組件的參數

-常見屬性

• items :底部導航條按鈕集合 List<BottomNavigationBarItem>
• iconSize:icon尺寸
• currentIndex:默認選中第幾個
• onTap:選中變化的回調參數
• fixedColor:選中顏色
• type:配置底部tabs可以有多個 BottomNavigationBarType.fixed BottomNavigationBarType.shifting

• 代碼

import 'package:flutter/material.dart';

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

class MyContent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyContentWidget();
  }
}

class MyContentWidget extends State<MyContent> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("標題${currentIndex}")),
      body: HomePage(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              title: Text("首頁", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.list, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("守護", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.satellite, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("故事", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.account_balance, color: Colors.grey)),
        ],
      ),
    ));
  }
}

• 效果圖

  
  
  image.png

• 注意

items 數組中必須是指定類型 BottomNavigationBarItem

三.實現底部tab切換內容區域

1.在libs包下創建三個頁面，在flutter中頁面就是組件

• page頁面

import 'package:flutter/material.dart';

class MyPage1 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyButtonWidget();
  }
}

class MyButtonWidget extends State<MyPage1> {
  int count = 0;
  List list = new List();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      alignment: Alignment.center,
      child: Text("頁面1")
    );
  }
}

• 主頁面

import 'package:flutter/material.dart';

import 'main0.dart';
import 'main1.dart';
import 'main2.dart';

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

class MyContent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyContentWidget();
  }
}

class MyContentWidget extends State<MyContent> {
  int currentIndex = 0;
  List _listPage = [MyPage0(), MyPage1(), Mypage2()];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("標題${currentIndex}")),
      body: _listPage[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              title: Text("首頁", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.list, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("守護", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.satellite, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("故事", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.account_balance, color: Colors.grey)),
        ],
      ),
    ));
  }
}

• 效果圖

  
  
  tab切換.gif

• 注意

1.通過onTap回調 參數來獲取 listPage 中的頁面設置在body上
按鈕比較多時設置type 屬性
2.主頁面引用MyPage0、MyPage1、MyPage2 組件需要導入包
3.當底部tab過多時可以設置type 屬性BottomNavigationBarType.fixed
4.通過更新數據實現body內容切換，需要用到有狀態組件

四.總結

BottomNavigationBar 寫法

class MyContent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyContentWidget();
  }
}

class MyContentWidget extends State<MyContent> {
  int currentIndex = 0;
  List _listPage = [];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(title: ),
      body: _listPage[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [BottomNavigationBarItem()],
      ),
    ));
  }
}