flutter - 如何在tabBar中的选项卡之间制作垂直线？

Question

我有一个带有选项卡的 TapBar，这些选项卡是可点击的，我想在选项卡之间添加分隔线，但我不明白如何在 Flutter 中执行此操作!

这是我的标签栏:

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),
  tabs: [
    Tab(text: "1M",),
    Tab(text: "5M",),
    Tab(text: "15M",),
    Tab(text: "30M",),
    Tab(text: "1H",),
  ]
)

我想让它像这样:

我尝试在选项卡之间添加容器，但该容器移动了我的所有选项卡并变得可点击，这不是我真正想要的。

此外，这个 TabBar 位于 Container 内部，并且 Container 的宽度为 350

Answer 1

将标签包裹在容器内，如下所示:

  Widget _tab(String text) {
    return Container(
      padding: const EdgeInsets.all(0),
      width: double.infinity,
      decoration: const BoxDecoration(
          border: Border(right: BorderSide(color: Colors.white, 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), // remember to add this line
                tabs: [
                  _tab('1M'),
                  _tab('5M'),
                  _tab('15M'),
                  _tab('30M'),
                  _tab('1H'),
                ]
            )