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