在颤动中更改标签栏的背景颜色
Posted
技术标签:
【中文标题】在颤动中更改标签栏的背景颜色【英文标题】：Change background color of Tab bar in flutter 【发布时间】：2019-02-08 19:19:57 【问题描述】：我正在尝试，我尝试了以下方法（在此论坛上已被接受为答案），但没有奏效：
这里是代码
return new MaterialApp(
theme: new ThemeData(
brightness: Brightness.light,
primaryColor: Colors.pink[800], //Changing this will change the color of the TabBar
accentColor: Colors.cyan[600],
),
编辑：
当我更改主题数据颜色时，背景颜色不会改变。我试图在应用栏下方创建一个水平滚动子菜单，有人建议我使用标签栏。
这是整个 dart 文件：
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Index extends StatelessWidget
//final User user;
// HomeScreen(Key key, @required this.user) : super(key: key);
@override
Widget build(BuildContext context)
// TODO: implement build
// String emoji = emojify(":cool:");
return new MaterialApp(
theme: new ThemeData(
brightness: Brightness.light,
primaryColor: Colors.white, //Changing this will change the color of the TabBar
accentColor: Colors.cyan[600],
),
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: new AppBar(
backgroundColor: const Color(0xFF0099a9),
title: new Image.asset('images/lb_appbar_small.png', fit: BoxFit.none,),
bottom: TabBar(
tabs: [
Tab( text: "Tab 1",),
Tab(text: "Tab 2"),
],
),
),
body: Column(children: <Widget>[
Row(
//ROW 1
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.checkSquare,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
),
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.glasses,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.moon,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
Text("Check Out");
)
),
]
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.users,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.trophy,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.calendar,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
)
)
]),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.fileExcel,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.shoppingCart,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.list,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () print("Pressed");
)
),
]),
],
),
bottomNavigationBar: new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.feedback, color: const Color(0xFF0099a9),),
title: new Text("feedback")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.help, color: const Color(0xFF0099a9),),
title: new Text("help")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.people, color: const Color(0xFF0099a9),),
title: new Text("community",)
)
]
)
)
)
);
【问题讨论】：
你能把你的代码示例放在问题中吗？ 我做了，但如果你想要整个 dart 文件，我会编辑它并添加它。 我添加了整个 dart 文件。谢谢@diegoveloper 你想要什么颜色？ 只是白色，我正在尝试实现类似 Quora 的设计。 【参考方案1】：当 Tabbar 位于 Material 小部件内时，您可以更改 Tabbar 的背景颜色。
Material(
color: Colors.white, //Tabbar background-color
child: TabBar(
isScrollable: true,
labelStyle: Theme.of(context).tabBarTheme.labelStyle,
unselectedLabelStyle:
Theme.of(context).tabBarTheme.unselectedLabelStyle,
labelColor: Theme.of(context).tabBarTheme.labelColor,
unselectedLabelColor:
Theme.of(context).tabBarTheme.unselectedLabelColor,
indicatorColor: Theme.of(context).primaryColor,
tabs: [
Tab(text: 'tab 1'),
Tab(text: 'tab 2'),
Tab(text: 'tab 3'),
Tab(text: 'tab 4'),
],
),
),
【讨论】：
【参考方案2】：您好，因为您在 appbar 中添加了标签栏，所以您得到了相同的颜色，如果您正在为 TabBar 和 Appbar 寻找不同的颜色。这是您必须做的。
*在Scafold的正文中添加TabBar。
示例代码：
class _SwapOfferPageState extends State<SwapOfferPage> with SingleTickerProviderStateMixin
TabController _tabController;
@override
void initState()
_tabController = new TabController(length: 2, vsync: this);
super.initState();
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("Swap or Offer shift"),
centerTitle: true,
),
body: Column( // Column
children: <Widget>[
Container(
color: Color(0xffF5F5F5), // Tab Bar color change
child: TabBar( // TabBar
controller: _tabController,
labelColor: const Color(0xff959595),
indicatorWeight: 2,
indicatorColor: Color(0xff4961F6),
tabs: <Widget>[
Tab(
text: "SWAP MY SHIFT",
),
Tab(
text: "OFFER MY SHIFT",
),
],
),
),
Expanded(
flex: 3,
child: TabBarView( // Tab Bar View
physics: BouncingScrollPhysics(),
controller: _tabController,
children: <Widget>[
Text('Tab1'),
Text('Tab2'),
],
),
),
],
),
);
【讨论】：
【参考方案3】：对于仍在寻找如何将 TabBar 与 Appbar 分开的任何人，请查看以下代码 -
appBar: new AppBar(
title: new Text("some title"),
body: new Column(
children: [
/// this is will not colored with theme data
new TabBar(...),
Expanded(
new TabBarView(...)
)
]
)
)
【讨论】：
【参考方案4】：或者您甚至可以简单地将 TabBar 包装在一个 Container 小部件中，然后应用您想要的“颜色”。
【讨论】：
不能，因为Container没有实现PreferredSizeWidget【参考方案5】：您的AppBar 中有TabBar，因此它采用相同的颜色，只需将TabBar 移到Appbar 之外
Scaffold(
appBar: new AppBar(
backgroundColor: const Color(0xFF0099a9),
title: new Image.asset(
'images/lb_appbar_small.png',
fit: BoxFit.none,
),
),
body: Column(
children: <Widget>[
TabBar(
tabs: [
Tab(
text: "Tab 1",
),
Tab(text: "Tab 2"),
],
),
Row(
//ROW 1
....
【讨论】：
将TabBar 放入body，然后效果很好！以上是关于在颤动中更改标签栏的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章