flutter 自帶的tabbar BottomNavigationBar有長按水波紋效果,不能夠添加背景圖片功能,若是有這方面的需求,就須要自定義tabbar了html
自定義圖片 咱們使用BottomAppBar 設定寬高,內部的UI就能夠徹底自定義 測試了一下,基本能達到想要的效果 android
廢話很少了,直接上代碼了ide
import 'package:flutter/material.dart'; import 'home.dart'; import 'category.dart'; import 'activity.dart'; import 'mine.dart'; class TabbarPage extends StatefulWidget { @override _TabbarPageState createState() => _TabbarPageState(); } class _TabbarPageState extends State<TabbarPage> { PageController _pageController; List images = [ ['assets/tab_icon_home.png', 'assets/tab_icon_home_selected.png'], ['assets/tab_icon_category.png', 'assets/tab_icon_category_selected.png'], ['assets/tab_icon_collect.png', 'assets/tab_icon_collect_selected.png'], ['assets/tab_icon_profile.png', 'assets/tab_icon_profile_selected.png'], ]; final List _titles = ['首頁', '好物', '雙11', '個人']; final List<Widget> _tabBodies = [ HomePage(), CategoryPage(), ActivityPage(), MinePage(), ]; int _currentIndex = 0; void initState() { super.initState(); this._pageController =PageController(initialPage: _currentIndex, keepPage: true); } @override Widget build(BuildContext context) { return Scaffold( // body: IndexedStack( // index: _currentIndex, // children: _tabBodies, // ), body: PageView( children: _tabBodies, controller: _pageController, // physics: NeverScrollableScrollPhysics(), ), // bottomNavigationBar: BottomNavigationBar( // backgroundColor: Colors.brown, // type: BottomNavigationBarType.fixed, // currentIndex: _currentIndex, // items: getItems(), // onTap: (index) { // setState(() { // _currentIndex = index; // // _pageController.jumpToPage(index); // }); // }, // ), bottomNavigationBar: _bottomAppBar(), ); } BottomAppBar _bottomAppBar() { double width = MediaQuery.of(context).size.width; double height = 60; return BottomAppBar( child: Container( //設置背景 decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, repeat: ImageRepeat.noRepeat, image: AssetImage('assets/tab_festival_background_android.png'), ), ), width: width, height: height, child: Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: _customItems(), ), ), ); } /*獲取tab圖片*/ Widget getTabIcon(int index) { if (_currentIndex == index) { return Image.asset( images[index][1], width: 30, fit: BoxFit.fitHeight, ); } return Image.asset(images[index][0], width: 30, fit: BoxFit.fitHeight); } /*獲取tab文字*/ Text getTabText(int index) { if (_currentIndex == index) { return Text( _titles[index], style: TextStyle(color: Color(0xFFEA164B), fontSize: 11), ); } return Text( _titles[index], style: TextStyle(color: Color(0xFF8228CF), fontSize: 11), ); } /*獲取tabbatItem*/ List<BottomNavigationBarItem> getItems() { return [ BottomNavigationBarItem( icon: getTabIcon(0), title: getTabText(0), ), BottomNavigationBarItem(icon: getTabIcon(1), title: getTabText(1)), BottomNavigationBarItem(icon: getTabIcon(2), title: getTabText(2)), BottomNavigationBarItem(icon: getTabIcon(3), title: getTabText(3)), ]; } List<Widget> _customItems() { double width = MediaQuery.of(context).size.width; //均分紅4分 double itemWidth = width / 4.0; return images.map((img) { int index = images.indexOf(img); return GestureDetector( onTap: () { setState(() { _currentIndex = index; _pageController.jumpToPage(index); }); }, child: Container( color: Colors.transparent, width: itemWidth * 0.8, child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ getTabIcon(index), getTabText(index), ], ), ), ); }).toList(); } }
tabbar中經過pageView來實現頁面的持久保存,細節參考測試