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

/ThirdTab.dart

import 'package:flutter/material.dart';

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

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

Answer 2

我通过更改primaryColor的{{1}}中的theme使它起作用，可以更改Tab的颜色。因此，在MaterialApp的内部构建方法中，返回MyTabsState并将其MaterialApp设置为变量 currentTabColor 。

在theme中声明currentTabColor并将其设置为MyTabsState

然后将Colors.red设置为一个回调，该回调返回当前标签页的索引并使用onTap更改状态currentTabColor

if..else

输出

Answer 3

以下内容将在加载时自动设置Period.between()颜色，并且标签会显示相应的默认颜色。

Scaffold

有没有办法让多色的标签栏颤动起来？

3 个答案: