使用Flutter也有一段时间,也写过完整的项目整理下Flutter常用的组件

Scaffold

Scaffold(
// 基础常用项
appBar:<AppBar>，//导航条
body:<Widget>， //内容区
bottomNavigationBar:<Widget>，//底部导航菜单
bottomSheet:<Widget>，//底部工作表
backgroundColor:<Color>，//当前页的背景颜色resizeToAvoidBottomInset:<boolean>，//是否调整自身大小primary:<boolean>，//是否显示在屏幕顶部extendBody:<boolean>，//是否将主体将扩展到基架的底部extendBodyBehindAppBar:<boolean>，//是否将正文的顶部与应用栏的顶部对齐
// 浮动操作按钮
floatingActionButton:<Widget>，//浮动操作按钮floatingActionButtonLocation:<Location>，//浮动操作按钮位置floatingActionButtonAnimator:<Animator>，//浮动操作按钮动画
// 在基架底部的按钮组
persistentFooterButtons:<List<Widget>>，//组件列表persistentFooterAlignment:<AlignmentDirectional>，//对齐方式
// 左侧抽屉菜单
drawer: <Widget>drawerEnable0penDragGesture:<boolean>，//是否可以通过拖动手势打开onDrawerChanged:<Function>，//抽状态改变时的回调
//右侧抽屉菜单
endDrawer:<Widget>
endDrawerEnable0penDragGesture:<boolean>，//是否可以通过手势打开onEndDrawerChanged:<Function>，//抽状态改变时的回调
//抽屉通用设置项
drawerDragStartBehavior:<Behavior>，//抽屉菜单拖动开始行为的处理方式drawerScrimColor:<Color>，//抽屉菜单打开时遮罩的颜色drawerEdgeDragWidth:<double>，//抽菜单拖拽区域的宽度
// 重构标识 ID
restorationId: <String>)

AppBar

AppBar(
primary:<boolean>，//是否是主要的
title:<widget>，//标题(默认靠近左侧)
titleSpacing:<double>，//标题的空隙
titleTextStyle:<TextStyle>
centerTitle:<boolean>，//是否将标题居中显示
leading:<Widget>,// Leading 组件
leadingWidth:<double>，// Leading 的宽度
toolbarOpacity:<double>，//导航条的透明度
toolbarHeight:<double>，//导航条的高度
toolbarTextStyle:<TextStyle>，//除了 title 之外的文本样式
automaticallyImplyLeading:<boolean>，//是否自动隐藏
Leadingactions:<List<Widget>>，//右侧操作按钮列表
flexibleSpace:<widget>，//填充剩余空间
bottom:<widget>，//用于填充导航栏底部的空间
bottomOpacity:<double>，// 底部空间的透明度
shape:<ShapeBorder>，//导航条的形状(可以改成圆角的)
excludeHeaderSemantics:<boolean>，//是否使用 Semantics 包裹标题
// 用于控制阴影
elevation:<double>，//景深(用于控制阴影的深度)
scrolledUnderElevation:<double>，//滚动到导航条底部的距离
notificationPredicate=<Function>，// Body 滚动距离通知
shadowColor:<Color>，//阴影的颜色
// 主题色调等
surfaceTintColor:<Color>，//与背景叠加的颜色
backgroundColor:<Color>，//背景颜色
foregroundColor:<Color>，//前景颜色
iconTheme:<IconThemeData>，//图标主题
actionsIconTheme:<IconThemeData>，//右侧操作按钮主题
systemOverlayStyle:<SystemUi0verlayStyle>，// 状态栏的样式
forceMaterialTransparency:<boolean>，//强制使用 Material 样式
//对于超出部分的处理
clipBehavior:<Clip>)

Container

Container(
width:<double>，// 宽度
height:<double>，// 高度
// 外间距margin:<EdgeInsets>
padding: <EdgeInsets>// 内间距
// 对齐方式alignment: <Alignment>,
child: <widget>,
/1 子节点
clipBehavior:<Clip>，//如何处理超出部分
// 样式设置color:<Color>，//背景颜色
decoration:<Decoration>，//样式装饰器
foregroundDecoration:<Decoration>，//前景装饰器
// 布局约束
constraints:<BoxConstraints>,
// 位置变换
transform:<Matrix4>
transformAlignment: <Alignment>,
)

