Flutter基础widgets教程-TabBar篇
时间:2022-07-26
本文章向大家介绍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),
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 腾讯云智能语音小程序插件实现实时语音识别
- 我还在生产玩 JDK7,JDK 15 却要来了!|新特性尝鲜
- 36个助你成为专家需要掌握的JavaScript概念
- Bulehero 蠕虫病毒安全分析报告
- 一句话加速grep近30倍
- 正道的光!这有个用TensorFlow做的小黄图过滤器
- Bytom侧链Vapor源码浅析-节点出块过程
- Logstash: 启动监控及集中管理
- 渗透测试中文件上传技巧
- PHP常见过WAF webshell及最简单检测方法
- 基于PhantomJS的动态爬虫引擎
- XSS Cheat Sheet
- 免费代理池的实现与优化
- 基于Django和clean-blog前端框架的博客系统
- 应急响应笔记之Linux篇