您好，我对 Flutter 还是个新手，已经研究它大约一个星期了，我目前正在创建一个应用程序来组织预算资金，我正在尝试创建一个多色的标签栏，以便用户可以轻松识别他们的资金，我尝试通过网络搜索并阅读选项卡文档，但仍然一无所获，有什么提示吗？

~编辑

我想要实现的是让每个标签栏的背景颜色与脚手架的背景颜色相同，标签栏的默认背景颜色目前是灰色的，它应该在第一个标签上是红色，在第一个标签上应该是蓝色第二个选项卡，黄色在第三个选项卡上。可能吗？

这是模拟器中的屏幕截图: screenshot

这里是我的代码示例:

/main.dart

import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main(){
  runApp(new MaterialApp(
    home: new MyTabs()
  ));
}

class MyTabs extends StatefulWidget{
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {


  TabController controller;

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Multi Colored Tab Bar'),
        backgroundColor: Colors.grey,
        bottom: new TabBar(
          controller: controller,
          tabs: <Tab>[
            new Tab(text: 'First Tab'),
            new Tab(text: 'Second Tab'),
            new Tab(text: 'Third Tab'),
          ],
        ),
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.First(),
          new second.Second(),
          new third.Third(),
        ],
      ),
    );
  }
}

/FirstTab.dart

import 'package:flutter/material.dart';

class First extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.red
    );
  }
}

/SecondTab.dart

import 'package:flutter/material.dart';

class Second extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.blue
    );
  }
}

/ThirdTab.dart

import 'package:flutter/material.dart';

class Third extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      backgroundColor: Colors.yellow
    );
  }
}

最佳答案

Yes it is possible try this

import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main(){
  runApp(new MaterialApp(
      home: new MyTabs()
  ));
}

class MyTabs extends StatefulWidget{
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {


  TabController controller;
  int tabIndex =0 ;

  @override
  void initState(){
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Multi Colored Tab Bar'),
        backgroundColor: Colors.grey,
        bottom: new TabBar(
          controller: controller,
          indicator: BoxDecoration(color: setColor(tabIndex)),
          onTap: (index){
            setState(() {
              tabIndex = index;
            });
          },
          tabs: <Tab>[
            new Tab(text: 'First Tab'),
            new Tab(text: 'Second Tab'),
            new Tab(text: 'Third Tab'),
          ],
        ),
      ),
      body: new TabBarView(
        controller: controller,
        children: <Widget>[
          new first.First(),
          new second.Second(),
          new third.Third(),
        ],
      ),
    );
  }

  setColor(int tabIndex){
    if(tabIndex == 0){
      return Colors.red;
    }else if(tabIndex == 1){
      return Colors.blue;
    }else if(tabIndex == 2){
      return Colors.yellow;
    }
  }
}

关于dart - 有没有办法在 flutter 中设置多色标签栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55369005/