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

1、cupertino_IOS風(fēng)格介紹

在Flutter里是有兩種內(nèi)置風(fēng)格的：

• material風(fēng)格： Material Design 是由 Google 推出的全新設(shè)計(jì)語言，這種設(shè)計(jì)語言是為手機(jī)、平板電腦、臺(tái)式機(jī)和其他平臺(tái)提供一致，更廣泛的外觀和感覺。我喜歡稱它為紙墨設(shè)計(jì)。Material Design 風(fēng)格是一種非常有質(zhì)感的設(shè)計(jì)風(fēng)格，并會(huì)提供一些默認(rèn)的交互動(dòng)畫。
• cupertino風(fēng)格：即 IOS 風(fēng)格組件，它重現(xiàn)了很多經(jīng)典的有 IOS 特性的交互和界面風(fēng)格，讓適用于 IOS 的人感覺親切和友好。

并非選擇了一種風(fēng)格，就要一直使用這種風(fēng)格，事實(shí)是你可以一起使用，兼顧兩個(gè)風(fēng)格的特點(diǎn)。

我們?cè)?index_page.dart 頁面同時(shí)使用兩種風(fēng)格 UI ，只需要在頭部分引入了 cupertino.dart、material.dart。注意這兩個(gè)引入是不分先后順序的。

index_page.dart 文件：

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

2、使用動(dòng)態(tài)StatefulWidget

上篇文章為了測(cè)試入口文件，我們?cè)?index_page.dart 文件里使用了靜態(tài)組件（也就是繼承了StatelessWidget）。

正常情況下，底部導(dǎo)航欄是要根據(jù)用戶操作不斷變化的，所以我們改用動(dòng)態(tài)組件（StatefulWidget）。

修改后的代碼如下:

import?'package:flutter/material.dart'; import?'package:flutter/cupertino.dart';class?IndexPage?extends?StatefulWidget?{@override_IndexPageState?createState()?=>?_IndexPageState(); }class?_IndexPageState?extends?State<IndexPage>?{@overrideWidget?build(BuildContext?context)?{return?new?Scaffold(appBar:?new?AppBar(title:?new?Text("百姓生活+"),),body:?new?Center(child:?Text("我是居中的文本內(nèi)容"),),);} }

改編后的界面效果并未發(fā)生改變，不截圖了。

3、底部欄

有了動(dòng)態(tài)組件，接下來可以在State部分先聲明一個(gè)List變量，變量名稱為boottomTabs，變量的屬性為BottomNavigationBarItem。

其實(shí)這個(gè)List變量就定義了底部導(dǎo)航的文字和使用的圖標(biāo)。

代碼如下:

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

底欄的數(shù)據(jù)有了，怎么使用呢？

修改后的 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('會(huì)員中心')),];@overrideWidget?build(BuildContext?context)?{return?new?Scaffold(appBar:?new?AppBar(title:?new?Text("百姓生活+"),),body:?new?Center(child:?Text("我是居中的文本內(nèi)容"),),bottomNavigationBar:?BottomNavigationBar(type:BottomNavigationBarType.fixed,currentIndex:?0,items:bottomTabs,onTap:?(index){},),);} }

效果圖：

下篇將打通4非底部導(dǎo)航欄，關(guān)于界面切換以及底欄的實(shí)現(xiàn)可參考之前寫的一篇文章：
Flutter實(shí) ViewPager、bottomNavigationBar界面切換

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

總結(jié)

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

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