flutter中的tarbar字体颜色
时间: 2024-05-04 20:20:13 浏览: 17
在Flutter中,可以通过修改`TabBar`组件的`TextStyle`属性来更改`Tab`上的文本颜色。具体做法如下:
1. 在`TabBar`的`tabs`属性中添加`Tab`组件,并在`Tab`组件中设置文本内容。
2. 在`TabBar`的`labelColor`属性中设置选中的文本颜色。
3. 在`TabBar`的`unselectedLabelColor`属性中设置未选中的文本颜色。
4. 在`TabBar`的`labelStyle`属性中设置选中的文本样式,包括字体大小、字体颜色等。
5. 在`TabBar`的`unselectedLabelStyle`属性中设置未选中的文本样式,包括字体大小、字体颜色等。
以下是一个示例代码,可以参考:
```dart
TabBar(
tabs: [
Tab(
text: 'Tab 1',
),
Tab(
text: 'Tab 2',
),
Tab(
text: 'Tab 3',
),
],
labelColor: Colors.black, // 选中的文本颜色
unselectedLabelColor: Colors.grey, // 未选中的文本颜色
labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), // 选中的文本样式
unselectedLabelStyle: TextStyle(fontSize: 16), // 未选中的文本样式
),
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)