专栏首页青年码农Flutter基础widgets教程-TabBar篇
原创

Flutter基础widgets教程-TabBar篇

1 TabBar

一个显示水平选项卡的Material Design widget。

2 构造函数

TabBar({
    Key key,
    @required this.tabs,
    this.controller,
    this.isScrollable = false,
    this.indicatorColor,
    this.indicatorWeight = 2.0,
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,
    this.indicatorSize,
    this.labelColor,
    this.labelStyle,
    this.labelPadding,
    this.unselectedLabelColor,
    this.unselectedLabelStyle,
    this.dragStartBehavior = DragStartBehavior.start,
    this.onTap,
})3 常用属性

3.1 tabs:显示的标签内容

tabs = <Tab>
    Tab(text: "Tab1",),
    Tab(text: "Tab2",),
,

3.2 isScrollable:是否可滚动

isScrollable: false,

3.3 indicatorColor:指示器颜色

indicatorColor: Color(0xffff0000),

3.4 indicatorWeight:指示器高度

indicatorWeight: 1,

3.5 indicatorPadding:底部指示器的Padding

indicatorPadding: EdgeInsets.only(bottom: 10.0),

3.6 indicatorSize:指示器大小计算方式,TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽

indicatorSize: TabBarIndicatorSize.tab,

3.7 labelColor:选中label颜色

labelColor: Color(0xff333333),

3.8 labelStyle:选中label的Style

labelStyle: TextStyle(
    fontSize: 15.0,
),

3.9 labelPadding:每个label的padding值

labelPadding: EdgeInsets.only(left: 20),

3.10 unselectedLabelColor:未选中label颜色

unselectedLabelColor: Color(0xffffffff),

3.10 unselectedLabelColor:未选中label的Style

unselectedLabelStyle: TextStyle(
    fontSize: 12.0,
),

4 EdgeInsets

edgeInsets是Widget的配置类,允许文本方向感知分辨率。

提供的配置方法:

4.1 分别指定四个方向的填充

EdgeInsets.fromLTRB(double left, double top, double right, double bottom)

4.2 所有方向均使用相同数值的填充

EdgeInsets.all(doube value)

4.3 可以设置具体某个方向的填充(可以同时指定多个方向)

EdgeInsets.only(top:0,right:0,bottom:0,left:0)

4.4 用于设置对称方向的填充,vertical指top和bottom,horizontal指left和right

EdgeInsets.symmeric(vertical:0,horizontal:0),

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter基础widgets教程-MaterialApp篇

    青年码农
  • Flutter基础widgets教程-ListTile篇

    青年码农
  • Flutter基础widgets教程-TextField篇

    青年码农
  • Canvas游动的花花肠子

    我不是费圆
  • Flutter组件学习(三)—— 输入框TextFiled

    Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架的魅力还是很吸引人...

    用户2802329
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • JavaScript this关键字

    Mirror王宇阳
  • 撩妹技能 get,教你用 canvas 画一场流星雨

    玩过 canvas 的同学,你画圆画方画线条这么 6,如果说叫你画下面这个玩意儿,你会不会觉得你用的是假 canvas?canvas 没有画一个带尾巴玩意儿的 ...

    王小婷

扫码关注云+社区

领取腾讯云代金券