首页 > 解决方案 > 在标签栏中添加垂直线作为分隔线作为分隔线

问题描述

我有一个标签栏,我需要在标签之间放置一条垂直线作为分隔线,该怎么做?这就是我使用标签栏的方式:

new TabBar(
                    unselectedLabelColor: Color.fromRGBO(119, 119, 119, 1),
                    labelColor: Colors.black,
                    controller: controller,
                    tabs: <Tab>[
                      new Tab(text: "Girls"),
                      new Tab(text: "Hero"),
                      new Tab(text: "Open"),
                    ]),

我需要它是这样的:

在此处输入图像描述

标签: flutterdartcross-platformtabbar

解决方案


最后它对我有用

new TabBar(

          tabs: [
            _individualTab('assets/icons/bottom_nav/Home.png'),
            _individualTab('assets/icons/bottom_nav/Guys.png'),
            _individualTab('assets/icons/bottom_nav/Notes.png'),
            Tab(
              icon: ImageIcon(AssetImage('assets/icons/bottom_nav/Email.png')),
            ),
          ],
          labelColor: STColors.PRIMARY_COLOR,
          unselectedLabelColor: Colors.grey,
          indicatorColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.tab,
          labelPadding: EdgeInsets.all(0),
          indicatorPadding: EdgeInsets.all(0),
        ),

单独的选项卡功能

Widget _individualTab(String imagePath) {
return Container(
  height: 50 + MediaQuery
      .of(context)
      .padding
      .bottom,
  padding: EdgeInsets.all(0),
  width: double.infinity,
  decoration:  BoxDecoration(border: Border(right: BorderSide(color: STColors.LIGHT_BORDER, width: 1, style: BorderStyle.solid))),
  child: Tab(
    icon: ImageIcon(AssetImage(imagePath)),
  ),
);

}

输出


推荐阅读