SizedBox

// 主要用于设定一块区域的大小
SizedBox(
width:<double>， // 容器的宽
height:<double>，// 容器的高
child:<Widget>， // 内容节点
)

Center

//相较于父容器进行居中显示Center(
widthFactor:<double>， // 宽基于内容的倍数，默认为尽可能大
heightFactor:<double>，// 高基于内容的倍数，默认为尽可能大
child: <Widget>,// 内容节点
);

Row

Row(
mainAxisAlignment:<MainAxisAlignment>，//主轴对齐方式
mainAxisSize:<MainAxisSize>，// 主轴相对于父容器分配的空间
crossAxisAlignment:<CrossAxisAlignment>，//交叉轴的对其方式
textDirection:<TextDirection>，//文本布局方向
verticalDirection:<VerticalDirection>，//垂直布局子项的顺序
textBaseline:<TextBaseline>，//文本对齐基线
children:<List<Widget>>，//子控件
);

Column

Column(
mainAxisAlignment:<MainAxisAlignment>，//主轴对齐方式
mainAxisSize:<MainAxisSize>，//主轴相对于父容器分配的空间
crossAxisAlignment:<CrossAxisAlignment>，//交叉轴的对其方式
textDirection:<TextDirection>，//文本布局方向
verticalDirection:<VerticalDirection>，//垂直布局子项的顺序
textBaseline:<TextBaseline>，//文本对齐基线
children:<List<Widget>>，// 子控件

Flexible

// 基础弹性盒，可以更改子控件的分配占比;Flexible(
// 子控件占比flex: <int>
child:<Widget>，// 子控件
fit:<FlexFit>， // 对于子控件的填充方式
);
// 空白块，用于撑开不需要的空白区域Spacer(flex: <int>);
// 将子控件强制填充满剩余空间Expanded(// 子控件占比flex: <int>,child:<Widget>，//子控件
//此处是使用 Row 的布局来作演示,
// 如果是 Column 的话，把下面图旋转 98°即可;

Wrap

