前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter基础widgets教程-TabBar篇

Flutter基础widgets教程-TabBar篇

原创
作者头像
青年码农
发布2020-10-10 17:15:17
5240
发布2020-10-10 17:15:17
举报
文章被收录于专栏:青年码农青年码农

1 TabBar

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

2 构造函数

代码语言:javascript
复制
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:显示的标签内容

代码语言:javascript
复制
tabs = <Tab>
    Tab(text: "Tab1",),
    Tab(text: "Tab2",),
,

3.2 isScrollable:是否可滚动

代码语言:javascript
复制
isScrollable: false,

3.3 indicatorColor:指示器颜色

代码语言:javascript
复制
indicatorColor: Color(0xffff0000),

3.4 indicatorWeight:指示器高度

代码语言:javascript
复制
indicatorWeight: 1,

3.5 indicatorPadding:底部指示器的Padding

代码语言:javascript
复制
indicatorPadding: EdgeInsets.only(bottom: 10.0),

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

代码语言:javascript
复制
indicatorSize: TabBarIndicatorSize.tab,

3.7 labelColor:选中label颜色

代码语言:javascript
复制
labelColor: Color(0xff333333),

3.8 labelStyle:选中label的Style

代码语言:javascript
复制
labelStyle: TextStyle(
    fontSize: 15.0,
),

3.9 labelPadding:每个label的padding值

代码语言:javascript
复制
labelPadding: EdgeInsets.only(left: 20),

3.10 unselectedLabelColor:未选中label颜色

代码语言:javascript
复制
unselectedLabelColor: Color(0xffffffff),

3.10 unselectedLabelColor:未选中label的Style

代码语言:javascript
复制
unselectedLabelStyle: TextStyle(
    fontSize: 12.0,
),

4 EdgeInsets

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

提供的配置方法:

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

代码语言:javascript
复制
EdgeInsets.fromLTRB(double left, double top, double right, double bottom)

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

代码语言:javascript
复制
EdgeInsets.all(doube value)

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

代码语言:javascript
复制
EdgeInsets.only(top:0,right:0,bottom:0,left:0)

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

代码语言:javascript
复制
EdgeInsets.symmeric(vertical:0,horizontal:0),

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 TabBar
  • 2 构造函数
    • 3.1 tabs:显示的标签内容
      • 3.2 isScrollable:是否可滚动
        • 3.3 indicatorColor:指示器颜色
          • 3.4 indicatorWeight:指示器高度
            • 3.5 indicatorPadding:底部指示器的Padding
              • 3.6 indicatorSize:指示器大小计算方式,TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
                • 3.7 labelColor:选中label颜色
                  • 3.8 labelStyle:选中label的Style
                    • 3.9 labelPadding:每个label的padding值
                      • 3.10 unselectedLabelColor:未选中label颜色
                        • 3.10 unselectedLabelColor:未选中label的Style
                        • 4 EdgeInsets
                          • 4.1 分别指定四个方向的填充
                            • 4.2 所有方向均使用相同数值的填充
                              • 4.3 可以设置具体某个方向的填充(可以同时指定多个方向)
                                • 4.4 用于设置对称方向的填充,vertical指top和bottom,horizontal指left和right
                                领券
                                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档