/*
* BottomNavigationBarItem的一些屬性
? ? ? ? ? * const BottomNavigationBarItem({
? ? ? ? ? * 圖標(biāo)
? ? ? ? ? @required this.icon,
? ? ? ? ? this.title,//標(biāo)題
? ? ? ? ? Widget activeIcon,//被選中時的Icon
? ? ? ? ? ?this.backgroundColor,//背景顏色
? ? ? ? ? ? })
?* */

實現(xiàn)核心代碼:

bottomNavigationBar: BottomNavigationBar(
? ? ? ? /// items: List<BottomNavigationBarItem> : 表示需要顯示的底控件個數(shù)
? ? ? ? items: [
? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? /// 設(shè)置Icon: _selectedIndex 如果選中的是當(dāng)前item icon和文字都需要還
? ? ? ? ? ? ? icon: Image.asset(_selectedIndex == 0
? ? ? ? ? ? ? ? ? ? image_pressed[0]
? ? ? ? ? ? ? ? ? : image_normal[0],
? ? ? ? ? ? ? ? ? ///設(shè)置圖片的寬度和高度 ? 有些圖片很大,防止圖片過大
? ? ? ? ? ? ? ? width: 32.0,
? ? ? ? ? ? ? ? height: 32.0,
? ? ? ? ? ? ? ),
? ? ? ? ? ? ? title: Text(
? ? ? ? ? ? ? ? titles[0],
? ? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? color: _selectedIndex == 0
? ? ? ? ? ? ? ? ? ? ? ? Color(0xFF46c01b)
? ? ? ? ? ? ? ? ? ? ? : Color(0xff999999)
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ),
? ? ? ? ? ),

? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Image.asset(_selectedIndex == 1
? ? ? ? ? ? ? ? ? image_pressed[1]
? ? ? ? ? ? ? ? : image_normal[1],
? ? ? ? ? ? ? width: 32.0,
? ? ? ? ? ? ? height: 32.0,
? ? ? ? ? ? ),
? ? ? ? ? ? title: Text(
? ? ? ? ? ? ? titles[1],
? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? color: _selectedIndex == 1
? ? ? ? ? ? ? ? ? ? ? ? Color(0xFF46c01b)
? ? ? ? ? ? ? ? ? ? ? : Color(0xff999999)
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ),

? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Image.asset(_selectedIndex == 2
? ? ? ? ? ? ? ? ? image_pressed[2]
? ? ? ? ? ? ? ? : image_normal[2],
? ? ? ? ? ? ? width: 32.0,
? ? ? ? ? ? ? height: 32.0,
? ? ? ? ? ? ),
? ? ? ? ? ? title: Text(
? ? ? ? ? ? ? titles[2],
? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? color: _selectedIndex == 2
? ? ? ? ? ? ? ? ? ? ? ? Color(0xFF46c01b)
? ? ? ? ? ? ? ? ? ? ? : Color(0xff999999)
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ),

? ? ? ? ? BottomNavigationBarItem(
? ? ? ? ? ? icon: Image.asset(_selectedIndex == 3
? ? ? ? ? ? ? ? ? image_pressed[3]
? ? ? ? ? ? ? ? : image_normal[3],
? ? ? ? ? ? ? width: 32.0,
? ? ? ? ? ? ? height: 32.0,
? ? ? ? ? ? ),
? ? ? ? ? ? title: Text(
? ? ? ? ? ? ? titles[3],
? ? ? ? ? ? ? style: TextStyle(
? ? ? ? ? ? ? ? ? color: _selectedIndex == 3
? ? ? ? ? ? ? ? ? ? ? ? Color(0xFF46c01b)
? ? ? ? ? ? ? ? ? ? ? : Color(0xff999999)
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ],
? ? ? ? //代表BottomNavigationBar 中當(dāng)前選中的是下表是_selectedIndex的BottomNavigationBarItem控件
? ? ? ? currentIndex: _selectedIndex,
? ? ? ? /// 類型 充滿(填充方式)
? ? ? ? type: BottomNavigationBarType.fixed,
? ? ? ? /// 當(dāng)你點擊其中的BottomNavigationBarItem的時候,會調(diào)用這個方法
? ? ? ? onTap: (index){
// ? ? ? ? ?print('你點擊了哪個按鈕 $index');
? ? ? ? ? //刷新狀態(tài)
? ? ? ? ? setState(() {
? ? ? ? ? ? /// 在點擊方法中改變 選中下標(biāo)
? ? ? ? ? ? _selectedIndex = index;
? ? ? ? ? });
? ? ? ? },
? ? ? ),

Scaffold + Appbar + Tabbar + PageView 來組合實現(xiàn)效果實現(xiàn)頂部底部導(dǎo)航欄效果(目前不知道怎么實現(xiàn)這個點擊變換圖片和文字的顏色)

核心代碼:

@override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? ///頂部TABBar的模式
? ? if (this._type == GYTabBarWidget.TOP_TAB) {
? ? ? return Scaffold(
? ? ? ? ///設(shè)置側(cè)邊滑出 drawer, 不需要的可以不設(shè)置 drawer: Scaffold存在的側(cè)滑屬性
? ? ? ? drawer: _drawer,

? ? ? ? /// 設(shè)置懸浮按鈕,不需要的可以不設(shè)置
? ? ? ? floatingActionButton: _floatingActionButton,

? ? ? ? /// 標(biāo)題欄
? ? ? ? appBar: AppBar(
? ? ? ? ? title: _title,
? ? ? ? ? backgroundColor: _backgroundColor,

? ? ? ? ? /// 設(shè)置tabBar空件
? ? ? ? ? bottom: TabBar(
? ? ? ? ? ? ///頂部模式下 ?tabBar可以滑動的模式
? ? ? ? ? ? isScrollable: true, //這個屬性設(shè)置 頂部tabBar是否可以滑動 如果不可以 就全部不顯示在一個屏內(nèi),如果數(shù)量多可能看不見文字
? ? ? ? ? ? ///設(shè)置Controller屬性 ?必須要有控制器 雨pageView的控制器同步
? ? ? ? ? ? controller: _tabController,//該導(dǎo)航欄中的 tabBar 設(shè)置一個控制器

? ? ? ? ? ? /// 每一個tab item 是一個List<Widget>
? ? ? ? ? ? tabs: _tabItems,//設(shè)置需要現(xiàn)實的 Items

? ? ? ? ? ? ///tab底部選中顏色
? ? ? ? ? ? indicatorColor: _indicatorColor,
? ? ? ? ? ),
? ? ? ? ),


? ? ? ? //TabBarView ?必須要配合TabController來使用 ? 這個TabBar和PageView 組合來實現(xiàn)這個頂部導(dǎo)航欄的效果
? ? ? ? //設(shè)置頁面主題 pageView 用于承載Tab對應(yīng)的頁面
? ? ? ? body: PageView( //pageView
? ? ? ? ? /// 必須要有控制器 與TabBar的控制器同步
? ? ? ? ? controller: _pageController,

? ? ? ? ? ///每一個 tab 對應(yīng)的頁面主體，是一個List<Widget>
? ? ? ? ? children: _tabViews,
? ? ? ? ? ///頁面觸摸作用滑動回調(diào)，用于同步tab選中狀態(tài)
? ? ? ? ? onPageChanged: (index) {
? ? ? ? ? ? _tabController.animateTo(index);
? ? ? ? ? },
? ? ? ? ),
? ? ? );
? ? }

? ? ///底部TAbBar模式
? ? return new Scaffold(
? ? ? ///設(shè)置側(cè)邊滑出 drawer，不需要可以不設(shè)置
? ? ? ? drawer: _drawer,
? ? ? ? ///設(shè)置懸浮按鍵，不需要可以不設(shè)置
? ? ? ? floatingActionButton: _floatingActionButton,
? ? ? ? ///標(biāo)題欄
? ? ? ? appBar: new AppBar(
? ? ? ? ? backgroundColor: _backgroundColor,
? ? ? ? ? title: _title,
? ? ? ? ),
? ? ? ? ///頁面主體，PageView，用于承載Tab對應(yīng)的頁面
? ? ? ? body: new PageView(
? ? ? ? ? ///必須有的控制器，與tabBar的控制器同步
? ? ? ? ? controller: _pageController,
? ? ? ? ? ///每一個 tab 對應(yīng)的頁面主體，是一個List<Widget>
? ? ? ? ? children: _tabViews,
? ? ? ? ? onPageChanged: (index) {
? ? ? ? ? ? ///頁面觸摸作用滑動回調(diào)，用于同步tab選中狀態(tài)
? ? ? ? ? ? _tabController.animateTo(index);
? ? ? ? ? },
? ? ? ? ),
? ? ? ? ///底部導(dǎo)航欄，也就是tab欄 ?bottomNavigationBar: Scaffold控件中底部導(dǎo)航欄屬性
? ? ? ? bottomNavigationBar: new Material(
? ? ? ? ? color: _backgroundColor,
? ? ? ? ? ///tabBar控件
? ? ? ? ? child: new TabBar(
? ? ? ? ? ? ///必須有的控制器，與pageView的控制器同步
? ? ? ? ? ? controller: _tabController,
? ? ? ? ? ? ///每一個tab item，是一個List<Widget>
? ? ? ? ? ? tabs: _tabItems,
? ? ? ? ? ? ///tab底部選中條顏色
? ? ? ? ? ? indicatorColor: _indicatorColor,
? ? ? ? ? ),
? ? ? ? ));


? }
}

