滑动(Flutter)时如何更改TabBar指示器颜色

克里斯

刷卡时是否可以通过编程方式更改TabBar指示器?

我已经尝试过使用构建器来获取索引,但是我还没有运气..我敢肯定必须有一种方法可以做到这一点,但是还没有弄清楚

Color _indicatorColor(index) {
    switch (index) {
      case 0:
        return Colors.purple;
        break;
      case 1:
        return colorInfoLighter;
        break;
      case 2:
        return Colors.pink;
        break;
    }
  }

  Widget _buildScreen() {
    var index;
    return Scaffold(
      appBar: AppBar(),
      bottomNavigationBar: TabBar(
          onTap: (_) {
            setState(() {});
          },
          indicatorWeight: 4,
          indicatorColor: _indicatorColor(index),
          tabs: [
            _requestedLabel(),
            _completedLabel(),
            _cancelledLabel(),
          ]),
      body: Container(
        child: TabBarView(children: [
          _requestedTab(),
          _completedTab(),
          _cancelledTab(),
        ]),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: _buildScreen(),
    );
  }
海尔

您的意思是更改标签吗?

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key key,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  final colors = [Colors.purple, Colors.green, Colors.pink];
  Color indicatorColor;
  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: 3, vsync: this)
      ..addListener(() {
        setState(() {
          indicatorColor = colors[_controller.index];
        });
      });
    indicatorColor = colors[0];
  }

  Widget _buildScreen() {
    return Scaffold(
      appBar: AppBar(),
      bottomNavigationBar: Container(
        color: Colors.blue,
        child: TabBar(
            labelColor: Colors.black,
            controller: _controller,
            indicatorWeight: 4,
            indicatorColor: indicatorColor,
            tabs: [
              Tab(
                child: Container(
                  child: Text('A'),
                ),
              ),
              Tab(
                child: Text('B'),
              ),
              Tab(
                child: Text('C'),
              ),
            ]),
      ),
      body: Container(
        child: TabBarView(
          controller: _controller,
          children: [
            Center(
              child: Text('aa'),
            ),
            Center(
              child: Text('bb'),
            ),
            Center(
              child: Text('cc'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: _buildScreen(),
    );
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何更改颜色滚动溢出指示器?

如何更改当前光标位置指示器的颜色?

如何更改新的TabLayout指示器的颜色和高度

如何更改轮播活动指示器的颜色-Bootstrap

如何更改SwiftUI ScrollView指示器颜色

IOS Tabbar 滚动动画:触摸指示器视图时文本更改颜色

Excel。更改评论指示器的颜色

更改ViewPager指示器颜色

更改UIPickerView选择指示器的颜色

Flutter:在特定值上更改圆形进度指示器的颜色

更改使用“显示窗格”时显示的tmux窗格指示器的颜色

如何更改带有验证错误的选项卡的选项卡指示器颜色?

如何以编程方式更改UITableVeiw公开指示器的颜色?

如何在Windows Phone 7中更改进度指示器的颜色

如何在Xamarin.Droid中更改选项卡式页面指示器的颜色?

如何在Android中更改ProgressBar的进度指示器颜色

如何更改自定义轮播指示器背景颜色?

如何在我的单元格中更改附件类型->披露指示器颜色?

如何使百分比指示器以编程方式在颤动中更改颜色?

如何更改ViewPager中每个片段的点指示器的颜色(活动和不活动)?

如何在Android中更改选项卡指示器颜色

将活动指示器颜色更改为黑色

更改导航抽屉指示器图标的颜色

SAPUI5忙碌指示器-更改标准颜色?

颤动圆形 TabBar 边框指示器

滑动图像的Android页面指示器

在Flutter中点击时如何在卡片上添加进度指示器?

如何为主页指示器元素设置颜色?

如何在 Nuxt.js 中更改路由查询时显示加载指示器