03-Flutter移動電商實戰-底部導航欄製做

一、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';

二、使用動態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("我是居中的文本內容"),
      ),
    );
  }
}

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

三、底部欄

有了動態組件，接下來能夠在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界面切換