flutter入门-基础组件及主题风格组件
2023-09-28 14:04:52 0 举报AI智能生成
flutter入门知识分享，基础组件及主题风格组件用法详解
作者其他创作
大纲/内容
常用组件
Container
容器组件
容器组件
key
Key Container唯一标识符，用于查找更新
alignment
AlignmentGeoMetry 控制child的对齐方式，若Container或Container父节点尺寸大于child的尺寸，这个属性会起作用
padding
EdgeInsertsGeometry Decoration内容空白区域，若有child，child位于padding内部
color
Color 用来设置Container背景色，若设置foregroundDecoration，可能会遮盖color效果
decoration
Decoration 绘制在child后面的装饰，如果设置了decoration，就不能设置color属性，否则会报错，此时应该在decoration中设置颜色
foregroundDecoration
Decoration 绘制在child前面的装饰
width
double Container宽度
height
double Container宽度
constraints
BoxConstraints 添加到child上额外的约束条件
margin
EdgeInsertsGeometry 围绕在Decoration和child之外的空白区域，不属于内容区域
transform
Matrix 设置Container的变换矩阵，类型为Matrix
child
Widget Container中的内容Widget
Image
图片组件
图片组件
image
ImageProvider 抽象类，需要自己实现获取图片数据的操作
width/height
double Image显示区域的宽度和高度设置
fit
BoxFit 图片填充模式
BoxFit.fill 全图显示，可能拉伸，充满
BoxFit.contain 全图显示，显示原比例，不需要充满
BoxFit.cover 显示可能拉伸，可能裁剪，充满
BoxFit.fitWidth 显示可能拉伸，可能裁剪，宽度充满
BoxFit.fitHeight 显示可能拉伸，可能裁剪，高度充满
BoxFit.none 原始大小
BoxFit.scaleDown 效果和BoxFit.contain相似，但此属性不允许显示超过原图大小，即可小不可大
color
Color 图片颜色
colorBlendMode
BlendMode 手动处理图片，用到图层混合时，可对颜色进行混合处理。有多种模式
alignment
Alignment 控制图片的摆放位置
repeat
ImageRepeat 设置图片重复模式。
noRepeat 不重复
Repeat x和y方向重复
repeatX X方向重复
repeatY Y方向重复
centerSlice
Rect 图片被拉伸显示时，centerSlice定义的矩形区域会被拉伸。
matchTextDirection
bool matchTextDirection与Directionality配合使用。
gaplessPlayback
bool 当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。true保留；false不保留，直接空白等待下一张图片加载。
Text
文本组件
文本组件
data
String 数据为要显示的文本
maxLines
int 文本显示的最大行数
style
TextStyle 文本样式，可定义文本的字体大小、颜色、粗细等
textAlign
TextAlign 文本水平方式对齐方式
textDirection
TextDirection 文字方向
textScaleFactor
double 字体缩放系数，默认为1.0
textSpan
TextSpan 文本块，TextSpan里可以包含文本内容及样式
Icon
图标组件
图标组件
color
Color 图标颜色
icon
IconData 图标
style
TextStyle 文本样式，可定义文本的字体大小、颜色、粗细等
size
double 图标的大小，需要带上小数位，默认24.0
textDirection
TextDirection Icon组件也可以添加文本内容。
按钮组件
IconButton
图标按钮组件
图标按钮组件
alignment
Alignment 定义IconButton的Icon对其方式，默认居中
icon
Widget 展示的具体图标。
color
Color 图标组件的颜色
disabledColor
Color 图标组件禁用的颜色，默认为主题的禁用颜色，也可设置为其他颜色值
iconSize
double 图标大小，需要带上小数位
onPressed
VoidCallback 按钮按下时的事件回调
tooltip
String 按钮按下时的提示语句
RaisedButton
凸起按钮组件
凸起按钮组件
color
Color 组件的颜色
disabledColor
Color 组件禁用的颜色，默认为主题的禁用颜色，也可设置为其他颜色值
onPressed
VoidCallback 按钮按下时的事件回调
child Widget 按钮的child通常为一个Text文本组件，用来显示按钮的文本
enable
bool 按钮是否禁用
列表组件
ListView
scrollDirection
Axis 列表的排列方向，默认值为Axis.vertical垂直方向，Axis.horizontal为水平方向。
padding
EdgeInsertsGeometry 列表内部的空白区域，若有child，child位于padding内部
reverse
bool 组件排列反向，默认为false
children
List<Widget> 列表元素，List中元素全部为Widget类型
GridView
scrollDirection
Axis 滚动的方向，分为垂直和水平方向，默认为垂直方向
reverse
bool 默认是从上向下或从左向右滚动。该属性控制是否反向，默认为false
controller
ScrollController 控制child滚动时的位置
primary
bool 是否是与父节点的PrimaryScrollController所关联的主滚动视图
physics
ScrollPhysics 滚动的视图如何响应用户的输入
shrinkWrap
bool 滚动方向的滚动视图内容是否应该由正在查看的内容所决定
padding
EdgeInsertsGeometry 四周的空白区域
gridDelegate
SliverGridDelegate 控制GridView中子节点布局的delegate
cacheExtent
double 缓存区域
表单组件
Form
key
Key 组件在整个Widget树中的Key值
autovalidate bool 是否自动提交表单
child Widget 组件child只能有一个子组件
onChanged
ValueChanged FormField值改变时的回调
TextFormField
autovalidate bool 自动校验值
initialValue T 表单字段初始值
onSaved
FormFieldSettet<T> 当Form表单调用保存方法Save时回调的函数
validator
FormFieldValidator<T> Form表单验证器
Material Design
（Android风格）
（Android风格）
MaterialApp
应用组件
应用组件
title
String 应用程序标题
theme
ThemeData 应用的主题颜色
color
Color 应用的主要颜色值
home
Widget 定义当前应用打开时显示的页面
routes
Map<String, WidgetBuilder> 定义应用 页面跳转规则
initialRoutes
String 初始化路由
onGenerateRoute
RouteFactory 路由回调函数。
onLocaleChanged
系统修改语言时，会触发这个回调
navigatorObservers
List<NavigatorObservers> 导航观察器
debugShowMaterialGrid
bool 是否显示Material涉及基础布局网格，用来调试UI的工具
showPerformanceOverlay
bool 是否显示性能标签
Scaffold
脚手架组件
脚手架组件
appBar
AppBar 页面顶部组件，通常由图标和标题组成
body
Widget 当前页面所显示的主要内容
floatingActionButton
Widget 悬浮按钮
persistentFooterButtons
List<Widget> 底部固定按钮
drawer
Widget 侧边栏组件
bottomNavigationBar
Widget 底部导航栏组件
backgroundColor
Color 背景颜色
resizeToAvoidBottomPadding
bool 控制body是否重新布局来避免底部被覆盖，默认true
AppBar
应用按钮组件
应用按钮组件
leading
Widget 标题前面显示的一个组件，在首页通常显示应用logo，其他页面通常显示为返回按钮
title
Widget 标题文字
actions
List<Widget> Toolbar中显示的菜单
bottom
PreferredSizeWidget 通常是Tabbar，用来在Toolbar标题下面显示一个Tab导航栏
elevation
double 组件的z坐标顺序，默认值为4
flexibleSpace
Widget 一个显示在AppBar下方的组件，高度和Appbar一样，可实现一些特殊的效果，该属性通常在SliverAppBar中使用
backgroundColor
Color 背景色，默认值为 ThemeData.primaryColor
brightness
Brightness AppBar的亮度，有白色和黑色两种主题。默认值为 ThemeData.primaryColorBrightness
iconTheme
IconThemeData AppBar上图标的颜色、透明度和尺寸信息。默认值为 ThemeData.primaryIconTheme
textTheme
TextTheme AppBar标题文字样式
centerTitle
bool 标题是否居中显示
BottomNavigationBar
底部导航条组件
底部导航条组件
currentIndex
int 当前索引，用来切换按钮控制
fixedColor
Color 选中按钮的颜色。如果没有指定值，则使用系统主题色
iconSize
double 按钮图标大小
items
List<BottomNavigationBarItem> 底部导航条按钮集。
onTap
ValueChanged<int> 按下其中某一个按钮回调事件，需要根据返回的索引设置当前索引。
TabBar
水平选项卡及视图组件
水平选项卡及视图组件
DefaultTabController
用来组装TabBar及TabBarView
TabBar
isScrollable
bool 是否可水平移动
tabs
List<Widget> TAB选项列表
Tab
icon
Widget Tab图标
text
String Tab文本
TabBarView
controller
TabController 指定视图的控制器
children
List<Widget> 视图组件的child为一个列表，一个选项卡对应一个视图
Drawer
抽屉组件
抽屉组件
elevation
double 默认16，Material设计中组件的z坐标顺序
child
DrawerHeader
decoration
Decoration Header区域的decoration，通常用来设置背景颜色或背景图片
curve
Curve 若decoration发生变化，则会使用curve设置的变化曲线和duration设置的动画时间来做一个切换动画
child
Widget Header里面所显示的内容控件
padding
EdgeInsertsGeometry Header里面内容控件的padding值，若child为null，则这个值无效
margin
EdgeInsertsGeometry Header四周的间隙
UserAccountsDrawerHeader
margin
EdgeInsertsGeometry Header四周的间隙
decoration
Decoration Header区域的decoration，通常用来设置背景颜色或背景图片
currentAccountPicture
Widget 设置当前用户头像
otherAccountPictures
List<Widget> 设置当前用户其他账号的头像
accountName
Widget 当前用户名字
accountEmail
Widget 当前用户Email
onDetailPressed
VoidCallback accountEmail或accountEmail被点击时触发回调函数，可用来显示其他额外信息
FloatingActionButton
悬停按钮组件
悬停按钮组件
child
Widget 一般为icon，不推荐使用文字
tooltip
String 按钮提示文本
foregroundColor
Color 前景色
backgroundColor
Color 背景色
elevation
double 未点击时阴影值，默认为6.0
hignlightElevation
double 点击时阴影值，默认为12.0
onPressed
VoidCallback 点击事件回调
shape
ShapeBorder 定义按钮的形状，默认值为CircleBorder。设置shape属性时，默认的elevation将会失效
FlatButton
扁平按钮组件
扁平按钮组件
child
Widget 嵌套组件
onPressed
VoidCallback 点击事件回调
PopupMenuButton
弹出菜单组件
弹出菜单组件
child
Widget 如果child有值，则弹出菜单组件将使用此组件
icon
Icon 如果此属性有值，则弹出菜单使用此图标
itemBuilder
PopupMenuItemBuilder<T> 菜单项构造器，菜单项可为任意类型，文本、图标均可
onSelected
PopupMenuItemSelected<T> 当某项菜单被选中时回调的方法
SimpleDialog
简单对话框组件
简单对话框组件
children
List<Widget> 对话框子项，典型的应用是一个列表
子主题
title
Widget 对话框标题，通常是一个文本组件
contentPadding
EdgeInsertsGeometry 内容部分间距大小
titlePading
EdgeInsertsGeometry 标题部分间距大小
AlertDialog
提示对话框组件
提示对话框组件
actions
List<Widget> 对话框底部操作按钮，可使用FlatButton。如 确定、取消等
title
Widget 对话框标题，通常是一个文本组件
contentPadding
EdgeInsertsGeometry 内容部分间距大小
content
Widget 内容部分，可用SingleChildScrollView进行包裹，通常为对话框的提示内容
titlePadding
EdgeInsertsGeometry 标题部分间距大小
SnackBar
轻量提示组件
轻量提示组件
actions
SnackBarAction 提示消息里执行的动作，如 用户想撤销时可以点击操作
animation
Animation<double> 给组件添加动画效果
content
Widget 提示消息内容，通常为文本组件
duration
Duration 动画执行时长，默认4.0秒
backgroundColor
Color 消息面板的背景色
TextField
文本框组件
文本框组件
maxLength
int 最大长度
maxLines
int 最大行数
autoCorrect
bool 是否自动更正
autofocus
bool 是否自动对焦
obscureText
bool 是否密码
textAlign
TextAlign 文本对齐方式
style
TextStyle 输入文本的样式
inputFormatters
List<TextInputFormatter> 允许的输入格式
onChanged
ValueChanged<String> 内容改变时的回调
onSubmitted
ValueChanged<String> 内容提交时的回调
enabled
bool 是否禁用
Card
卡片组件
卡片组件
child
Widget 组件的子元素，任意Widget都可以
margin
EdgeInsertsGeometry 围绕在decoration和child之外的空白区域，不属于内容区域
shape
ShapeBorder Card的阴影效果，默认的阴影效果为圆角的长方形边RoundedRectangleBorder。弧度为4.0
Cupertino
（iOS风格）
（iOS风格）
CupertinoActivityIndicator
加载指示器组件
加载指示器组件
radius
double 记载图形的半径值，默认值10.0。值越大图形越大
animating
bool 是否播放加载动画，通常用来做动画控制处理。
CupertinoAlertDialog
对话框组件
对话框组件
actions
List<Widget> 对话框底部操作按钮。如 确定、取消
title
Widget 对话框标题，通常是一个文本组件
content
Widget 内容部分，通常为对话框的提示内容
CupertinoButton
按钮组件
按钮组件
color
Color 组件的颜色
disabledColor
Color 组件的禁用颜色，默认为主题的禁用颜色ThemeData.disabledColor
onPressed
VoidCallback 按钮点击事件回调
child
Widget 通常为一个Text文本组件，用来显示按钮的文本
enabled
bool 按钮是否为禁用状态
Cupertino
导航组件集
导航组件集
CupertinoTabScaffold
选项卡组件
选项卡组件
TabBar
CupertinoTabBar 选项卡按钮，通常为图标+文本
tabBuilder
IndexedWidgetBuilder 选项卡视图构造器
CupertinoTabBar
选项卡按钮组件
选项卡按钮组件
items
List<BottomNavigationBarItem> 选项卡按钮数据集合，通常为图标+文本
backgroundColor
Color 选项卡按钮背景色
activeColor
Color 选中的选项卡按钮前景色
iconSize
double 选项卡图标大小
CupertinoTabView
选项卡视图组件
选项卡视图组件
builder
WidgetBuilder 选项卡视图构造器
routes
Map<String, WidgetBuilder> 选项卡视图路由
CupertinoPageScaffold
页面基本布局结构组件
页面基本布局结构组件
backgroundColor
Color 页面背景色
navigationBar
ObstructingPreferredSizeWidget 顶部导航栏按钮，包含左中右三个子组件，如 返回按钮
child
Widget 页面的主要内容
CupertinoNavigationBar
导航栏结构组件
导航栏结构组件
middle
Widget 导航栏中间组件，通常为页面标题
trailing
Widget 导航栏右边组件，通常为菜单按钮
leading
Widget 导航栏左边组件，通常为返回按钮
0 条评论
下一页
