Flutter移動電商實戰-底部導航欄制作

1、cupertino_IOS風格介紹

在Flutter里是有兩種內置風格的：

• material風格： Material Design 是由 Google 推出的全新設計語言，這種設計語言是為手機、平板電腦、台式機和其他平台提供一致，更廣泛的外觀和感覺。我喜歡稱它為紙墨設計。Material Design 風格是一種非常有質感的設計風格，並會提供一些默認的交互動畫。
• cupertino風格：即 IOS 風格組件，它重現了很多經典的有 IOS 特性的交互和界面風格，讓適用於 IOS 的人感覺親切和友好。

並非選擇了一種風格，就要一直使用這種風格，事實是你可以一起使用，兼顧兩個風格的特點。

我們在 index_page.dart 頁面同時使用兩種風格 UI ，只需要在頭部分引入了 cupertino.dart、material.dart。注意這兩個引入是不分先后順序的。

index_page.dart 文件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

2、使用動態StatefulWidget

上篇文章為了測試入口文件，我們在 index_page.dart 文件里使用了靜態組件（也就是繼承了StatelessWidget）。

正常情況下，底部導航欄是要根據用戶操作不斷變化的，所以我們改用動態組件（StatefulWidget）。

修改后的代碼如下:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

class _IndexPageState extends State<IndexPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("百姓生活+"),),
      body: new Center(
        child: Text("我是居中的文本內容"),
      ),
    );
  }
}

改編后的界面效果並未發生改變，不截圖了。

3、底部欄

有了動態組件，接下來可以在State部分先聲明一個List變量，變量名稱為boottomTabs，變量的屬性為BottomNavigationBarItem。

其實這個List變量就定義了底部導航的文字和使用的圖標。

代碼如下:

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('會員中心')
    ),
  ];

底欄的數據有了，怎么使用呢？

修改后的 index_page.dart 文件：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

class _IndexPageState extends State<IndexPage> {

  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('會員中心')
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("百姓生活+"),),
      body: new Center(
        child: Text("我是居中的文本內容"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type:BottomNavigationBarType.fixed,
        currentIndex: 0,
        items:bottomTabs,
        onTap: (index){

        },
      ),
    );
  }
}

效果圖：

下篇將打通4非底部導航欄，關於界面切換以及底欄的實現可參考之前寫的一篇文章：
Flutter實 ViewPager、bottomNavigationBar界面切換