Wrap(
direction:<Axis>，//布局方式(水平或垂直)
alignment:<WrapAlignment>，//水平方向排列方式
runAlignment:<WrapAlignment>，//交叉轴方的对齐方式
crossAxisAlignment:<WrapCrossAlignment>，//垂直方向排列方式
spacing:<double>，//水平间隙
runSpacing:<double>，//垂直间隙
textDirection:<TextDirection>，//水平布局子项的顺序
verticalDirection:<VerticalDirection>，//垂直放置子对象的顺序
clipBehavior:<Clip>，//对于超出部分的处理方式
children:<List<Widget>>，// 子控件

AspectRatio

// 用于约束子控件的宽高比,
// 具体的尺寸依赖于父元素的容器大小;
AspectRatio(
aspectRatio:<double>，//宽高比，如:4/3，16/9;
child: <widget>,// 子控件
);

Stack

// 所有子控件以堆叠的形式显示Stack(
alignment:<AlignmentDirectional>，//子控件对齐方式
textDirection:<TextDirection>，//文本排列方向
fit:<StackFit>，// 子控件填充方式
clipBehavior:<Clip>，//对于超出部分的处理方式
children:<List<Widget>>，//子控件

Positioned

Positioned(
left: <double>,// 距离左侧的距离
top: <double>,// 距离顶部的距离
right:<double>， //距离右侧的距离
bottom:<double>，//距离底部的距离
width:<double>， //宽(如果同时具备 left/right 时可忽略)
height:<double>，//高(如果同时具备 top/bottom 时可忽略)
child:<widget>， // 子控件

ListView

ListView(
scrollDirection:<Axis>，//滚动方向(水平或垂直)
reverse:<boolean>，//是否倒序渲染
controller:<Scro11Controller>，//滚动控制器
primary:<boolean>，//否是与父级关联的主滚动视图
physics:<ScrollPhysics>，//物理滚动效果
shrinkWrap:<boolean>，//滚动视图的范围是否应由正在查看的内容确定
padding:<EdgeInsets>，//整个列表的内间距
itemExtent:<double>，//子元素的高度
prototypeItem:<Widget>,//??
addAutomaticKeepAlives:<boolean>，//是否将子项包在 AutomaticKeepAlive 中addRepaintBoundaries:<boolean>，//是否添加重复的边界
addSemanticIndexes:<boolean>，//是否将子项包在 IndexedSemantics 中
cacheExtent:<double>，//缓存数据的可用范围
children:<List<Widget>>，//列表项
semanticChildCount:<int>，//将提供语义信息的子项数
dragStartBehavior:<DragStartBehavior>，//拖动开始的行为
keyboardDismissBehavior:<dDismissBehavior>，//键盘关闭后的行为
restorationId:<String>，//重绘ID
clipBehavior:<Clip>，//超出边界的处理方式
)

GridView

GridView(
scrollDirection:<Axis>，//滚动方向(水平或垂直)
reverse:<boolean>，//是否倒序渲染
controller:<ScrollController>，//滚动控制器
primary:<boolean>，//否是与父级关联的主滚动视图
physics:<ScrollPhysics>，//物理滚动效果
shrinkWrap:<boolean>，//滚动视图的范围是否应由正在查看的内容确定
padding:<EdgeInsets>，//整个列表的内间距
gridDelegate:<GridDelegate>，//用于控制 GridView 中子项的布局
addAutomaticKeepAlives:<boolean>，//是否将子项包在 AutomaticKeepAlive 中addRepaintBoundaries:<boolean>，//是否添加重复的边界
addSemanticIndexes:<boolean>，//是否将子项包在 IndexedSemantics 中
cacheExtent:<double>，//缓存数据的可用范围
children:<List<Widget>>，// 列表项
semanticChildCount:<int>，//将提供语义信息的子项数
dragStartBehavior:<DragStartBehavior>，//拖动开始的行为
keyboardDismissBehavior:<dDismissBehavior>，//键盘关闭后的行为
restorationId:<String>，// 重绘ID
clipBehavior:<Clip>，//超出边界的处理方式

Text

// 文本标签
Text("文本标签”，style:<TextStyle>，//文本样式
strutStyle:<StructStyle>，//严格的文本样式
textAlign:<TextAlign>，// 文本对齐方式
textDirection:<TextDirection>，//文字排列方向1
ocale:<Locale>，//指定显示的国际化方言
overflow:<TextOverflow>，//文本溢出的话怎样显示
maxLines:<int>，//最多显示几行
);
// 富文本
// 属性也有很多，剩下的和 Text 差不多RichText(text:<InlineSpan>，//文本内容
// 文本输入框
// 属性太多了，知道是用于文本输入就好了
TextField(...);

Icon

// 字体图标
Icon(
<IconData>，//字体 Icon 数据
size:<double>，// 大小尺寸
color:<Color>，// 图标颜色
shadows:<List<Shadow>>，// 阴影
);
// 图片类// 网络图片
Image.network(<String>);
// 本地图片
Image.file(<String>),
Image.asset(<String>),
Image.memory(<Uint8List>);// 内存图片
// 应用内图片

0pacity

调整透明度的组件
0pacity(opacity:<double>，//子控件透明度// 子控件child: <widget>,

GestureDetector

//很重要的一个组件!
// Flutter 中没有像JS中那样在元素上绑定事件的机制,//Flutter 所有的对象皆为 widget，所以处理事件也必须用//组件包裹起来，包括其他的处理模式都大同小异。
GestureDetector(
child:<widget>，//用于处理事件的控件
onTapDown:<Function>,// 单击触发
onTapUp: <Function>,点击抬起/1
// 执行单击
onTap:<Function>
onTapCancel:<Function>，//单击取消
// 双击触发
onDoubleTapDown:<Function>，onDoubleTap:<Function>,
// 执行双击
onDoubleTapCancel:<Function>，//双击取消
//长按触发
onLongPressDown:<Function>onLongPressCancel:<Function>，
//长按取消
onLongPress:<Function>
// 执行长按
// 还有很多事件监听回调，这里就不-一罗列了。```