Flutter 的Tabbar 属性详解及设置
最简单的tabbar设置var tabs = ["区域", "分项", "组织"];
late TabController tabController;
tabController =
TabController(length: tabs.length, vsync: this);
TabBar(
controller: tabController,
tabs: tabs.map((e) => Text(e)).toList(),
), https://i-blog.csdnimg.cn/direct/af6f4d1c8dc345c9bdac1bf5a66bbb86.png
[*] isScrollable 默认false 指示 TabBar 是否可以滚动。当你有多个 Tab 并且它们无法完全表现时，设置为 true 会让 TabBar 支持水平滚动 ，假如设置了true ，在左侧会有一段padding距离，必要设置tabAlignment 为start 靠左就行了
[*] padding 设置 TabBar 内部的填充。它可以为 Tab 标签和 TabBar 之间设置额外的间距。
[*] indicatorColor 指示器的颜色
[*] automaticIndicatorColorAdjustment 是否自动调整指示器颜色 设置unselectedLabelColor 和labelColor 会根据选择的tab 自动调整颜色
[*] indicatorWeight 指示器的高度
[*] indicatorPadding 指示器的内边距 设置top无效，都是设置left right bottom 指示器默认是在divider线上，可以通过该属性设置与divider的距离https://i-blog.csdnimg.cn/direct/8e1ed330ec8a45a0b477eb4421260c71.png设置 indicatorPadding: EdgeInsets.only(bottom: 10)后 https://i-blog.csdnimg.cn/direct/9884ae40b95f488a925d37b3464f3a44.png
[*] indicator 有条件的自定义指示器 假如设置了该属性，则indicatorColor、indicatorWeight、indicatorPadding都无效
默认可以设置UnderlineTabIndicator 属性中有borderRadius、borderSide、insets
indicator: UnderlineTabIndicator(
borderRadius: BorderRadius.circular(6.r),
borderSide: BorderSide(
width: 5,
color: Colors.red,
),
insets: EdgeInsets.only(bottom: 2, left: 10, right: 10),
), borderRadius设置指示器的圆角
borderSide设置指示器的高度和颜色，这里的width是指示器的高度，指示器的原理是一个边框，设置width就是边框的厚度
insets 和indicatorPadding类似，设置top无效，只能设置bottom 与divider的距离，且，这是left和right是缩短指示器的宽度而不位移
https://i-blog.csdnimg.cn/direct/e0e3f331ae1d41a88f39a1fd422bb97d.png
[*] indicatorSize 两个值可设置，tab 和label tab是与选择的tabbar 一样宽，label 与tabbar中的组件一样宽
https://i-blog.csdnimg.cn/direct/08fe6e1f43eb4d2b92a480752e386ecb.png这是设置tab
https://i-blog.csdnimg.cn/direct/e266f6e2795c4935bf0f418d81426aba.png这是设置label 默认是这个
[*]dividerColor tabbar 底部的颜色
[*] dividerHeight 的高度 可以设置为0隐藏divider
[*] labelColor 选中标签的颜色
[*] labelStyle 选中标签的样式
[*] labelPadding 标签笔墨的内边距
[*] unselectedLabelColor 未选中标签的颜色
[*] unselectedLabelStyle 未选中标签的样式
[*] dragStartBehavior 两个值start （触摸开始就拖动）和down （到达位置后再拖动）
[*] overlayColor 控制当鼠标或触摸变乱悬停时，Tab 的颜色
[*] mouseCursor 设置鼠标指针悬停在 Tab 上时的样式
[*] enableFeedback 设置是否启用点击反馈
[*] onTap 当用户点击 Tab 时触发的回调。它返回当前点击的 Tab 的索引。
[*] physics 设置 TabBar 的滚动行为
[*] splashFactory 定义 Tab 的水波纹效果 splashFactory: NoSplash.splashFactory, // 禁用水波纹效果
[*] splashBorderRadius 控制水波纹效果的边界圆角。当点击 Tab 时，假如必要让水波纹效果边缘变得圆润，可以使用此属性设置圆角半径。
[*] tabAlignment 定义 Tab 的对齐方式。此属性允许你对 Tab 进行居中或偏移对齐的调整，是一个新的属性，用于更灵活地控制 TabBar 中的布局。
TabAlignment.center：所有 Tab 居中对齐。
TabAlignment.start：所有 Tab 从开始对齐。
TabAlignment.end：所有 Tab 从结束对齐
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]