文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在tabBar中制表符之间建立垂直线？

问如何在tabBar中制表符之间建立垂直线？
EN

Stack Overflow用户

提问于 2022-11-22 12:41:54

回答 4查看 45关注 0票数 2

我有一个带有选项卡的tapBar，这些选项卡是可点击的，我想在选项卡之间添加分隔符，但我不知道如何在颤振中实现这一点！

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

我想这样做：

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

此外，此TabBar位于容器内，容器的宽度为350

flutter

dart

flutter-layout

Stack Overflow用户

发布于 2022-11-22 15:23:14

尝试这种方法，这也解决了重叠问题的分割问题。

首先，在构建方法之外定义新变量，如下所示：

int selectedTap = 0;

然后像这样定义tabWidget：

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

像这样使用它：

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

票数 1

查看全部 4 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74532801

复制

相似问题

问如何在tabBar中制表符之间建立垂直线？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在tabBar中制表符之间建立垂直线？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在tabBar中制表符之间建立垂直线？
EN