flutter - 在标签栏中添加垂直线作为分隔线作为分隔线
问题描述
我有一个标签栏,我需要在标签之间放置一条垂直线作为分隔线,该怎么做?这就是我使用标签栏的方式:
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"),
]),
我需要它是这样的:
解决方案
最后它对我有用
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)),
),
);
}
推荐阅读
- node.js - 使用 nodejs 在客户端存储 Cookie
- postgresql - 从 PostgreSQL 11 外部数据包装器中选择(到 PG 9.5 远程)慢 15 倍
- laravel - Laravel - 为什么没有加载模型的关系?
- html - 使用 AWS SES 通过电子邮件发送 pandas 数据框的问题
- python - 如何为json模式的“模式属性”编写“必需”
- python - 尝试执行 NetezzaSQL odbc vi aunixODBC
- bash - 使用 for 循环启动多个分离屏幕,每个屏幕都有一个带有 for 循环的命令
- ruby-on-rails - RoR API - 当我将 db 从 sqlite 切换到 postgres 时,API 数组中的任何更新对象都会移动到数组末尾
- android - ChipGroup 芯片索引超出范围
- javascript - JSPDF javascript 不适用于 Tableau