经常使用的flutter组件合集

pp

属性	属性值类型	描述
navigatorKey	GlobalKey<NavigatorState>	导航键
home	Widget	应用打开时显示的页面
routes	Map<String, WidgetBuilder>	应用程序顶级路由表
initialRoute	String	初始路由
onGenerateRoute	RouteFactory	路由管理拦截器
onGenerateInitialRoutes	InitialRouteListFactory	生成初始化路由
onUnknownRoute	onUnknownRoute	当onGenerateRoute无法生成路由时调用
title	String	应用切换时显示的标题
color	Color	程序切换应用图标背景色（仅安卓）
theme	ThemeData	主题颜色
darkTheme	ThemeData	暗黑模式主题颜色
themeMode	ThemeMode	哪种模式主题（默认跟随系统）
debugShowCheckedModeBanner	bool	是否显示调试模式右上角debug
showSemanticsDebugger	bool	显示组件占位大小

Scaffold

属性	属性值类型	描述
appBar	Widget	顶部导航
body	Widget	主要内容
floatingActionButton	Widget	悬浮按钮
floatingActionButtonLocation	FloatingActionButtonLocation	悬浮按钮的位置
floatingActionButtonAnimator	FloatingActionButtonAnimator	悬浮按钮的动画
persistentFooterButtons	List<Widget>	页面底部的一组按钮
drawer	Widget	左侧抽屉菜单
onDrawerChanged	DrawerCallback	左侧抽屉菜单改变事件
endDrawer	Widget	右侧抽屉菜单
onEndDrawerChanged	DrawerCallback	右侧抽屉菜单改变事件
bottomNavigationBar	Widget	底部导航
bottomSheet	Widget	body下方，底部控件上方，内容不会被键盘遮住
backgroundColor	Color	背景颜色
resizeToAvoidBottomInset	bool	true可防止键盘遮挡
drawerScrimColor	Color	侧边栏弹出时非遮盖层主页面的颜色
drawerEdgeDragWidth	double	侧边栏弹出时非遮罩层的宽度

AppBar

属性	属性值类型	描述
leading	Widget	左侧显示内容，如返回键
leadingWidth	double	默认56，左侧leading宽度
automaticallyImplyLeading	bool	true情况下二级页面leading为空会默认显示返回键
title	Widget	导航栏标题
centerTitle	bool	标题是否居中
actions	List	导航栏右侧显示内容
bottom	Widget	导航栏底部的控件
elevation	double	导航栏下方阴影大小
shadowColor	Color	导航栏下方阴影颜色
backgroundColor	Color	导航栏的背景颜色
foregroundColor	Color	导航栏中文本和图标的颜色
iconTheme	IconThemeData	导航栏图标的颜色、透明度、大小
actionsIconTheme	IconThemeData	导航栏右侧图标的颜色、透明度、大小
titleSpacing	double	title内容的间距，0将占用全部空间

TabBar

属性	属性值类型	描述
tabs	List	两个或多个的Tab列表
controller	TabController	控制Tab的控制器
isScrollable	bool	Tab栏是否可以水平滚动
indicatorColor	Color	Tab指示器的颜色
indicatorWeight	double	Tab指示器线条的粗细
indicatorPadding	EdgeInsetsGeometry	设置选中Tab指示器间距
indicator	Decoration	Tab指示器的外观
indicatorSize	TabBarIndicatorSize	Tab指示器的大小
labelColor	Color	选中Tab文字的颜色
labelStyle	TextStyle	选中Tab文字的样式
labelPadding	EdgeInsetsGeometry	选中Tab文字的间距
unselectedLabelStyle	TextStyle	未选中Tab文字的样式
unselectedLabelColor	Color	未选中Tab文字的颜色
onTap	ValueChanged	Tab单击事件

Padding、AnimatedPadding

Padding增加组件间的间距，AnimatedPadding用于Padding需要改变大小并且增加动画效果

