文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在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

回答 4

Stack Overflow用户

回答已采纳

发布于 2022-11-22 13:32:20

将选项卡封装在容器中，如下所示：

  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'),
                ]
            )

票数 2

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

Stack Overflow用户

发布于 2022-11-22 12:52:32

用容器把它扭曲

Tab(
    child: Container(
    decoration: BoxDecoration(
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(14),
    ),
    child: Padding(
      padding: const EdgeInsets.only(left: 19, right: 19, bottom: 2),
      child: Text(
              "1M",
              style: const TextStyle(fontSize: 14, fontFamily: "PNU"),
            ),
    ),
  ),
),

票数 0

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

原文链接：

https://stackoverflow.com/questions/74532801

复制

相似问题

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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