gpt4 book ai didi

flutter - 在标签栏中添加垂直线作为分隔线作为分隔线

转载 作者:IT王子 更新时间:2023-10-29 06:47:52 26 4
gpt4 key购买 nike

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

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

我需要它是这样的:

enter image description here

最佳答案

终于对我有用了

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)),
),
);
}

Output

关于flutter - 在标签栏中添加垂直线作为分隔线作为分隔线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56514572/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com