时间戳

首页 > 解决方案 > TabBar中的Flutter Tab背景颜色（多色标签栏）

flutter - TabBar中的Flutter Tab背景颜色（多色标签栏）

问题描述

我正在尝试制作一个多色 TabBar，其中每个选项卡都有不同的背景颜色。

我尝试了一些东西来了解我想要实现的目标（但它只是“文本背景”，我想拥有所有选项卡背景）。

实际结果的图像

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                ColoredBox(
                    color: Colors.red,
                    child: Tab(icon: Icon(Icons.directions_car))),
                ColoredBox(
                    color: Colors.green,
                    child: Tab(icon: Icon(Icons.directions_transit))),
                ColoredBox(
                    color: Colors.purple,
                    child: 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),
            ],
          ),
        ),
      ),
    );
  }
}

标签： fluttercolorsbackgroundtabstabbar

解决方案

声明颜色变量并将其分配给 appbar 背景颜色

//declare color variable
Color color=Colors.blue;

//assign it to app bar background
appBar:AppBar(backgroundColor: color

//assign value on tab index changed
onindexchanged:(index){
if(index==1){
 
setState(() {
   color=Colors.green;
});

}
}

然后在选项卡上更改更改颜色变量的值

推荐阅读