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

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

一、新建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文本屬性。

二、引入頁面並創建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();
  }

三、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
    );
  }
}

效果圖：

四、總結

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

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