//paddingValue值改变会有动画效果AnimatedPadding(
   padding: EdgeInsets.all(paddingValue),
   duration: Duration(milliseconds: 1000),
   curve: Curves.easeInOut,
   child: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 4,
      color: Colors.blue,
   ),
   onEnd: () {
      print("动画结束");
    },),

Align、AnimatedAlign

Align用来确定子控件在布局中的位置，如居中、左上等多个对齐方式。

ConstrainedBox、BoxConstraints

ConstrainedBox

属性	属性值类型	描述
constraints	BoxConstraints	对子组件添加额外约束

BoxConstraints

属性	属性值类型	描述
minWidth	double	最小宽度，默认0
maxWidth	double	最大宽度，默认double.infinity
minHeight	double	最小高度，默认0
maxHeight	double	最大高度，默认double.infinity

SizeBox、FittedBox

SizeBox

属性	属性值类型	描述
width	double	宽度
height	double	高度

FittedBox当子组件的内容超出父组件大小时，FittedBox的作用是对子组件进行缩放和对齐方式的设置。

属性	属性值类型	描述
fit	BoxFit	子组件缩放位置调整
alignment	AlignmentGeometry	组件对齐方式
clipBehavior	Clip	剪辑子组件内容的方式

OverflowBox、SizedOverflowBox

OverflowBox允许子组件超出父组件的边界

属性	属性值类型	描述
alignment	AlignmentGeometry	子组件对齐方式
minWidth	double	最小宽度
maxWidth	double	最大宽度
minHeight	double	最小高度
maxHeight	double	最大高度

SizedOverflowBox也允许子组件超出父组件的边界，但是它与OverflowBox不同的在于还可以对子组件进行尺寸部分的限制。

属性	属性值类型	描述
size	Size	尺寸大小限制
alignment	AlignmentGeometry	子组件对齐方式
child	Widget	子组件

AspectRatio、FractionallySizedBox

AspectRatio主要作用是调整子组件设定的宽高比，如播放视频时16:9或4:3等，aspectRatio纵横比例

AspectRatio(
   aspectRatio: 16 / 9,
   child: Container(
      color: Colors.orangeAccent,
   ),),

FractionallySizedBox当我们需要一个控件的尺寸是相对尺寸时，比如当前按钮的宽度占父组件的70%

 FractionallySizedBox(
    alignment: Alignment.topLeft,
    widthFactor: 1.5, //宽度为父组件的1.5倍    heightFactor: 0.5, //高度为父组件的0.5倍    child: new Container(
       color: Colors.red,
    ),),

Container、AnimatedContainer

属性	属性值类型	描述
color	Color	背景颜色
child	Widget	子组件
width	double	宽度
height	double	高度
alignment	AlignmentGeometry	子组件的对齐方式
padding	EdgeInsetsGeometry	内边距
margin	EdgeInsetsGeometry	外边距
decoration	BoxDecoration	背景装饰
foregroundDecoration	BoxDecoration	前景装饰
constraints	BoxConstraints	盒子的额外约束
transform	Matrix4	组件旋转等变化
transformAlignment	AlignmentGeometry	组件变化的原点

AnimatedContainer是Container的动画版本，需要在改变宽高、颜色等需要增加动画效果时使用

ClipRect、ClipRRect

ClipRect给子组件裁剪为给定的矩形大小

属性	属性值类型	描述
clipper	CustomClipper	自定义裁剪
clipBehavior	Clip	子组件边缘裁剪的方式，默认Clip.hardEdge
child	Widget	子组件

ClipRRect使用圆角矩形剪辑子组件

属性	属性值类型	描述
borderRadius	BorderRadius	裁剪的边框圆角大小
clipper	CustomClipper	自定义裁剪器
clipBehavior	Clip	子组件边缘裁剪的方式，默认Clip.hardEdge
child	Widget	子组件

ClipOval、ClipPath

ClipOval是裁剪子组件为椭圆的组件，属性同ClipRect

ClipPath是可以使用路径裁剪的组件，属性同ClipRect

Center

对子组件进行居中的时候使用

 

 

来源:https://www.apicloud.com/blogDetails/8970