04-Flutter移動(dòng)電商實(shí)戰(zhàn)-打通底部導(dǎo)航欄

關(guān)于界面切換以及底欄的實(shí)現(xiàn)可參考之前寫(xiě)的一篇文章：
Flutter實(shí) ViewPager、bottomNavigationBar界面切換

1、新建4個(gè)基本dart文件

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

• home_page.dart :商城首頁(yè)UI頁(yè)面，首頁(yè)相關(guān)的UI我們都會(huì)放到這個(gè)文件里。
• category_page.dart: 商城分類(lèi)UI頁(yè)面，這個(gè)頁(yè)面會(huì)有復(fù)雜的動(dòng)態(tài)組件切換。
• cart_page.dart：商城購(gòu)物車(chē)UI頁(yè)面，這個(gè)頁(yè)面會(huì)包括購(gòu)物車(chē)的全套功能。
• member_page.dart：商城會(huì)員中心頁(yè)面，這個(gè)頁(yè)面我們會(huì)制作會(huì)員中心的全部UI效果。

其實(shí)這一部就是建立了底部導(dǎo)航欄需要的四個(gè)基本頁(yè)面，有了這四個(gè)基本頁(yè)面就可以制作底部tab的切換功能了。

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

import?'package:flutter/material.dart';class?HomePage?extends?StatelessWidget?{@overrideWidget?build(BuildContext?context)?{return?Scaffold(body:Center(child:?Text('商城首頁(yè)'),));} }

記得其他三個(gè)頁(yè)面都進(jìn)行復(fù)制，并修改類(lèi)名和Text文本屬性。

2、引入頁(yè)面并建立List

頁(yè)面創(chuàng)建好以后，要使用import引入到index_page.dart中,引入后才可以使用，如果不引入，VScode會(huì)很智能的報(bào)錯(cuò)。代碼如下。

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

引入后聲明一個(gè)List型變量，這個(gè)變量主要用于切換的，我們把頁(yè)面里的類(lèi)，放到了這個(gè)List中。

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

聲明兩個(gè)變量，并進(jìn)行initState初始化：

• currentIndex：int類(lèi)型，負(fù)責(zé)tabBodies的List索引，改變索引就相當(dāng)于改變了頁(yè)面。
• currentPage：利用currentIndex得到當(dāng)前選擇的頁(yè)面，并進(jìn)行呈現(xiàn)出來(lái)。
  代碼如下:

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

3、build方法的編寫(xiě)

build方法我們會(huì)返回一個(gè)Scaffold部件，在部件里我們會(huì)添加底部導(dǎo)航欄，并利用onTap事件(單擊事件),來(lái)改變導(dǎo)航欄的狀態(tài)和切換頁(yè)面。因?yàn)橛薪缑孀兓?#xff0c;所以這也是要使用動(dòng)態(tài)組件的原因。

??@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,這個(gè)是設(shè)置底部tab的樣式，它有兩種樣式fixed和shifting，只有超過(guò)3個(gè)才會(huì)有區(qū)別，國(guó)人的習(xí)慣一般是使用fixed的。感興趣的小伙伴可以自行折騰shifting模式。

這時(shí)候就可以啟動(dòng)虛擬機(jī)，進(jìn)行預(yù)覽了。為了更好的讓小伙伴們學(xué)習(xí)，在這里給出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('首頁(yè)')),BottomNavigationBarItem(icon:Icon(CupertinoIcons.search),title:Text('分類(lèi)')),BottomNavigationBarItem(icon:Icon(CupertinoIcons.shopping_cart),title:Text('購(gòu)物車(chē)')),BottomNavigationBarItem(icon:Icon(CupertinoIcons.profile_circled),title:Text('會(huì)員中心')),];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、總結(jié)

通過(guò)這節(jié)課的學(xué)習(xí)，應(yīng)該掌握如下知識(shí)點(diǎn)：

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。