flutter 自帶的tabbar BottomNavigationBar有長按水波紋效果,不可以添加背景圖片功能,如果有這方面的需求,就需要自定義tabbar了
自定義圖片 我們使用BottomAppBar 設定寬高,內部的UI就可以完全自定義 測試了一下,基本能達到想要的效果
廢話不多了,直接上代碼了
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來實現頁面的持久保存,細節參考