状态组件:
1.1 StatefulWidget:
@override
StatefulElement createElement() => StatefulElement(this);
@protected
State createState();
enum _StateLifecycle {
created,
initialized,
ready,
defunct,
}
void initState(){}
void didUpdateWidget(covariant T oldWidget){}
void reassemble(){}
void setState(VoidCallback fn){}
void deactivate(){}
void dispose(){}
void build(){}
void didChangeDependencies(){}
void debugFillProperties(DiagnosticPropertiesBuilder properties){}
1.2 StatelessWidget:
@override
StatelessElement createElement() => StatelessElement(this);
@protected
Widget build(BuildContext context);
1.基础 Widgets
1.1 Container:
一个拥有绘制、定位、调整大小的 widget
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
1.2 Row:
在水平方向上排列子widget的列表
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
direction: Axis.horizontal,
1.3 Column:
在垂直方向上排列子widget的列表
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
direction: Axis.vertical,
1.4 Image:
一个显示图片的widget
@required this.image,
this.frameBuilder,
this.loadingBuilder,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
1.5 Text:
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
单一格式的文本
1.6 Icon:
一个 Material Design中的 icon
this.icon, {
Key key,
this.size,
this.color,
this.semanticLabel,
this.textDirection,
}
1.7 RaisedButton:
一个凸起的材质矩形按钮
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
double elevation,
double focusElevation,
double hoverElevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
Widget child,
1.8 Scaffold
Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
1.9 Appbar:
一个Material Design应用程序栏,由工具栏和其他可能的widget(如TabBar和FlexibleSpaceBar)组成
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,
this.bottom,
this.elevation,
this.shape,
this.backgroundColor,
this.brightness,
this.iconTheme,
this.actionsIconTheme,
this.textTheme,
this.primary = true,
this.centerTitle,
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
2.0 FlutterIcon:
Flutter logo, 以widget形式. 这个widget遵从IconTheme
2.1 Placeholder:
一个绘制了一个盒子的的widget,代表日后有widget将会被添加到该盒子中
2.Material组件
App结构和导航
2.1 Scaffold:
Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
this.resizeToAvoidBottomPadding,
this.resizeToAvoidBottomInset,
this.primary = true,
this.drawerDragStartBehavior = DragStartBehavior.start,
this.extendBody = false,
this.drawerScrimColor,
this.drawerEdgeDragWidth,
2.2 Appbar:
一个Material Design应用程序栏,由工具栏和其他可能的widget(如TabBar和FlexibleSpaceBar)组成
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,
this.bottom,
this.elevation,
this.shape,
this.backgroundColor,
this.brightness,
this.iconTheme,
this.actionsIconTheme,
this.textTheme,
this.primary = true,
this.centerTitle,
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
2.3 BottomNavigationBar:
底部导航条,可以很容易地在tap之间切换和浏览顶级视图
@required this.items,
this.onTap,
this.currentIndex = 0,
this.elevation = 8.0,
BottomNavigationBarType type,
Color fixedColor,
this.backgroundColor,
this.iconSize = 24.0,
Color selectedItemColor,
this.unselectedItemColor,
this.selectedIconTheme = const IconThemeData(),
this.unselectedIconTheme = const IconThemeData(),
this.selectedFontSize = 14.0,
this.unselectedFontSize = 12.0,
this.selectedLabelStyle,
this.unselectedLabelStyle,
this.showSelectedLabels = true,
bool showUnselectedLabels,
2.4 TabBar:
一个显示水平选项卡的Material Design widget
@required this.tabs,
this.controller,
this.isScrollable = false,
this.indicatorColor,
this.indicatorWeight = 2.0,
this.indicatorPadding = EdgeInsets.zero,
this.indicator,
this.indicatorSize,
this.labelColor,
this.labelStyle,
this.labelPadding,
this.unselectedLabelColor,
this.unselectedLabelStyle,
this.dragStartBehavior = DragStartBehavior.start,
this.onTap,
2.5 TabBarView
显示与当前选中的选项卡相对应的页面视图。通常和TabBar一起使用
@required this.children,
this.controller,
this.physics,
this.dragStartBehavior = DragStartBehavior.start,
2.6 MaterialApp:
一个方便的widget,它封装了应用程序实现Material Design所需要的一些widget
this.navigatorKey,
this.home,
this.routes = const <String, WidgetBuilder>{},
this.initialRoute,
this.onGenerateRoute,
this.onUnknownRoute,
this.navigatorObservers = const <NavigatorObserver>[],
this.builder,
this.title = '',
this.onGenerateTitle,
this.color,
this.theme,
this.darkTheme,
this.themeMode = ThemeMode.system,
this.locale,
this.localizationsDelegates,
this.localeListResolutionCallback,
this.localeResolutionCallback,
this.supportedLocales = const <Locale>[Locale('en', 'US')],
this.debugShowMaterialGrid = false,
this.showPerformanceOverlay = false,
this.checkerboardRasterCacheImages = false,
this.checkerboardOffscreenLayers = false,
this.showSemanticsDebugger = false,
this.debugShowCheckedModeBanner = true,
2.7 WidgetsApp:
一个方便的类,它封装了应用程序通常需要的一些widget
this.navigatorKey,
this.onGenerateRoute,
this.onUnknownRoute,
this.navigatorObservers = const <NavigatorObserver>[],
this.initialRoute,
this.pageRouteBuilder,
this.home,
this.routes = const <String, WidgetBuilder>{},
this.builder,
this.title = '',
this.onGenerateTitle,
this.textStyle,
@required this.color,
this.locale,
this.localizationsDelegates,
this.localeListResolutionCallback,
this.localeResolutionCallback,
this.supportedLocales = const <Locale>[Locale('en', 'US')],
this.showPerformanceOverlay = false,
this.checkerboardRasterCacheImages = false,
this.checkerboardOffscreenLayers = false,
this.showSemanticsDebugger = false,
this.debugShowWidgetInspector = false,
this.debugShowCheckedModeBanner = true,
this.inspectorSelectButtonBuilder,
2.8 Drawer:
从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板
this.elevation = 16.0,
this.child,
this.semanticLabel,
按钮
2.9 RaisedButton:
Material Design中的button, 一个凸起的材质矩形按钮
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
double elevation,
double focusElevation,
double hoverElevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
Widget child,
3.0 FloatingActionButton:
一个圆形图标按钮,它悬停在内容之上,以展示应用程序中的主要动作
this.child,
this.tooltip,
this.foregroundColor,
this.backgroundColor,
this.focusColor,
this.hoverColor,
this.splashColor,
this.heroTag = const _DefaultHeroTag(),
this.elevation,
this.focusElevation,
this.hoverElevation,
this.highlightElevation,
this.disabledElevation,
@required this.onPressed,
this.mini = false,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.materialTapTargetSize,
this.isExtended = false,
3.1 FlatButton:
一个扁平的Material按钮
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
@required Widget child,
3.2 IconButton:
一个Material图标按钮,点击时会有水波动画
this.iconSize = 24.0,
this.padding = const EdgeInsets.all(8.0),
this.alignment = Alignment.center,
@required this.icon,
this.color,
this.focusColor,
this.hoverColor,
this.highlightColor,
this.splashColor,
this.disabledColor,
@required this.onPressed,
this.focusNode,
this.autofocus = false,
this.tooltip,
3.3 PopupMenuButtton:
当菜单隐藏式,点击或调用onSelected时显示一个弹出式菜单列表
3.4 ButtonBar:
水平排列的按钮组
this.alignment = MainAxisAlignment.end,
this.mainAxisSize = MainAxisSize.max,
this.children = const <Widget>[],
输入框和选择框
3.5 TextField:
文本输入框
this.controller,
this.focusNode,
this.decoration = const InputDecoration(),
TextInputType keyboardType,
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.strutStyle,
this.textAlign = TextAlign.start,
this.textAlignVertical,
this.textDirection,
this.readOnly = false,
ToolbarOptions toolbarOptions,
this.showCursor,
this.autofocus = false,
this.obscureText = false,
this.autocorrect = true,
this.maxLines = 1,
this.minLines,
this.expands = false,
this.maxLength,
this.maxLengthEnforced = true,
this.onChanged,
this.onEditingComplete,
this.onSubmitted,
this.inputFormatters,
this.enabled,
this.cursorWidth = 2.0,
this.cursorRadius,
this.cursorColor,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
this.dragStartBehavior = DragStartBehavior.start,
this.enableInteractiveSelection = true,
this.onTap,
this.buildCounter,
this.scrollController,
this.scrollPhysics,
3.6 Checkbox:
复选框,允许用户从一组中选择多个选项
@required this.value,
this.tristate = false,
@required this.onChanged,
this.activeColor,
this.checkColor,
this.materialTapTargetSize,
3.7 Radio:
单选框,允许用户从一组中选择一个选项
@required this.value,
@required this.groupValue,
@required this.onChanged,
this.activeColor,
this.materialTapTargetSize,
3.8 Switch:
On/off 用于切换一个单一状态
@required this.value,
@required this.onChanged,
this.activeColor,
this.activeTrackColor,
this.inactiveThumbColor,
this.inactiveTrackColor,
this.activeThumbImage,
this.inactiveThumbImage,
this.materialTapTargetSize,
this.dragStartBehavior = DragStartBehavior.start,
3.9 Slider:
滑块,允许用户通过滑动滑块来从一系列值中选择
@required this.value,
@required this.onChanged,
this.onChangeStart,
this.onChangeEnd,
this.min = 0.0,
this.max = 1.0,
this.divisions,
this.label,
this.activeColor,
this.inactiveColor,
this.semanticFormatterCallback,
4.0 Date & Time Pickers
日期&时间选择器
对话框、Alert、Panel
4.1 SimpleDialog:
简单对话框可以显示附加的提示或操作
this.title,
this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
this.children,
this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
this.backgroundColor,
this.elevation,
this.semanticLabel,
this.shape,
4.2 AlertDialog:
一个会中断用户操作的对话款,需要用户确认
this.title,
this.titlePadding,
this.titleTextStyle,
this.content,
this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
this.contentTextStyle,
this.actions,
this.backgroundColor,
this.elevation,
this.semanticLabel,
this.shape,
4.3 BottomSheet:
BottomSheet是一个从屏幕底部滑起的列表(以显示更多的内容)。你可以调用showBottomSheet()或showModalBottomSheet弹出
this.animationController,
this.enableDrag = true,
this.backgroundColor,
this.elevation,
this.shape,
@required this.onClosing,
@required this.builder,
4.4 ExpansionPanel:
@required this.headerBuilder,
@required this.body,
this.isExpanded = false,
this.canTapOnHeader = false,
4.5 SnackBar:
具有可选操作的轻量级消息提示,在屏幕的底部显示
@required this.content,
this.backgroundColor,
this.elevation,
this.shape,
this.behavior,
this.action,
this.duration = _snackBarDisplayDuration,
this.animation,
信息展示
4.6 Image:
一个显示图片的widget
@required this.image,
this.frameBuilder,
this.loadingBuilder,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
4.7 Icon:
A Material Design icon
this.icon, {
Key key,
this.size,
this.color,
this.semanticLabel,
this.textDirection,
}
4.8 Chip:
标签,一个Material widget。 它可以将一个复杂内容实体展现在一个小块中,如联系人
this.avatar,
@required this.label,
this.labelStyle,
this.labelPadding,
this.deleteIcon,
this.onDeleted,
this.deleteIconColor,
this.deleteButtonTooltipMessage,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.backgroundColor,
this.padding,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
4.9 Tooltip:
一个文本提示工具,帮助解释一个按钮或其他用户界面,当widget长时间按下时(当用户采取其他适当操作时)显示一个提示标签
@required this.message,
this.height,
this.padding,
this.margin,
this.verticalOffset,
this.preferBelow,
this.excludeFromSemantics,
this.decoration,
this.textStyle,
this.waitDuration,
this.showDuration,
this.child,
5.0 DateTable:
数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件
5.1 Card:
一个 Material Design 卡片。拥有一个圆角和阴影
this.color,
this.elevation,
this.shape,
this.borderOnForeground = true,
this.margin,
this.clipBehavior,
this.child,
this.semanticContainer = true,
5.2 LinearProgressIndicator:
一个线性进度条,另外还有一个圆形进度条CircularProgressIndicator
double value,
Color backgroundColor,
Animation<Color> valueColor,
String semanticsLabel,
String semanticsValue,
布局
5.3 ListTile:
一个固定高度的行,通常包含一些文本,以及一个行前或行尾图标
this.leading,
this.title,
this.subtitle,
this.trailing,
this.isThreeLine = false,
this.dense,
this.contentPadding,
this.enabled = true,
this.onTap,
this.onLongPress,
this.selected = false,
5.4 Stepper:
一个Material Design 步骤指示器,显示一系列步骤的过程
@required this.steps,
this.physics,
this.type = StepperType.vertical,
this.currentStep = 0,
this.onStepTapped,
this.onStepContinue,
this.onStepCancel,
this.controlsBuilder,
5.5 Divider:
一个逻辑1像素厚的水平分割线,两边都有填充
Key key,
this.height,
this.thickness,
this.indent,
this.endIndent,
this.color,
4.布局 Widget
4.1 Container:
一个拥有绘制、定位、调整大小的 widget
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
4.2 Padding:
一个widget, 会给其子widget添加指定的填充
@required this.padding,
Widget child,
4.3 Center:
将其子widget居中显示在自身内部的widget
double widthFactor,
double heightFactor,
Widget child
4.4 Align:
一个widget,它可以将其子widget对齐,并可以根据子widget的大小自动调整大小
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
4.5 FittedBox:
按自己的大小调整其子widget的大小和位置
this.fit = BoxFit.contain,
this.alignment = Alignment.center,
Widget child,
4.6 AspectRatio:
一个widget,试图将子widget的大小指定为某个特定的长宽比
@required this.aspectRatio,
Widget child,
4.7 ConstrainedBox:
对其子项施加附加约束的widget
@required this.constraints,
Widget child,
4.8 Baseline:
根据子项的基线对它们的位置进行定位的widget
required this.baseline,
@required this.baselineType,
Widget child,
4.9 FractionallySizeBox:
一个widget,它把它的子项放在可用空间的一小部分。关于布局算法的更多细节,见RenderFractionallySizedOverflowBox
5.0 IntrinsicHeight:
一个widget,它将它的子widget的高度调整其本身实际的高度
Widget child
5.1 IntrinsicWidth:
一个widget,它将它的子widget的宽度调整其本身实际的宽度
this.stepWidth,
this.stepHeight,
Widget child
5.2 LimitedBox:
一个当其自身不受约束时才限制其大小的盒子
this.maxWidth = double.infinity,
this.maxHeight = double.infinity,
Widget child,
5.3 Offstage:
一个布局widget,可以控制其子widget的显示和隐藏
this.offstage = true,
Widget child
5.4 OverflowBox:
对其子项施加不同约束的widget,它可能允许子项溢出父级
this.alignment = Alignment.center,
this.minWidth,
this.maxWidth,
this.minHeight,
this.maxHeight,
Widget child,
5.5 SizedBox:
一个特定大小的盒子。这个widget强制它的孩子有一个特定的宽度和高度。如果宽度或高度为NULL,则此widget将调整自身大小以匹配该维度中的孩子的大小
this.width,
this.height,
Widget child
5.6 SizedOverflowBox:
一个特定大小的widget,但是会将它的原始约束传递给它的孩子,它可能会溢出
@required this.size,
this.alignment = Alignment.center,
Widget child,
5.7 Transform:
在绘制子widget之前应用转换的widget
@required this.transform,
this.origin,
this.alignment,
this.transformHitTests = true,
Widget child,
5.8 CustomSingleChildLayout
一个自定义的拥有单个子widget的布局widget
@required this.delegate,
Widget child,
拥有多个子元素的布局组件:
1.1 Row:
在水平方向上排列子widget的列表
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
direction: Axis.horizontal,
1.2 Column:
在垂直方向上排列子widget的列表
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
direction: Axis.vertical,
1.3 Stack:
可以允许其子widget简单的堆叠在一起
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
}) : super(key: key, children: children);
1.4 IndexedStack:
从一个子widget列表中显示单个孩子的Stack
AlignmentGeometry alignment = AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit sizing = StackFit.loose,
this.index = 0,
List<Widget> children = const <Widget>[],
1.5 Flow:
一个实现流式布局算法的widget
@required this.delegate,
List<Widget> children = const <Widget>[],
1.6 Table:
为其子widget使用表格布局算法的widget
this.children = const <TableRow>[],
this.columnWidths,
this.defaultColumnWidth = const FlexColumnWidth(1.0),
this.textDirection,
this.border,
this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
this.textBaseline,
1.7 Wrap:
可以在水平或垂直方向多行显示其子widget
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List<Widget> children = const <Widget>[],
1.8 ListBody:
一个widget,它沿着一个给定的轴,顺序排列它的子元素
this.mainAxis = Axis.vertical,
this.reverse = false,
List<Widget> children = const <Widget>[],
1.9 ListView:
可滚动的列表控件。ListView是最常用的滚动widget,它在滚动方向上一个接一个地显示它的孩子。在纵轴上,孩子们被要求填充ListView
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
2.0 CustomMultiChildLayout:
使用一个委托来对多个孩子进行设置大小和定位的小部件
@required this.delegate,
List<Widget> children = const <Widget>[],
Layout helpers
1.1 LayoutBuilder
构建一个可以依赖父窗口大小的widget树。
LayoutWidgetBuilder builder,
5.文本组件
1.1 Text
单一格式的文本
this.data, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
}
1.2 RichText
一个富文本Text,可以显示多种样式的text
@required this.text,
this.textAlign = TextAlign.start,
this.textDirection,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.textScaleFactor = 1.0,
this.maxLines,
this.locale,
this.strutStyle,
this.textWidthBasis = TextWidthBasis.parent,
1.3 DefaultTextStyle
文字样式,用于指定Text widget的文字样式
@required this.style,
this.textAlign,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.maxLines,
this.textWidthBasis = TextWidthBasis.parent,
6.Assets,Image,Icon
1.1 Image
一个显示图片的widget
@required this.image,
this.frameBuilder,
this.loadingBuilder,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.filterQuality = FilterQuality.low,
1.2 Icon
A Material Design icon
this.icon, {
Key key,
this.size,
this.color,
this.semanticLabel,
this.textDirection,
}
1.3 RawImage
一个直接显示dart:ui.Image的widget
this.image,
this.width,
this.height,
this.scale = 1.0,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.invertColors = false,
this.filterQuality = FilterQuality.low,
1.4 AssetBundle
包含应用程序可以使用的资源,如图像和字符串。对这些资源的访问是异步,所以他们可以来自网络(例如,从NetworkAssetBundle)或从本地文件系统,这并不会挂起用户界面
7.表单 Widgets
1.1 Form
一个可选的、用于给多个TextField分组的widget
@required this.child,
this.autovalidate = false,
this.onWillPop,
this.onChanged,
1.2 FormField
一个单独的表单字段。此widget维护表单字段的当前状态,以便在UI中直观地反映更新和验证错误
@required this.builder,
this.onSaved,
this.validator,
this.initialValue,
this.autovalidate = false,
this.enabled = true,
1.3 RawKeyboardListener
每当用户按下或释放键盘上的键时调用回调的widget。
@required this.focusNode,
this.autofocus = false,
this.onKey,
@required this.child,
8.动画&Motion Widget
1.1 AnimatedContainer
在一段时间内逐渐改变其值的容器。
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
Curve curve = Curves.linear,
@required Duration duration,
1.2 AnimatedCrossFade
一个widget,在两个孩子之间交叉淡入,并同时调整他们的尺寸
@required this.firstChild,
@required this.secondChild,
this.firstCurve = Curves.linear,
this.secondCurve = Curves.linear,
this.sizeCurve = Curves.linear,
this.alignment = Alignment.topCenter,
@required this.crossFadeState,
@required this.duration,
this.reverseDuration,
this.layoutBuilder = defaultLayoutBuilder,
1.3 Hero
将其子项标记为hero动画候选的widget
@required this.tag,
this.createRectTween,
this.flightShuttleBuilder,
this.placeholderBuilder,
this.transitionOnUserGestures = false,
@required this.child,
1.4 AnimatedBuilder
用于构建动画的通用小部件。AnimatedBuilder在有多个widget希望有一个动画作为一个较大的建造函数部分时会非常有用。要使用AnimatedBuilder,只需构建widget并将其传给builder函数即可。
@required Listenable animation,
@required this.builder,
this.child,
1.5 DecoratedBoxTransition
DecoratedBox的动画版本,可以给它的Decoration不同属性使用动画
@required this.decoration,
this.position = DecorationPosition.background,
@required this.child,
1.6 FadeTransition
对透明度使用动画的widget
@required this.opacity,
this.alwaysIncludeSemantics = false,
Widget child,
1.7 PositionedTransition
Positioned的动画版本,它需要一个特定的动画来将孩子的位置从动画的生命周期的起始位置移到结束位置
@required Animation<RelativeRect> rect,
@required this.child,
1.8 RotationTransition
对widget使用旋转动画
@required Animation<double> turns,
this.alignment = Alignment.center,
this.child,
1.9 ScaleTransition
对widget使用缩放动画
@required Animation<double> scale,
this.alignment = Alignment.center,
this.child,
2.0 SizeTransition
动画自己的大小和剪辑和对齐的子组件
this.axis = Axis.vertical,
@required Animation<double> sizeFactor,
this.axisAlignment = 0.0,
this.child,
2.1 SlideTransition
对相对于其正常位置的某个位置之间使用动画
@required Animation<Offset> position,
this.transformHitTests = true,
this.textDirection,
this.child,
2.2 AnimatedDefaultTextStyle
在文本样式切换时使用动画
@required this.child,
@required this.style,
this.textAlign,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.maxLines,
Curve curve = Curves.linear,
@required Duration duration,
2.3 AnimatedListState
动画列表的state
2.4 AnimateModalBarrier
一个阻止用户与widget交互的widget
2.5 AnimatedOpacity
Opacity的动画版本,在给定的透明度变化时,自动地在给定的一段时间内改变孩子的Opacity
this.child,
@required this.opacity,
Curve curve = Curves.linear,
@required Duration duration,
2.6 AnimatedPhysicalModel
PhysicalModel的动画版本
@required this.child,
@required this.shape,
this.clipBehavior = Clip.none,
this.borderRadius = BorderRadius.zero,
@required this.elevation,
@required this.color,
this.animateColor = true,
@required this.shadowColor,
this.animateShadowColor = true,
Curve curve = Curves.linear,
@required Duration duration,
2.7 AnimatedPositioned
动画版本的Positioned,每当给定位置的变化,自动在给定的时间内转换孩子的位置
@required this.child,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
Curve curve = Curves.linear,
@required Duration duration,
2.8 AnimatedSize
动画widget,当给定的孩子的大小变化时,它自动地在给定时间内转换它的大小
Widget child,
this.alignment = Alignment.center,
this.curve = Curves.linear,
@required this.duration,
this.reverseDuration,
@required this.vsync,
2.9 AnimatedWidget
当给定的Listenable改变值时,会重新构建该widget
3.0 AnimatedWidgetBaseState
具有隐式动画的widget的基类
9.交互模型Widget
1.1 LongPressDraggable
可以使其子widget在长按时可拖动
@required Widget child,
@required Widget feedback,
T data,
Axis axis,
Widget childWhenDragging,
Offset feedbackOffset = Offset.zero,
DragAnchor dragAnchor = DragAnchor.child,
int maxSimultaneousDrags,
VoidCallback onDragStarted,
DraggableCanceledCallback onDraggableCanceled,
DragEndCallback onDragEnd,
VoidCallback onDragCompleted,
this.hapticFeedbackOnStart = true,
bool ignoringFeedbackSemantics = true,
1.2 GestureDetector
一个检测手势的widget
this.child,
this.onTapDown,
this.onTapUp,
this.onTap,
this.onTapCancel,
this.onSecondaryTapDown,
this.onSecondaryTapUp,
this.onSecondaryTapCancel,
this.onDoubleTap,
this.onLongPress,
this.onLongPressStart,
this.onLongPressMoveUpdate,
this.onLongPressUp,
this.onLongPressEnd,
this.onVerticalDragDown,
this.onVerticalDragStart,
this.onVerticalDragUpdate,
this.onVerticalDragEnd,
this.onVerticalDragCancel,
this.onHorizontalDragDown,
this.onHorizontalDragStart,
this.onHorizontalDragUpdate,
this.onHorizontalDragEnd,
this.onHorizontalDragCancel,
this.onForcePressStart,
this.onForcePressPeak,
this.onForcePressUpdate,
this.onForcePressEnd,
this.onPanDown,
this.onPanStart,
this.onPanUpdate,
this.onPanEnd,
this.onPanCancel,
this.onScaleStart,
this.onScaleUpdate,
this.onScaleEnd,
this.behavior,
this.excludeFromSemantics = false,
this.dragStartBehavior = DragStartBehavior.start,
1.3 DragTarget
一个拖动的目标widget,在完成拖动时它可以接收数据
@required this.builder,
this.onWillAccept,
this.onAccept,
this.onLeave,
1.4 Dismissible
可以在拖动时隐藏的widget
@required this.child,
this.background,
this.secondaryBackground,
this.confirmDismiss,
this.onResize,
this.onDismissed,
this.direction = DismissDirection.horizontal,
this.resizeDuration = const Duration(milliseconds: 300),
this.dismissThresholds = const <DismissDirection, double>{},
this.movementDuration = const Duration(milliseconds: 200),
this.crossAxisEndOffset = 0.0,
this.dragStartBehavior = DragStartBehavior.start,
1.5 IgnorePointer
在hit test中不可见的widget。当ignoring为true时,此widget及其子树不响应事件。但它在布局过程中仍然消耗空间,并像往常一样绘制它的孩子。它是无法捕获事件对象、因为它在RenderBox.hitTest中返回false
this.ignoring = true,
this.ignoringSemantics,
Widget child,
1.6 AbsorbPointer
在hit test期间吸收(拦截)事件。当absorbing为true时,此小部件阻止其子树通过终止命中测试来接收指针事件。它在布局过程中仍然消耗空间,并像往常一样绘制它的孩子。它只是防止其孩子成为事件命中目标,因为它从RenderBox.hitTest返回true。
this.absorbing = true,
Widget child,
this.ignoringSemantics,
1.7 Navigator
导航器,可以在多个页面(路由)栈之间跳转
this.initialRoute,
@required this.onGenerateRoute,
this.onUnknownRoute,
this.observers = const <NavigatorObserver>[],
1.8 Scrollable
实现了可滚动widget的交互模型,但不包含UI显示相关的逻辑
this.axisDirection = AxisDirection.down,
this.controller,
this.physics,
@required this.viewportBuilder,
this.excludeFromSemantics = false,
this.semanticChildCount,
this.dragStartBehavior = DragStartBehavior.start,
10.样式 Widget
1.1 Padding
一个widget, 会给其子widget添加指定的填充
@required this.padding,
Widget child,
1.2 Theme
将主题应用于子widget。主题描述了应用选择的颜色和字体
@required this.data,
this.isMaterialAppTheme = false,
@required this.child,
1.3 MedaQuery
建立一个子树,在树中媒体查询解析不同的给定数据
11 绘制和视觉效果Widget
1.1 Opacity
使其子widget透明的widget
@required this.opacity,
this.alwaysIncludeSemantics = false,
Widget child,
1.2 Transform
在绘制子widget之前应用转换的widget
@required this.transform,
this.origin,
this.alignment,
this.transformHitTests = true,
Widget child,
1.3 DecoratedBox
在孩子绘制之前或之后绘制装饰的widget
@required this.decoration,
this.position = DecorationPosition.background,
Widget child,
1.4 FractionalTranslation
绘制盒子之前给其添加一个偏移转换
@required this.translation,
this.transformHitTests = true,
Widget child,
1.5 RotatedBox
可以延顺时针以90度的倍数旋转其子widget
@required this.quarterTurns,
Widget child,
1.6 ClipOval
用椭圆剪辑其孩子的widget
this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget child
1.7 ClipPath
用path剪辑其孩子的widget
this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget child,
1.8 ClipRect
用矩形剪辑其孩子的widget
this.clipper,
this.clipBehavior = Clip.hardEdge,
Widget child
1.9 CustomPaint
提供一个画布的widget,在绘制阶段可以在画布上绘制自定义图形
this.painter,
this.foregroundPainter,
this.size = Size.zero,
this.isComplex = false,
this.willChange = false,
Widget child,
2.0 BackdropFilter
一个widget,它将过滤器应用到现有的绘图内容,然后绘制孩子。这种效果是比较昂贵的,尤其是如果过滤器是non-local,如blur
@required this.filter,
Widget child,
12.异步 Widgets
1.1 FutureBuilder
基于与Future交互的最新快照来构建自身的widget
this.future,
this.initialData,
@required this.builder,
1.2 StreamBuilder
基于与流交互的最新快照构建自身的widget
this.initialData,
Stream<T> stream,
@required this.builder,
13.可滚动的Widget
1.1 ListView
一个可滚动的列表
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
1.2 NestedScrollView
一个可以嵌套其它可滚动widget的widget
this.controller,
this.scrollDirection = Axis.vertical,
this.reverse = false,
this.physics,
@required this.headerSliverBuilder,
@required this.body,
this.dragStartBehavior = DragStartBehavior.start,
1.3 GridView
一个可滚动的二维空间数组
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required this.gridDelegate,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
1.4 SingleChildScrollView
有一个子widget的可滚动的widget,子内容超过父容器时可以滚动
this.scrollDirection = Axis.vertical,
this.reverse = false,
this.padding,
bool primary,
this.physics,
this.controller,
this.child,
this.dragStartBehavior = DragStartBehavior.start,
1.5 Scrollable
实现了可滚动widget的交互模型,但不包含UI显示相关的逻辑
this.axisDirection = AxisDirection.down,
this.controller,
this.physics,
@required this.viewportBuilder,
this.excludeFromSemantics = false,
this.semanticChildCount,
this.dragStartBehavior = DragStartBehavior.start,
1.6 Scrollbar
一个Material Design 滚动条,表示当前滚动到了什么位置
@required this.child,
1.7 CustomScrollView
一个使用slivers创建自定义的滚动效果的ScrollView
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
Key center,
double anchor = 0.0,
double cacheExtent,
this.slivers = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
1.8 NotificationListener
一个用来监听树上冒泡通知的widget
@required this.child,
this.onNotification,
1.9 ScrollConfiguration
控制可滚动组件在子树中的表现行为
@required this.behavior,
@required Widget child,
2.0 RefreshIndicator
Material Design下拉刷新指示器,包装一个可滚动widget
@required this.child,
this.displacement = 40.0,
@required this.onRefresh,
this.color,
this.backgroundColor,
this.notificationPredicate = defaultScrollNotificationPredicate,
this.semanticsLabel,
this.semanticsValue,
14.辅助功能 Widget
1.1 Semantics
一个widget,用以描述widget树的具体语义。使用辅助工具、搜索引擎和其他语义分析软件来确定应用程序的含义
1.2 MergeSemantics
合并其后代语义的widget
1.3 ExcludeSemantics
删除其后代所有语义的widget