04-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?{@overrideWidget?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;@overridevoid?initState()?{currentPage?=?tabBarList[currentIndex];super.initState();}

3、build方法的編寫

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

??@overrideWidget?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;@overridevoid?initState()?{currentPage?=?tabBarList[currentIndex];super.initState();}@overrideWidget?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部件的使用，最終作成底部切換效果。

posted @ 2019-06-14 20:45 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的04-Flutter移动电商实战-打通底部导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。