如何在不使用自定义选项卡栏的情况下对选项卡栏中未选择的选项卡使用指示器颜色

Question

所以我想在未选择的文本/选项卡中使用灰色指示器颜色，我可以使用自定义选项卡栏，但我们可以使用选项卡栏视图吗？我尝试创建自定义指示器，但它无法正常工作。 我想要两个选项卡上的指示器，只是两个选项卡不同

我尝试在指标属性上应用自定义指标

indicator: CustomTabIndicator(
                    height: 4,
                    width: MediaQuery.of(context).size.width / 2.9,
                    selectedIndex: _selectedIndex,
                  ),
this is indiactor i am calling 
class CustomTabIndicator extends Decoration {
  final double height;
  final double width;
  final int selectedIndex;

  const CustomTabIndicator({
    this.height = 4,
    this.width = 30,
    required this.selectedIndex,
  });

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _CustomTabIndicatorPainter(
      height: height,
      width: width,
      selectedIndex: selectedIndex,
    );
  }
}

class _CustomTabIndicatorPainter extends BoxPainter {
  final double height;
  final double width;
  final int selectedIndex;

  _CustomTabIndicatorPainter({
    required this.height,
    required this.width,
    required this.selectedIndex,
  });

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final Paint paint = Paint();
    final double tabWidth = configuration.size!.width;
    paint.color = Colors.grey.withOpacity(0.5);
    for (int i = 0; i < 2; i++) {
      Rect greyRect = Offset(
            offset.dx + (tabWidth * i) + (tabWidth - width) / 2.5,
            configuration.size!.height - height - 8,
          ) &
          Size(width, height);
      canvas.drawRect(greyRect, paint);
    }

    paint.color = Colors.orange;
    Rect orangeRect = Offset(
          offset.dx + (tabWidth * selectedIndex) + (tabWidth - width) / 2.5,
          configuration.size!.height - height - 8,
        ) &
        Size(width, height);
    canvas.drawRect(orangeRect, paint));
  }
}

出了问题或者我应该使用自定义选项卡栏吗

Answer 1

如果您只是想为未选定的选项卡设置颜色，您可以使用 TabBar 中的“dividerColor”参数

 TabBar(
        tabs: [Text('tab1'), Text('tab2')],
        controller: _tabController,
        indicatorColor: Colors.blue,
        dividerColor: Colors.grey,
      ),

或者如果您希望选中和未选中的选项卡颜色显示大小相似，您也可以调整 TabBar 中的 'indicatorSize' 参数

 TabBar(
        tabs: [Text('tab1'), Text('tab2')],
        indicatorSize: TabBarIndicatorSize.tab,
        controller: _tabController,
        indicatorColor: Colors.blue,
        dividerColor: Colors.grey,
      ),