如何更改 TabBar 中每个 Tab 的突出显示颜色、初始颜色和大小 - Flutter？

Question

我无法更改每个选项卡的 AppBar - TabBar 中的突出显示颜色和启动颜色。

Exp：在此处输入图片描述

Answer 1

我建议您阅读TabBar 文档以便更好地理解。

Answer 2

为此，您必须为 TabBar 使用自定义指示器或构建您自己的自定义 TabBar。

要使用指标，请执行以下操作：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BorderTabIndicator extends Decoration {
  BorderTabIndicator({this.indicatorThickness, this.colors,this.tabController}) : super();

  final double indicatorThickness;
  final List<Color> colors;
  final TabController tabController;


  // @override
  _BorderPainter createBoxPainter([VoidCallback onChanged]) {
    return _BorderPainter(this, indicatorThickness,tabController, colors, onChanged);
  }
}

class _BorderPainter extends BoxPainter {
  _BorderPainter(
    this.decoration,
    this.indicatorThickness,
    this.tabController,
    this.colors,
    VoidCallback onChanged,
  )   : assert(decoration != null),
        assert(indicatorThickness >= 0),
        assert(tabController != null),
        super(onChanged);

  final BorderTabIndicator decoration;
  final double indicatorThickness;
  final List<Color> colors;
  final TabController tabController;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration != null);
    assert(configuration.size != null);
    final start = Offset(offset.dx, configuration.size.height + offset.dy);
    final end = Offset(offset.dx + configuration.size.width, configuration.size.height + offset.dy);
    final paint = Paint();

    paint.color = colors[tabController.index % colors.length];
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = indicatorThickness;
    canvas.drawLine(start,end,paint);
  }
}

然后在您的标签栏中执行以下操作：

indicator: BorderTabIndicator(
                  indicatoThickness: 2,
                  colors: [Colors.red,Colors.blue,Colors.green],
                  controller: _tabController
                )

在查看了我的答案后，我决定改为通过 controller 来创建 controller

   this._tabController =
        TabController(vsync: this, length: 3);

您可以将其传递给 BorderTabIndicator。

TabBar 应如下所示：

TabBar(
          isScrollable: true,
          labelPadding: EdgeInsets.all(10),
          labelColor: Color(0xff374750),
        
          unselectedLabelColor: Color.fromARGB(143, 51, 71, 70),
          indicator: BorderTabIndicator(
              indicatorThickness: 2,
              colors: [Colors.red, Colors.yellow, Colors.green],
              tabController: widget.tabController),
          controller: widget.tabController,
          onTap: (index) {
            widget.tabController.animateTo(
              index,
              duration: const Duration(milliseconds: 300),
            );
          },
          tabs: navigationItems,
        ),

您可能需要对解决方案进行更多修改以使其准确运行，因为我没有运行它，但是这是这样做的基础。 干杯

我自己的版本相同的解决方案视频演示