如何解决将一个边框覆盖在另一个边框之上的问题？

Question

我有一个 TabBar，里面有标签，当我点击标签时，垂直线（分隔线）覆盖标签的边框（当我点击标签时，有白色边框）。

它看起来像这样：

这是它的样子

这是我的标签栏：

    TabBar(
      indicatorPadding: EdgeInsets.symmetric(vertical: 10),
      indicator: ShapeDecoration(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5)),
          side: BorderSide(color: Colors.white)),
        color: Color(0xFF1C1B20),
      ),
      labelColor: AppColors.whiteE3EAF6,
      labelStyle: TextStyle(color: Colors.white),
      labelPadding: const EdgeInsets.all(0),
      tabs: [
        _tab("1M",),
        _tab("5M",),
        _tab("15M",),
        _tab("30M",),
        Tab(text: "1H",),
      ]
    )

这是我的自定义 _tab 小部件：

     Widget _tab(String text) {
        return Container(
          height: 16,
          padding: const EdgeInsets.all(0),
          width: double.infinity,
          decoration: const BoxDecoration(
              border: Border(right: BorderSide(color: Color(0xFF454545), width: 1, style: BorderStyle.solid))),
          child: Tab(
            text: text,
          ),
        );
      }

我想让这条灰线不可见或变成白色，但我不知道如何解决

Answer 1

首先从构建方法中定义新变量，如下所示：

int selectedTap = 0;

然后将您的_tab更改为：

Widget _tab(String text, int index) {
    return Container(
      height: 16,
      padding: const EdgeInsets.all(0),
      width: double.infinity,
      decoration: BoxDecoration(
      border: index == selectedTap
          ? null
          : Border(
              right: BorderSide(
                  color: Color(0xFF454545),
                  width: 1,
                  style: BorderStyle.solid),
            )),
      child: Tab(
        text: text,
      ),
    );
  }

并像这样使用它：

TabBar(
      indicatorPadding: EdgeInsets.symmetric(vertical: 10),
      indicator: ShapeDecoration(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5)),
          side: BorderSide(color: Colors.white)),
        color: Color(0xFF1C1B20),
      ),
      labelColor: AppColors.whiteE3EAF6,
      labelStyle: TextStyle(color: Colors.white),
      labelPadding: const EdgeInsets.all(0),
      tabs: [
        _tab("1M", 0),
        _tab("5M", 1),
        _tab("15M", 2),
        _tab("30M", 3),
        Tab(text: "1H",),
      ],
      onTap: (index) {
          setState(() {
            selectedTap = index;
          });
      },
    )