在选项卡栏中添加垂直线作为分隔线作为分隔线

2024-04-14

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

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

我需要它是这样的:


终于对我有用了

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)),
        ),
    );
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在选项卡栏中添加垂直线作为分隔线作为分隔线 的相关文章

随机推荐