我试图改变标签栏的背景颜色,我尝试了以下(这个论坛被接受作为答案),但它没有工作:
这是代码
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],
),
编辑:
当我更改主题数据颜色时,背景颜色不会改变 . 我试图在应用程序栏下创建一个水平滚动子菜单,建议我使用Tab栏 .
这是整个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",)
)
]
)
)
)
);
}
}
1 回答
您的
AppBar
内有TabBar
因为它采用相同的颜色,只需将TabBar
移到Appbar
之外