1. 自定义 BottomNavigationBarItem 的样式
class NavigationIconView {
final BottomNavigationBarItem item;
NavigationIconView(
{Key key, String title, Icon icon, Icon activeIcon})
: item = BottomNavigationBarItem(
icon: icon,
activeIcon: activeIcon,
title: Text(title,style: TextStyle(color: Colors.black),),
backgroundColor: Colors.white);
}
2.初始化需要的widget
@override
void initState() {
// TODO: implement initState
super.initState();
_navigationViews = [
NavigationIconView(
title: 'first',
icon: Icon(
Icons.home,
),
activeIcon: Icon(
Icons.home,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'next',
icon: Icon(
Icons.desktop_mac,
),
activeIcon: Icon(
Icons.desktop_mac,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'than',
icon: Icon(
Icons.history,
),
activeIcon: Icon(
Icons.history,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'final',
icon: Icon(
Icons.map,
),
activeIcon: Icon(
Icons.map,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'mine',
icon: Icon(
Icons.accessibility,
),
activeIcon: Icon(
Icons.accessibility,color: Colors.greenAccent,
),
),
];
_pageController = PageController(initialPage: _currentIndex);
_pages = [
HomeMessage(),
Container(color: Colors.brown),
Container(color: Colors.green),
Container(color: Colors.brown),
MinePage()
];
}
3. BottomNavigationBar属性设置
BottomNavigationBar botNavBar = BottomNavigationBar(
items: _navigationViews.map((NavigationIconView view){
return view.item;
}).toList(),
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index){
_currentIndex = index;
// 动画效果
_pageController.animateToPage(_currentIndex, duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
},);
4.简单demo
import 'package:flutter/material.dart';
class NavigationIconView {
final BottomNavigationBarItem item;
NavigationIconView(
{Key key, String title, Icon icon, Icon activeIcon})
: item = BottomNavigationBarItem(
icon: icon,
activeIcon: activeIcon,
title: Text(title,style: TextStyle(color: Colors.black),),
backgroundColor: Colors.white);
}
class home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return homeState();
}
}
class homeState extends State<home> {
PageController _pageController;
int _currentIndex = 0;
List<NavigationIconView> _navigationViews;
List<Widget> _pages;
@override
void initState() {
// TODO: implement initState
super.initState();
_navigationViews = [
NavigationIconView(
title: 'first',
icon: Icon(
Icons.home,
),
activeIcon: Icon(
Icons.home,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'next',
icon: Icon(
Icons.desktop_mac,
),
activeIcon: Icon(
Icons.desktop_mac,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'than',
icon: Icon(
Icons.history,
),
activeIcon: Icon(
Icons.history,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'final',
icon: Icon(
Icons.map,
),
activeIcon: Icon(
Icons.map,color: Colors.greenAccent,
),
),
NavigationIconView(
title: 'mine',
icon: Icon(
Icons.accessibility,
),
activeIcon: Icon(
Icons.accessibility,color: Colors.greenAccent,
),
),
];
_pageController = PageController(initialPage: _currentIndex);
_pages = [
Container(color: Colors.black),
Container(color: Colors.green),
Container(color: Colors.brown),
Container(color: Colors.green),
Container(color: Colors.white),
];
}
@override
Widget build(BuildContext context) {
BottomNavigationBar botNavBar = BottomNavigationBar(
items: _navigationViews.map((NavigationIconView view){
return view.item;
}).toList(),
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index){
_currentIndex = index;
_pageController.animateToPage(_currentIndex, duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
},);
// TODO: implement build
return Scaffold(
body: PageView.builder(
itemBuilder: (BuildContext context, int index) {
return _pages[index];
},
controller: _pageController,
itemCount: _pages.length,
onPageChanged: (int index) {
setState(() {
_currentIndex = index;
});
},
),
bottomNavigationBar: botNavBar,
);
}
}