上述代碼注意:

1.要創(chuàng)建TabController 和PageController 來監(jiān)聽 tabbar和PageView的一些滑動和同步操作

2.切換時需要動畫必須要通過 with SingleTickerProviderStateMixin 實現(xiàn)動畫效果。

3.當(dāng)你切換每個頁面的時候,發(fā)現(xiàn)每次都會重新調(diào)用initState()方法來初始化你的頁面,解決方法:
讓每個子頁面

class _TabBarPageFirstState extends State<TabBarPageFirst> with AutomaticKeepAliveClientMixin {
//然后在其中實現(xiàn)這個方法 你就會發(fā)現(xiàn)你的子頁面不會每次切換時都會重新加載構(gòu)建
@override
? bool get wantKeepAlive => true;
}

Scaffold + Appbar + Tabbar + TabBarView 來實現(xiàn)頂部導(dǎo)航欄(目前還不知道點擊怎么變化圖片和文字顏色)

class GYTopTabBarController extends StatelessWidget {

? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? /// 這里需要使用DefaultTabController來包裹 ,如果沒有包裹則使用TabBarView
? ? /// 會報錯
? ? return DefaultTabController(
? ? ? length: 8,
? ? ? child: Scaffold(
? ? ? ? appBar: AppBar(
? ? ? ? ? title: Text('DefaultTabBarController'),

? ? ? ? ? bottom: TabBar(
? ? ? ? ? ? isScrollable: true,
? ? ? ? ? ? tabs: <Widget>[
? ??? ??? ??? ?/// 這里可以使用Tab控件 來時先圖標(biāo)和文字的效果
? ??? ??? ??? ?/* Tab: const Tab({
? ??? ? Key key,
? ? this.text,
? ? this.icon,
? ? this.child,
? })*/
? /// Tab(icon : , title: ),
? ? ? ? ? ? ? Text('111'),
? ? ? ? ? ? ? Text('222'),
? ? ? ? ? ? ? Text('333'),
? ? ? ? ? ? ? Text('444'),
? ? ? ? ? ? ? Text('555'),
? ? ? ? ? ? ? Text('666'),
? ? ? ? ? ? ? Text('777'),
? ? ? ? ? ? ? Text('888'),
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
?? ??? ??? ?
? ? ? ? body: TabBarView(
? ? ? ? ? children: <Widget>[
? ? ? ? ? ? TabBarPageFirst(),
? ? ? ? ? ? TabBarPageSecond(),
? ? ? ? ? ? TabBarPageThree(),
? ? ? ? ? ? TabBarPageFour(),
? ? ? ? ? ? TabBarPageFirst(),
? ? ? ? ? ? TabBarPageSecond(),
? ? ? ? ? ? TabBarPageThree(),
? ? ? ? ? ? TabBarPageFour(),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: