选择标签时,我正在尝试更改标签图标的颜色。我知道如何更改图标的颜色,但是当我选择选项卡时,我不知道如何更改颜色。
我的代码:
child: AppBar(
bottom: TabBar(
tabs: <Tab>[
Tab(
child: new Row(
children: <Widget>[
new Text("Select", textAlign: TextAlign.start),
new SizedBox(
width: 24.0,
),
new Icon(
Icons.arrow_drop_down,
color: Colors.blue.shade400,
),
],
....
)
)
]
)
)
最佳答案
要更改所选标签的颜色,只需将其添加到TabBar即可:
labelColor: Colors.
unselectedLabelColor: Colors.white,
完整代码:
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
labelColor: Colors.deepOrange,
unselectedLabelColor: Colors.white,
tabs: <Tab>[
Tab(
child: Row(
children: <Widget>[
Text("Select", textAlign: TextAlign.start),
SizedBox(
width: 24.0,
),
Icon(
Icons.arrow_drop_down,
color: Colors.blue.shade400,
),
],
),
),
Tab(
child: Row(
children: <Widget>[
Text("Select", textAlign: TextAlign.start),
SizedBox(
width: 24.0,
),
Icon(
Icons.arrow_drop_down,
color: Colors.blue.shade400,
),
],
),
),
],
),
),
body: Center(
child: Container(
child: Text("This is a page blahblah"),
),
),
),
)
编辑:
如果您只想更改图标的颜色,则将颜色添加到“文本”,然后从“选项卡”中的“图标”中的“代码”中删除颜色:
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
labelColor: Colors.deepOrange,
unselectedLabelColor: Colors.white,
tabs: <Tab>[
Tab(
child: Row(
children: <Widget>[
Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
SizedBox(
width: 24.0,
),
Icon(
Icons.arrow_drop_down,
),
],
),
),
Tab(
child: Row(
children: <Widget>[
Text("Select", textAlign: TextAlign.start, style: TextStyle(color: Colors.white),),
SizedBox(
width: 24.0,
),
Icon(
Icons.arrow_drop_down,
),
],
),
),
],
),
),
body: Center(
child: Container(
child: Text("This is a page blahblah"),
),
),
),
)
编辑#2
现在,此代码更改了图标颜色,但将文本颜色更改保留为默认设置(您可以自定义文本颜色的更改,例如图标颜色)。码:
import 'package:flutter/material.dart';
class FirstPage extends StatefulWidget {
@override
_FirstPageState createState() => _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
onTap: (index){
setState(() {
_currentIndex = index;
});
},
tabs: <Tab>[
Tab(
child: Row(
children: <Widget>[
Text("Select", textAlign: TextAlign.start,),
SizedBox(
width: 24.0,
),
Icon(
Icons.arrow_drop_down,
color: _currentIndex == 0 ? Colors.deepOrange : Colors.white54
),
],
),
),
Tab(
child: Row(
children: <Widget>[
Text("Select", textAlign: TextAlign.start,),
SizedBox(
width: 24.0,
),
Icon(
Icons.arrow_drop_down,
color: _currentIndex == 1 ? Colors.deepOrange : Colors.white54,
),
],
),
),
],
),
),
body: Center(
child: Container(
child: Text("This is a page blahblah"),
),
),
),
);
}
}
关于flutter - 选择选项卡时的TabBar图标颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58619361/