如何在不更改AppBar的情况下更改TabBar的背景颜色?TabBar没有BG属性,是否有解决方法?
您可以通过如下更改主题primaryColor来更改TabBar的颜色:
return MaterialApp( theme: ThemeData( brightness: Brightness.light, primaryColor: Colors.pink[800], //Changing this will change the color of the TabBar accentColor: Colors.cyan[600], ), home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( indicatorColor: Colors.lime, tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), title: Text('Tabs Demo'), ), body: TabBarView( children: [ Icon(Icons.directions_car), Icon(Icons.directions_transit), Icon(Icons.directions_bike), ], ), ), ), );
如果您不在AppBar中使用它,则可以将TabBar包裹在Material小部件中并设置color属性,如下所示:
class TabBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Tabs Demo'), ), body: DefaultTabController( length: 3, child: Column( children: <Widget>[ Container( constraints: BoxConstraints(maxHeight: 150.0), child: Material( color: Colors.indigo, child: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), ), ), Expanded( child: TabBarView( children: [ Icon(Icons.directions_car), Icon(Icons.directions_transit), Icon(Icons.directions_bike), ], ), ), ], ), ), ), ); } }