Flutter基础widgets教程-TabBar篇-阿里云开发者社区

Flutter基础widgets教程-TabBar篇

2022-05-19 144

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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),

复制