我有带有图标和文本的 TabBar:
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelStyle: TextStyle(fontSize: 13.0),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: const Color(0xFF62A6E9)),
tabs: [
Tab(icon: SvgPicture.asset(
'assets/trending.svg',
color: const Color(0xFF71768D),
width: 15,
height: 15
), text: "Популярное"),
Tab(icon: SvgPicture.asset(
'assets/new.svg',
color: const Color(0xFF71768D),
width: 15,
height: 15
), text: "Новые"),
Tab(icon: SvgPicture.asset(
'assets/comingsoon.svg',
color: const Color(0xFF71768D),
width: 15,
height: 15
), text: "Ожидаемые"),
],
),
我需要更改选中的选项卡图标颜色,SvgPicture 具有填充图标的颜色属性
答案 0 :(得分:1)
您需要为您选择的选项卡提供一个 TabController 并根据 TabController 的索引,您可以更改颜色。
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = new TabController(vsync: this, length: 3);
_tabController.addListener(_handleTabSelection);
}
void _handleTabSelection() {
setState(() {
});
}
TabBar(
controller: _tabController,
labelColor: Colors.white,
unselectedLabelColor: Colors.grey,
labelStyle: TextStyle(fontSize: 13.0),
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50), // Creates border
color: const Color(0xFF62A6E9)),
tabs: [
Tab(icon: SvgPicture.asset(
'assets/trending.svg',
color: _tabController.index == 0
? Colors.black
: Color(0xFF71768D),
width: 15,
height: 15
), text: "Популярное"),
Tab(icon: SvgPicture.asset(
'assets/new.svg',
color: _tabController.index == 1
? Colors.black
: Color(0xFF71768D),
width: 15,
height: 15
), text: "Новые"),
Tab(icon: SvgPicture.asset(
'assets/comingsoon.svg',
color: _tabController.index == 2
? Colors.black
: Color(0xFF71768D),
width: 15,
height: 15
), text: "Ожидаемые"),
编辑:
请同时处理 TabController。
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
答案 1 :(得分:0)
第一件事你写'const'颜色,这意味着颜色属性不能改变,因为它是解决这个问题的常量:
创建颜色变量例如:
颜色 color1 = 颜色(0xFF71768D); // 对于第一个标签...等等
在 TabBar
上有一个属性调用 'onTap' 这将使用函数来在单击时更改选项卡的颜色.. 例如:
点击:(){ 设置状态((){ color1 = //新颜色 color2 = //新颜色 // 等等 }) }
答案 2 :(得分:0)
您可以使用 selectedItemColor 和 unselectedItemColor 属性,您将在此代码中找到它们 =>
class TabsScreen extends StatefulWidget {
@override
_TabsScreenState createState() => _TabsScreenState();
}
class _TabsScreenState extends State<TabsScreen> {
final BorderStyle borderStyle = BorderStyle.solid;
final List<Map<String, Object>> _pages = [
{'page': HomeView(), 'title': 'Doctors'},
{'page': MyCoursesView(), 'title': 'My Courses'}
];
int _selectedPageIndex = 0;
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
Future<void> showExitDialogConfirmation(
BuildContext context,) async {
await DialogManager.showExitDialog(context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(20),
),
),
title: Text(_pages[_selectedPageIndex]['title'],
style: TextStyle(
color: white,
fontWeight: FontWeight.w700,
fontFamily: "Roboto",
fontStyle: FontStyle.normal,
fontSize: 25)),
centerTitle: true,
actions: [
FlatButton(
onPressed: () async {
await showExitDialogConfirmation(context);
},
child: Icon(
Icons.logout, color: white,),
),
],
),
body: _pages[_selectedPageIndex]['page'],
bottomNavigationBar: Container(
decoration: BoxDecoration(
// color: Color(0xfff7f7f7),
border: Border.all(
color: mainGoldColor,
style: borderStyle,
width: 3.0,
),
borderRadius: BorderRadius.vertical(
top: Radius.circular(15.0),
),
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
),
child: BottomNavigationBar(
onTap: _selectPage,
backgroundColor: white,
unselectedItemColor: Colors.grey,
selectedItemColor: mainGreenColor,
currentIndex: _selectedPageIndex,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.person,
size: 25,
),
title: Text('Doctors',
style:
TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
),
BottomNavigationBarItem(
icon: Icon(
Icons.article,
size: 25,
),
title: Text(
'My Courses',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
),
);
}
}
答案 3 :(得分:0)