在Flutter中,可以通过使用TabBar和TabBarView来创建选项卡栏。要更改未选中选项卡栏的背景,可以使用TabBar的unselectedLabelColor属性来设置未选中标签的文本颜色,以及TabBarView的unselectedLabelStyle属性来设置未选中标签的样式。
以下是一个示例代码,演示如何更改未选中选项卡栏的背景:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Flutter TabBar Example'),
),
body: Column(
children: [
TabBar(
unselectedLabelColor: Colors.grey, // 设置未选中标签的文本颜色
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
Expanded(
child: TabBarView(
unselectedLabelStyle: TextStyle(color: Colors.grey), // 设置未选中标签的样式
children: [
Container(
color: Colors.red,
child: Center(child: Text('Tab 1 Content')),
),
Container(
color: Colors.green,
child: Center(child: Text('Tab 2 Content')),
),
Container(
color: Colors.blue,
child: Center(child: Text('Tab 3 Content')),
),
],
),
),
],
),
),
),
);
}
}
在上述代码中,我们通过设置TabBar的unselectedLabelColor属性为Colors.grey来更改未选中标签的文本颜色,通过设置TabBarView的unselectedLabelStyle属性为TextStyle(color: Colors.grey)来更改未选中标签的样式。你可以根据需要自定义颜色和样式。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云