效果:
import 'package:flutter/material.dart';
class CYBottomBarItem extends BottomNavigationBarItem{
CYBottomBarItem(String title,String icon) : super(
title:Text(title),
icon:Image(image: AssetImage("assets/images/$icon.png")),
// Image.asset,width: 32,color: Colors.green,),
activeIcon:Image.asset("assets/images/$icon.png",color: Colors.red,),
);
}
List<CYBottomBarItem> bottomBarItems = [
CYBottomBarItem("PETS", "home"),
CYBottomBarItem("社区", "community"),
CYBottomBarItem("商铺", "home"),
CYBottomBarItem("我的","home")
];
List<Widget> bottomPages = [
CAYJHomePage(),
CAYJCommunityPage(),
CAYJShopPage(),
CAYJUserPage()
];
使用:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
splashColor: Colors.transparent,
visualDensity: VisualDensity.adaptivePlatformDensity,
highlightColor: Colors.transparent//去除点击tabbar的过度效果
),
home: APPHomePage(),
);
}
}
class APPHomePage extends StatefulWidget {
@override
_APPHomePageState createState() => _APPHomePageState();
}
class _APPHomePageState extends State<APPHomePage> {
int _currentSelected = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _currentSelected,
children: bottomPages,
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentSelected,
type: BottomNavigationBarType.fixed,
items: bottomBarItems,
selectedFontSize: 14,//选中文字大小
unselectedFontSize: 14,//非选中文字大小
// selectedItemColor: Colors.blue,
// unselectedItemColor: Colors.green,
onTap: (index){
setState(() {
_currentSelected = index;
});
},
),
);
}
}
网友评论