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),

复制

相关文章
|
23天前
|
索引
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
27 0
|
23天前
|
Android开发 iOS开发
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
50 0
|
23天前
|
开发者
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
25 0
|
23天前
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
25 0
|
5月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget
|
Web App开发 JavaScript 应用服务中间件
Flutter Web网站搭建教程
曾几何时,你有没有一个搭个人网站的冲动,我这个想法在我第一次开始写博客就有了,可就是没有搭起来,直到我看到flutter有了web支持,我就在想,是时候了,必须且一定要做,于是乎我就搭建了现在的网站ibaozi.cn
394 0
Flutter Web网站搭建教程
|
XML Java Android开发
Flutter(四)——基础组件
Flutter(四)——基础组件
310 0
Flutter(四)——基础组件
|
存储 索引
Flutter从0到1实现高性能、多功能的富文本编辑器(基础实战篇)
在上一章中,我们分析了一个富文本编辑器需要有哪些模块组成。在本文中,让我们从零开始,去实现自定义的富文本编辑器。
|
Android开发 开发者
Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)
在上一节我们已经讲了Flutter路由管理与Navigator基础使用,有兴趣或者对这一块还不太了解的同学可以去看看。 但是仅仅这样时不够的 在实际项目中这些怎么会够呢???现在让我们来看看这些骚操作…
Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)
|
前端开发 程序员
Flutter路由管理与Navigator基础使用
Flutter的路由管理与Navigator基础使用
Flutter路由管理与Navigator基础使用