Flutter组件大全(超详细)
2021-03-28 15:47:21 2 举报AI智能生成
Flutter组件大全
作者其他创作
大纲/内容
StatelessWidget
方法
Widget build(BuildContext context)
StatefulWidget
方法
createState()
结构
入口Widget
MaterialApp
属性
title
(String)
标题
home
(Widget)
主页
进入程序后的第一个页面
routes
(map)
路由
声明程序中有哪个通过Navigation.of(context).pushNamed跳转的路由
参数以键值对的形式传递
key:路由名字
value:对应的Widget
routes: {
'/home':(BuildContext context) => HomePage(),
'/home/one':(BuildContext context) => OnePage(),
//....
},
navigator
参考
参考1
标准应用界面结构Widget
Scaffold
提供了默认的导航栏、标题和包含主屏幕widget树的body属性
属性
appBar
(AppBar)
body
(Widget)
floatingActionButton
presistentFotterButtons
drawer
(Drawer)
左侧抽屉
enddrawer
(Drawer)
右侧抽屉
backgroundColor
resizeToAvoidBottomPadding
顶部Bar
AppBar
属性
title
(Text)
actions
(List<Widget>)
侧边栏(抽屉)
Drawer
属性
child
底部导航
BottomNavigationBar
DrawerHeader
decoration
child
SnackBar
内容
Text
属性
stytle
(TextStyle)
文本样式
textAlign
overflow
（TextOverflow）
截断方式
softWrap
maxLines
最大行数
RichText
属性
text
(TextSpan)
textAlign
TextSpan
属性
text
(String)
style
(TextStyle)
TextField
属性
decoration
(InputDecoration)
labelText
(String)
labelStyle
(TextStyle)
hintText
输入为空时提示
(String)
controller
(TextEditingController)
textAlignVertical
垂直对齐方式
(TextAlignVertical)
toolbarOptions
长安是弹出菜单
(ToolbarOptions)
showCursor
(bool)
是否显示光标
cursorWith
(int)
cursorRadius
(Radius)
cursorColor
(Color)
obscureText
(bool)
是否密码框
inputFormatters
限制输入类型
例:
WhitelistingTextInputFormatter(RegExp("[a-zA-Z]"))
事件
onchange
onSubbmitted
onTap
图片
Image
属性
width
(int)
height
(int)
fit
(BoxFit)
方法
Image.network(url)
网络图片
frameBuilder
(AnimatedOpacity)
Image.asset(localfilepath)
assets下图片
Image.file(File(filepath))
设备上图片
FadeInImage
方法
FadeInImage.assetNetwork
placeholder
(String)
image
(String)
fit
(BoxFit)
AssetImage
Icon
属性
color
size
按钮
IconButton
属性
icon
事件
onPressed
TextButton
ElevatedButton
OutlineButton
带边框按钮
过时
RaisedButton
过时
建议用ElevatedButton
Material风格按钮
属性
child
(Text)
事件
onPressed
FlatButton
扁平按钮
过时
建议用TextButton
按钮组
ButtonBar
属性
chindren
Radio
单选
属性
value
本身value
groupValue
组值
当相等时则为选中状态
事件
onChanged
RadioList
属性
title
value
groupValue
事件
onChanged
CheckBox
勾选框
属性
value
(boolean)
activeColor
(Color)
矩形区域颜色
checkColor
(Color)
对勾颜色
事件
onChanged
CheckboxListTitle
属性
title
(String)
value
(bool)
controlAffinity
(ListTileControlAffinity)
subtitle
(Text)
子标题
secondary
(Icon)
第二图标
Slider
属性
value
(double)
min
max
divisions
label
(String)
activeColor
inactiveColor
事件
onchange
RangeSlider
属性
values
(RangeValues)
labels
min
max
divisions
事件
onchange
Switch
开关组件
属性
value
(bool)
activeColor
(Color)
activeTrackColor
(Color)
activeThumbImage
(AssetImage)
Switch
Switch和ListTile的组合
属性
title
(String)
LinearProgressIndicator
水平进度指示器
属性
value
(double)
backgroundColor
（Color)
valueColor
分隔线
Divider
ListTitle
属性
title
(Text)
tailing
(Icon)
方法
onTap
滚动容器
ListView
属性
padding
(EdgeInsets)
GridView
属性
scrollDirection
(Axis)
reverse
(bool)
controller
(ScrollController)
primary
(bool)
physics
(ScrollPhysics)
skrinkWrap
(bool)
gridDelegate
(SliverGridDelegate)
控制子组件如何排列
addAutomaticKeepAlives
(bool)
addRepaintBoundaries
(bool)
cacheExtent
(double)
children
(List<Widget>)
方法
GridView.builder()
gridDelegate
itemCount
itemBuilder
GridView.extent()
maxCrossAxisExtent
子元素最大长度
childAspectRatio
宽高比
GridView.count()
crossAxisCount
横轴数量
childAspectRatio
宽高比
children
相关类
SliverGridDelegate
SliverGridDelegateWithFixedCrossAxisCount
实现了一个横轴为固定数量子元素的layout算法
属性
crossAxisCount
(double)
横轴子元素数量
mainAxisSpacing
(double)
主轴方向间距
crossAxisSpacing
(double)
横轴方向子元素间距
childAspectRatio
(double)
子元素在横轴长度和主轴长度的比例
SliverGridDelegateWithMaxCrossAxisExtent
实现了一个横轴子元素为固定最大长度的layout算法
属性
maxCrossAxisExtent
(double)
横轴最大长度
mainAxisSpacing
（double)
主轴间距
crossAxisSpacing
（double)
横轴间距
childAspectRatio
（double)
宽高比
参考文章
Flutter实战
PageView
表格
Table
属性
border
(TableBorder)
children
相关
表格行
TableRow
边框
TableBorder
数据表
DataTable
属性
columns
(List<DataColumn>)
rows
相关类
DataColumn
属性
label
(Text)
布局容器
容器组件
Container
属性
width
(double?)
宽度
height
(double?)
高度
alignment
(AlignmentGeometry)
居中对齐
padding
(EdgeInsetsGeometry)
内边距
margins
(EdgeInsetsGeometry)
外边距
color
(Color)
背景色
child
(Widget)
子节点
decoration
(Decoration)
修饰器
foregroundDecoration
(Decoration)
constraints
(BoxConstraints)
transform
Matrix4
transformAlignment
(AlignmentGeometry)
clipBehavior
(Clip)
ConstrainedBox
设置最大/小宽高
UnconstrainedBox
SizedBox
固定大小
属性
width
height
AspectRatio
固定宽高比
FractionallySizedBox
占父组件百分比
LimitedBox
没有父组件约束
固定宽高
Column
垂直列布局
属性
crossAxisAlignment
交叉轴对齐方式
CrossAxisAlignment
.start
开始对齐
结尾留空
.center
中间对齐
两边留空
.end
底部对齐
开头留空
.strectch
拉伸
mainAxisAlignment
子主题
MainAxisAlignment
.start
开始
结尾留空
.center
中间
两边留空
.end
结束
开头留空
.spaceEvenly
12间距= 23间距
假设1 2 3 三块内容
.spaceBetween
两边间距=12间距=23间距
.spaceAround
两边间距=12间距/2=23间距/2
mainAxisSize
主轴尺寸
MainAxsSize
max
默认值
尽可能大
min
尽可能小
textDirection
TextDirecction
.ltr
同MainAxisAlignment.start
.rtl
同MainAxisAlignment.end
children
Row
水平行布局
属性同Column
Center
属性
child
Stack
层叠布局
属性
alignment
children
fit
(StackFit)
IndexStack
属性
index
children
Wrap
流式布局
属性
children
direction
(Axis)
alignment
主轴对齐方式,作用每一行
(WrapAlignment)
runAlignment
交叉轴上每一行作为一个整体
textDirection
(TextDirection)
verticalDirection
(VerticalDirection)
Card
ListTitle
属性
titile
subtitle
leading
Expanded
Flexible
属性
child
flex
权重
(int)
Spacer
SafeArea
属性
child
安全区域
解决了刘海屏问题
SafeArea通过MediaQuery来检测屏幕尺寸，使应用程序的大小能与屏幕适配。
然后返回了一个Padding Widget 来包裹住我们编写的页面。这样我们的页面就不会被异形屏幕给遮挡住了。
然后返回了一个Padding Widget 来包裹住我们编写的页面。这样我们的页面就不会被异形屏幕给遮挡住了。
修饰
RotatedBox
功能
旋转其他子Widget
在控件layout的时候就对其子widget进行旋转处理,所需要的空间大小跟旋转子widget所需要的空间大小一样
RotatedBox和Transform.rotate功能相似，它们都可以对子widget进行旋转变换，
但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子widget的位置和大小。
但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子widget的位置和大小。
属性
quarterTurns
旋转的角度为90的倍数,正值为顺时针,负数为逆时针
child
BoxDecoration
属性
color
image
border
(BoxBorder)
borderRadius
boxShadow
gradient
backgroundBlendMode
shape
ThemeData
主题
属性
primaryColor
textTheme
CircleAvatar
属性
backgroundImage
radius
InputDecoration
属性
icon
(Icon)
框左外图标
prefixIcon
(Icon)
框里左图标
suffixIcon
(Icon)
框里尾部图标
helperText
(String)
helperStyle
(TextStyle)
helperMaxLines
(int)
errorText
(String)
errorStyle
(TextStyle)
errorMaxLines
(int)
errorBorder
(OutlineInputBorder)
counterText
(String)
字数统计显示
fill
(bool)
是否要用填充色填充
fillColor
(Color)
enbledBorder
(OutlineInputBorder)
focuseBorder
(OutlineInputBorder)
动画
AlwaysStoppedAnimation
其他
EdgeInsets
方法
.all()
(double)
.symmetric()
horizontal
(double)
vertical
(double)
.only()
left
(double)
right
(double)
top
(double)
bottom
(double)
.fromLTRB()
(double,double,double,double)
Colors
Icons
图标列表
文档链接
IconData
TextStyle
属性
fontWeight
color
颜色
fontSize
大小
fontWeight
粗细
FontWeight
w100~w900
.bold
(w700)
fontStyle
斜体
FontStyle
.italic
自定义字体
BoxFit
fill
平铺填充
cover
等比拉伸 直到两边充满
contain
等比拉伸 直到一边充满
fitWidth
fitHeight
none
裁剪与aligment有关
scaleDown
colorBleanMode
repeat
(ImageRepeat)
State
OutlineInputBorder
borderSide
(BorderSide)
borderRadius
(BorderRadius)
BorderSide
属性
color
(Color)
BorderRadius
方法
.all
Radius
方法
circular
TextEditingController
方法
dispose()
ToolbarOptions
属性
copy
(bool)
cut
(bool)
paste
(bool)
selectAll
(bool)
BuildContext
Positioned
属性
left
right
bottom
top
child
Fluttertoast
方法
Fluttertoast.showToast()
msg
(String)
gravity
(ToastGravity)
timeInSecForIosWeb
(double)
backgroundColor
(Color)
textColor
(Color)
fontSize
(double)
Theme
BoxBorder
属性
top
bottom
BorderSide
属性
color
width
style
BorderStyle
none
solid
路由
Navigator
方法
Navigator.pushNamed(context,"/路由名")
路由跳转
Navigator.of(context).push()
MaterialPageRoute
属性
builder
常量
TextAlign
.center
.left
.right
.justify
两端对齐
.start
前端对齐
end
末端对齐
TextAlignVertical
.center
同TextAlign
TextOverflow
.ellipsis
省略号结尾
.clip
直接裁剪
.fade
越来越透明
.visible
可见,溢出
ListTileControlAffinity
.leaading
勾选框在开头
.tailing
勾选框在结尾
.platform
根据平台确定
ImageRepeat
.repeatX
.repeatY
.repeat
.noRepeat
StackFit
.loose
.expand
.center
AlignmentDirectional
.center
Axis
方向
.vertical
水平方向
WrapAlignment
.start
.center
.end
.spaceBetween
.spaceEvenly
.spaceAround
VerticalDirection
.up
ToastGravity
.BOTTOM
触摸
GestureDetector
收藏
收藏
0 条评论
下一页
