Flutter移動電商實戰-打通底部導航欄

關於界面切換以及底欄的實現可參考之前寫的一篇文章：
Flutter實 ViewPager、bottomNavigationBar界面切換

1、新建4個基本dart文件

在pages目錄下，我們新建下面四個dart文件。

• home_page.dart :商城首頁UI頁面，首頁相關的UI我們都會放到這個文件里。
• category_page.dart: 商城分類UI頁面，這個頁面會有復雜的動態組件切換。
• cart_page.dart：商城購物車UI頁面，這個頁面會包括購物車的全套功能。
• member_page.dart：商城會員中心頁面，這個頁面我們會制作會員中心的全部UI效果。

其實這一部就是建立了底部導航欄需要的四個基本頁面，有了這四個基本頁面就可以制作底部tab的切換功能了。

這里我只給一個頁面（home_page.dart）的基礎代碼（后期這些代碼都要更換，這里只是為了看到效果使用），然后你可以暗裝一個的代碼，復制到其它頁面，進行修改。

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Text('商城首頁'),
      )
    );
  }
}

記得其他三個頁面都進行復制，並修改類名和Text文本屬性。

2、引入頁面並建立List

頁面創建好以后，要使用import引入到index_page.dart中,引入后才可以使用，如果不引入，VScode會很智能的報錯。代碼如下。

import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';

引入后聲明一個List型變量，這個變量主要用於切換的，我們把頁面里的類，放到了這個List中。

 List tabBarList = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];

聲明兩個變量，並進行initState初始化：

• currentIndex：int類型，負責tabBodies的List索引，改變索引就相當於改變了頁面。
• currentPage：利用currentIndex得到當前選擇的頁面，並進行呈現出來。
  代碼如下:

  int currentIndex = 0;
  var currentPage;
  @override
  void initState() {
    currentPage = tabBarList[currentIndex];
    super.initState();
  }

3、build方法的編寫

build方法我們會返回一個Scaffold部件，在部件里我們會添加底部導航欄，並利用onTap事件(單擊事件),來改變導航欄的狀態和切換頁面。因為有界面變化，所以這也是要使用動態組件的原因。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items:bottomTabs,
        onTap: (index){
          setState(() {
           currentIndex = index;
           currentPage = tabBodies[currentIndex]; 
          });
        },
      ),
      body:currentPage
    );
  }

這里有句代碼type:BottomNavigationBarType.fixed,這個是設置底部tab的樣式，它有兩種樣式fixed和shifting，只有超過3個才會有區別，國人的習慣一般是使用fixed的。感興趣的小伙伴可以自行折騰shifting模式。

這時候就可以啟動虛擬機，進行預覽了。為了更好的讓小伙伴們學習，在這里給出index_page.dart文件的源碼。

index_page.dart文件：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {

  /** tab分組 **/
  List tabBarList = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];

  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.home),
        title:Text('首頁')
    ),
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.search),
        title:Text('分類')
    ),
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.shopping_cart),
        title:Text('購物車')
    ),
    BottomNavigationBarItem(
        icon:Icon(CupertinoIcons.profile_circled),
        title:Text('會員中心')
    ),
  ];

  int currentIndex = 0;
  var currentPage;
  @override
  void initState() {
    currentPage = tabBarList[currentIndex];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
        bottomNavigationBar: BottomNavigationBar(
          type:BottomNavigationBarType.fixed,
          currentIndex: currentIndex,
          items:bottomTabs,
          onTap: (index){
            setState(() {
              currentIndex = index;
              currentPage = tabBarList[currentIndex];
            });
          },
        ),
        body:currentPage
    );
  }
}

效果圖：

4、總結

通過這節課的學習，應該掌握如下知識點：

• 頁面切換的技巧和變量如何定義。
• BottomNavigationBar部件的使用，最終作成底部切換效果。