dart - 有没有办法让多色标签栏颤动？

Question

嗨，我还是新手，现在已经研究了大约一周，我目前正在创建一个组织预算资金的应用程序，我正在尝试创建一个多色标签栏，以便用户可以轻松识别他们的资金，我尝试在网上搜索并阅读标签文档，但仍然没有运气，有什么提示吗？

~编辑

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

这是模拟器中的屏幕截图： 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
    );
  }
}

/第三个标签.dart

import 'package:flutter/material.dart';

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

标签： dartfluttertabs

Answer 1

是的，可以试试这个

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;
    }
  }
}