Flutter 的Tabbar 属性详解及设置

打印 上一主题 下一主题

主题 1013|帖子 1013|积分 3039

最简单的tabbar设置 
  1. var tabs = ["区域", "分项", "组织"];
  2. late TabController tabController;
  3. tabController =
  4.         TabController(length: tabs.length, vsync: this);
  5. TabBar(
  6.     controller: tabController,
  7.     tabs: tabs.map((e) => Text(e)).toList(),
  8. ),
复制代码



  • 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的距离
    设置 indicatorPadding: EdgeInsets.only(bottom: 10)后 

  • indicator  有条件的自定义指示器 假如设置了该属性,则indicatorColor、indicatorWeight、indicatorPadding都无效 
默认可以设置UnderlineTabIndicator 属性中有borderRadius、borderSide、insets
  1.           indicator: UnderlineTabIndicator(
  2.             borderRadius: BorderRadius.circular(6.r),
  3.             borderSide: BorderSide(
  4.               width: 5,
  5.               color: Colors.red,
  6.             ),
  7.             insets: EdgeInsets.only(bottom: 2, left: 10, right: 10),
  8.           ),
复制代码
borderRadius设置指示器的圆角
borderSide设置指示器的高度和颜色,这里的width是指示器的高度,指示器的原理是一个边框,设置width就是边框的厚度
insets 和indicatorPadding类似,设置top无效,只能设置bottom 与divider的距离,且,这是left和right是缩短指示器的宽度而不位移



  • indicatorSize 两个值可设置,tab 和label tab是与选择的tabbar 一样宽,label 与tabbar中的组件一样宽
这是设置tab
这是设置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企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

尚未崩坏

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表