Question

如何更改TabBar的背景颜色而不更改flutter中的AppBar？ TabBar没有BG proprety，有解决方法吗？

Answer 1

您可以通过更改主题primaryColor来更改TabBar的颜色：

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],
      ),
      home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              indicatorColor: Colors.lime,
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
            ),
            title: new Text('Tabs Demo'),
          ),
          body: new TabBarView(
            children: [
              new Icon(Icons.directions_car),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );

如果您没有在AppBar中使用它，您可以将TabBar包装在Material小部件中并设置color属性，如下所示：

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Tabs Demo'),
        ),
        body: new DefaultTabController(
          length: 3,
          child: new Column(
            children: <Widget>[
              new Container(
                constraints: BoxConstraints(maxHeight: 150.0),
                child: new Material(
                  color: Colors.indigo,
                  child: new TabBar(
                    tabs: [
                      new Tab(icon: new Icon(Icons.directions_car)),
                      new Tab(icon: new Icon(Icons.directions_transit)),
                      new Tab(icon: new Icon(Icons.directions_bike)),
                    ],
                  ),
                ),
              ),
              new Expanded(
                child: new TabBarView(
                  children: [
                    new Icon(Icons.directions_car),
                    new Icon(Icons.directions_transit),
                    new Icon(Icons.directions_bike),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

截图：

代码：

TabBar get _tabBar => TabBar(
  tabs: [
    Tab(icon: Icon(Icons.call)),
    Tab(icon: Icon(Icons.message)),
  ],
);
  
@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text('AppBar'),
        bottom: PreferredSize(
          preferredSize: _tabBar.preferredSize,
          child: ColoredBox(
            color: Colors.red,
            child: _tabBar,
          ),
        ),
      ),
    ),
  );
}

Answer 3

为此创建一个简单的Widget，再简单不过了：

class ColoredTabBar extends Container implements PreferredSizeWidget {
  ColoredTabBar(this.color, this.tabBar);

  final Color color;
  final TabBar tabBar;

  @override
  Size get preferredSize => tabBar.preferredSize;

  @override
  Widget build(BuildContext context) => Container(
    color: color,
    child: tabBar,
  );
}

Answer 4

简单明了。

class ColoredTabBar extends ColoredBox implements PreferredSizeWidget {
  ColoredTabBar({this.color, this.tabBar}) : super(color: color, child: tabBar);

  final Color color;
  final TabBar tabBar;

  @override
  Size get preferredSize => tabBar.preferredSize;
}

Answer 5

用于 SliverPersistenHeader（例如在嵌套滚动视图中使用 sliver appbar 折叠）

 class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
   _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
      color: Colors.red,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

Answer 6

因此，如果您正在寻找更改特定标签颜色，那么您可以尝试以下代码：

创建一个颜色变量：
颜色 tabColor=Colors.green;

在 TabBar 内创建 onTap 方法和在标签栏内创建 setState() 方法代码如下：

onTap: (index) {
   setState(() {

     if(index==0) { tabColor = Colors.lightGreen;}
     if(index==1) {tabColor = Colors.yellow;}
     if(index==2) {tabColor = Colors.green;}
     if(index==3) {tabColor = Colors.red;}
     if(index==4) {tabColor = Colors.deepPurple;}                      
   });
   print(index);
 },

创建一个指示器并根据您的要求给出一些半径并更改给出的颜色代码：

indicator: BoxDecoration(
   borderRadius: BorderRadius.only(topLeft: 
  Radius.circular(10),topRight: Radius.circular(10)),
   color: tabColor
),

Answer 7

当 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'),
                ],
              ),
            ),

Answer 8

更改Flutter中TabBar的背景颜色。

只需在Scaffold的主体中使用TabBar，然后将其与Column Widget一起包装即可，这样您就可以同时使用这两者而没有任何问题。用容器小部件包装TabBar以更改标签的颜色。这样，您可以在FLutter中更改选项卡栏的颜色。

这是示例代码...

app.post("/addprod" ,(req,res) => { 
   let prodname = req.body.name 
   let price = req.body.price
   product.create({ 
      "_id" : mongoose.Types.ObjectId(), 
      "name" : prodname, 
      "price":price 
   }).then(item => {
         res.send(item);
   }).catch(err => {
         res.send(err);
   });
});

如何更改TabBar的背景颜色而不更改flutter中的AppBar？

8 个答案: