[英]Flutter: How to change Tab's icon's color on SLIDE, not just on tap?
So, I have set up a TabBarView with its tabs containing an icon and text each.所以,我设置了一个 TabBarView,它的标签包含一个图标和文本。 The text seem to linearly change color as you switch between tabs by sliding.当您通过滑动在选项卡之间切换时,文本似乎会线性改变颜色。 How do you achieve this same effect for the icon as well?你如何为图标实现同样的效果? I managed to make it switch color ON TAP but it's not obeying the same rule when sliding.我设法让它在 TAP 上切换颜色,但在滑动时它不遵守相同的规则。
I have tried with tabController.index == 0
etc. Still not working.我尝试过tabController.index == 0
等。仍然无法正常工作。
Work With Tap
Or Sliding
Both :使用Tap
或Sliding
两者:
child: new TabBar(
indicatorColor: Colors.white,
unselectedLabelColor: Colors.grey, // for unselected
labelColor: Colors.white, // for selected
indicatorWeight: 5.0,
tabs: [
new Tab(
text: 'Unpaid'.toUpperCase(),
),
new Tab(
text: 'Draft'.toUpperCase(),
),
new Tab(
text: 'All'.toUpperCase(),
),
],
),
),
),
body: new TabBarView(
children: [
new first.UnpaidInvoicePage(),
new second.PaidInvoicePage(),
new third.AllInvoicePage(),
],
),
Please Try below code:请尝试以下代码:
======================================================================== ================================================== ======================
import 'package:flutter/material.dart';
void main() {
runApp(TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
unselectedLabelColor: Colors.amber, // UnSelected Tab Color
labelColor: Colors.black, // Selected Tab Color
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.