ConstrainedLayoutBuilder
LayoutBuilder
有时我们希望根据组件的大小确认组件的外观,比如竖屏的时候上下展示,横屏的时候左右展示,通过LayoutBuilder组件可以获取父组件的约束尺寸。
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
var color = Colors.red;
if (constraints.maxHeight > 100) {
color = Colors.blue;
}
return Container(
height: 50,
width: 50,
color: color,
);
},
)
SliverLayoutBuilder
根据组件的约束条件提供子组件,比如当用户向下划动时,盒子显示红色,向上滑动时显示蓝色:
CustomScrollView(
slivers:
SliverLayoutBuilder(
builder: (BuildContext context, SliverConstraints constraints) {
print(‘${constraints.userScrollDirection}’);
var color = Colors.red;
if (constraints.userScrollDirection == ScrollDirection.forward) {
color = Colors.blue;
}
return SliverToBoxAdapter(
child: Container(
height: 100,
color: color,
));
},
),
],
)
ListWheelViewport
RenderObjectToWidgetAdapter
SliverWithKeepAliveWidget – SliverMultiBoxAdaptorWidget
Table
Table组件是一个表格组件,适合不滑动的网格控件,尤其是如果拥有不同大小的小控件。嵌套的行和列可能会比较乱,但Table组件组件提供了一致性并为您调整子窗口的大小。
Table(
children: [
TableRow(
children: [
TableCell(child: Text(‘姓名’)),
TableCell(child: Text(‘性别’)),
TableCell(child: Text(‘年龄’)),
]
MultiChildRenderObjectWidget
CustomMultiChildLayout
CustomMultiChildLayout允许我们通过delegate自定义子组件的布局约束、位置以及父组件的大小(父组件大小不依赖于子组件的情况下),和CustomSingleChildLayout基本一样,区别就是CustomSingleChildLayout包裹一个子控件,而CustomMultiChildLayout包裹多个。
下面定义一个布局,2个控件分别位于左上角和右下角,delegate定义如下
enum FollowTheLeaderId { leader, follower }
class FollowTheLeader extends MultiChildLayoutDelegate {
@override
void performLayout(Size size) {
}
@override
bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => false;
}
Flex
Column
Row
Flow
Flow的特点是可以调整子组件的位置和大小,结合Matrix4绘制出各种酷炫的效果
ListBody
ListBody是一个沿着给定轴顺序排列子组件的组件,此控件不是很常用,通常使用ListView和Column和Row。
RichText
富文本,与TextSpan一起使用
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children:
TextSpan(text: ‘登陆即视为同意’),
TextSpan(
text: ‘《xxx服务协议》’,
style: TextStyle(color: Colors.red),
recognizer: TapGestureRecognizer()..onTap = () {
},
),
]),
)
Stack
Stack组件可以将子组件叠加显示,根据子组件的顺利依次向上叠加
IndexedStack
是Stack的子类,Stack是将所有的子组件叠加显示,而IndexedStack只显示指定的子组件
Wrap
Wrap可以为子控件进行水平或者垂直方向布局,且当空间用完时,Wrap会自动换行,也是常说的流式布局
LeafRenderObjectWidget
ErrorWidget
要想Flutter的错误页面显示成自定义的页面,只要设置ErrorWidget的builder就行
ErrorWidget.builder = (FlutterErrorDetails flutterErrorDetails){
print(flutterErrorDetails.toString());
return Center(
child: Text(“Flutter 走神了”),
);
};
Others
Viewport
OverflowBar
ShrinkWrappingViewport
PerformanceOverlay PlatformViewSurface RawImage Texture WidgetToRenderBoxAdapter
Widget
StatelessWidget
AboutDialog 、AboutListTile 应用信息显示 基本用不到
Chip
ActionChip
Chip
ChoiceChip
FilterChip
InputChip
AnimatedIcon
系统提供的动图
Autocomplete
Button
BackButton material风格的返回按钮,本身是一个IconButton
CupertinoNavigationBarBackButton ios风格的按钮
CupertinoTextSelectionToolbarButton ios风格的按钮
MaterialButton material风格”凸起“的按钮
IconButton 一个图标按钮
FloatingActionButton 在底部导航栏嵌入按钮
TextSelectionToolbarTextButton
CloseButton是一个material风格的关闭按钮,本身是一个IconButton
ButtonBar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行
BackButtonIcon 看名字你以为这是一个Button,其实是一个Icon,没有点击效果
ToggleButtons组件将多个组件组合在一起,并让用户从中选择,类似Segment
CupertinoButton iOS风格button
DropdownButton 下拉菜单
DropdownMenuItem
PopupMenuButton 弹出菜单功能
RawMaterialButton是基于Semantics, Material和InkWell创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式
Dialog
CupertinoActionSheet ios风格底部弹出的提示框
CupertinoActionSheetAction
CupertinoAlertDialog
CupertinoDialogAction
AlertDialog
SimpleDialog
SimpleDialogOption
DatePickerDialog
DateRangePickerDialog
Banner在父组件的角上显示一个对角线的消息的控件,比如debug模式下,显示在App右上角的DEBUG就是此组件实现的 CheckedModeBanner
Builder
调用闭包以获取其子小部件的小部件
Builder(
builder: (BuildContext context){
return Container();
},
)
因为没有Builder的context表示当前整个控件的context,其上并没有NotificationListener监听,而加上Builder后,context表示Builder控件,其上有NotificationListener监听
Card 是material风格的卡片控件,Card有较小的圆角和阴影。Card通常用于展示一组信息,比如相册、位置信息等
Checkbox是勾选框控件,本身不包含任何状态,改变状态需要通过改变value的值改变
CheckboxListTile 通常情况下,我们不直接使用Checkbox,而是使用CheckboxListTile,因为我们需要Checkbox后面添加说明
CircleAvatar 代表用户的圆圈的控件,通常与用户的个人资料图片一起使用
Container是单容器类控件,即只包含一个子控件。Container可以装饰和定位子控件,例如设置背景颜色、形状等
CupertinoFormRow
CupertinoFormSection
CupertinoFullscreenDialogTransition
CupertinoPageTransition
CupertinoPickerDefaultSelectionOverlay
CupertinoPopupSurface
CupertinoTabBar
CupertinoTextSelectionToolbar
CupertinoTheme
DataTable
DayPicker
日期选择器
CalendarDatePicker
CupertinoDatePicker
MonthPicker
YearPicker
Divider分割线控件
VerticalDivider
DraggableScrollableActuator 通知子控件DraggableScrollableSheet重置其位置到初始化状态,调用DraggableScrollableActuator.reset(context)方法即可
Drawer
是一个抽屉导航组件
DrawerHeader
ExcludeFocus
FadeInImage
在加载网络图片时通常需要一张展位图,当网络图片没有加载时先显示占位图,FadeInImage可以很好的实现这个功能
FadeInImage(
placeholder: AssetImage(‘…’),
image: NetworkImage(‘…’),
)
FlutterLogo
GestureDetector
是手势识别的组件,可以识别点击、双击、长按事件、拖动、缩放等手势
onTapDown:按下时回调。
onTapUp:抬起时回调。
onTap:点击事件回调。
onTapCancel:点击取消事件回调。
GridPaper 绘制一个像素宽度的直线网格
GridView
GridTile GridView的子控件
GridTileBar 做为header或者footer
HeroMode
HtmlElementView 此控件只能在Flutter Web中使用,如果想在Android和IOS中嵌入web内容请使用
Icon
ImageIcon 根据图片绘制图标,就是图片上的透明通道不绘制,而不透明的地方使用设置的颜色绘制
ExpandIcon 是一个旋转展开/折叠按钮的组件
InkResponse
KeyedSubtree提供了一种简便的给子控件添加key的方法
ListTile ListView的子控件
MaterialBanner Material 风格的标语(Banner)控件
ModalBarrier是一个静态蒙层控件,ModalRoute控件就是间接使用的此控件,此控件有点击属性
NavigationToolbar是一个布局控件,控制3个子组件
NotificationListener 事件监听
OrientationBuilder PageStorage
PlaceholderPlaceholder是一个占位符控件,用于当没有准备好构建组件时,可以使用Placeholder进行占位。
PositionedDirectional用于定位Stack子组件,PositionedDirectional必须是Stack的子组件
PreferredSize 此控件不对其子控件施加任何约束,并且不以任何方式影响孩子的布局
RadioListTile 单选框
ReorderableDragStartListener
SafeArea SafeArea通过MediaQuery检测屏幕的尺寸使应用程序的大小与屏幕适配。
ScrollView
SingleChildScrollView 当遇到内容较多时,需要滚动组件进行展示,SingleChildScrollView是一个只能包含单个组件的滚动组件,如果内容较多,建议使用ListView等
SliverAppBar控件可以实现页面头部区域展开、折叠的效果
SliverFillRemaining SliverFillViewport SliverPersistentHeader SliverSafeArea SliverVisibility
权重分配
Expanded、Flexible和Spacer都是具有权重属性的组件,可以控制Row、Column、Flex的子控件如何布局的控件。
Spacer
Switch SwitchListTile
Tab
TabPageSelector 分页小圆点
TabPageSelectorIndicator Text TextSelectionToolbar
Theme
Theme是一个将主题应用于子组件的组件
Theme(
data: ThemeData(
primaryColor: Colors.red,
),
child: Scaffold(
appBar: AppBar(
title: Text(‘老孟程序员’),
),
),
)
ThemeData({
Brightness brightness, //深色还是浅色
MaterialColor primarySwatch, //主题颜色样本,见下面介绍
Color primaryColor, //主色,决定导航栏颜色
Color accentColor, //次级色,决定大多数Widget的颜色,如进度条、开关等。
Color cardColor, //卡片颜色
Color dividerColor, //分割线颜色
ButtonThemeData buttonTheme, //按钮主题
Color cursorColor, //输入框光标颜色
Color dialogBackgroundColor,//对话框背景颜色
String fontFamily, //文字字体
TextTheme textTheme,// 字体主题,包括标题、body等文字样式
IconThemeData iconTheme, // Icon的默认样式
TargetPlatform platform, //指定平台,应用特定平台控件风格
…
})
CupertinoThemeData组件是将主题应用于IOS风格的子组件
TickerMode Title
Box
UnconstrainedBox
Flutter中尺寸限制类容器组件包括ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、LimitedBox、Container。这些组件可以约束子组件的尺寸
Visibility
StatefulWidget
ActionListener Actions
AndroidView 与安卓交互
AnimatedCrossFade
让2个组件在切换时出现交叉渐入的效果,因此AnimatedCrossFade需要设置2个子控件、动画时间和显示第几个子控件
AnimatedList
提供了一种简单的方式使列表数据发生变化时加入过渡动画
AnimatedSwitcher
在2个或者多个子组件之间切换时使用动画
AnimatedWidget
AppBar
AutofillGroup AutomaticKeepAlive BackButtonListener
BottomAppBar
底部导航栏
BottomNavigationBar
底部导航栏
BottomSheet
CupertinoActivityIndicator 进度指示器
CupertinoApp iOS风格的app
CupertinoContextMenu类似以iOS 3D Touch,长按弹出菜单
CupertinoContextMenuAction
CupertinoNavigationBar
iOS风格的导航条
CupertinoPageScaffold iOS风格
CupertinoPicker iOS风格的选择器
CupertinoSearchTextField
CupertinoSegmentedControl iOS风格的分段选择期
CupertinoSlider
CupertinoSlidingSegmentedControl
CupertinoSliverNavigationBar CupertinoSliverRefreshControl CupertinoSwitch CupertinoTabScaffold CupertinoTabView CupertinoTextField CupertinoTimerPicker
DefaultTabController
Dismissible组件可通过左滑或者右滑清除列表项
Draggable
DraggableScrollableSheet组件可以在屏幕上拖动,builder属性需要返回其子控件,可以是任何类型的子控件,一般返回一个ListView
DragTarget
DrawerController
DualTransitionBuilder
EditableText
ExpansionPanelList 可以展开的list
ExpansionTile
FlexibleSpaceBar 列表,顶部图片滑动淡出的效果
Focus FocusableActionDetector FocusTraversalGroup
Form FormField 表单
FutureBuilder当有一个Future(异步)任务需要展示给用户时,可以使用FutureBuilder控件来完成,比如向服务器发送数据成功时显示成功提示
GlowingOverscrollIndicator Android平台ListView列表滑动到底部时在滑动出现的水波纹效果,此控件配合ScrollNotification使用
Hero 是我们常用的过渡动画,当用户点击一张图片,切换到另一个页面时,这个页面也有此图,那么使用Hero组件就在合适不过了
Image ImplicitlyAnimatedWidget
Ink 组件在用户点击时出现“水波纹”效果
InputDatePickerFormField InputDecorator
InteractiveViewer 支持缩放
LicensePage
ListWheelScrollView 和ListView同源,但它的渲染效果类似于车轮(或者滚筒),它不是在平面上滑动,而是转动车轮
Localizations 国际化
Material MaterialApp
MergeableMaterial展示一些MergeableMaterialItem组件,当子组件发生变化时,动画打开或者关闭,MergeableMaterial的父控件需要在主轴方向是一个没有限制的控件,比如SingleChildScrollView、Row、Column等
MouseRegion NavigationRail Navigator
NestedScrollView scrollView联动效果,多方向滚动
Overlay弹出一个浮层,典型的应用场景就是toast
PageView 图片轮播”的效果
PaginatedDataTable是一个带分页功能的DataTable,生成一批数据
PlatformViewLink PopupMenuEntry ProgressIndicator
Radio RangeSlider
RawAutocomplete RawChip RawGestureDetector RawKeyboardListener RawScrollbar RefreshIndicator ReorderableList ReorderableListView是通过长按拖动某一项到另一个位置来重新排序的列表组件。
RestorationScope RootRestorationScope Router
Scaffold ScaffoldMessenger
Scrollable Scrollbar 滚动条
SelectableText应用程序中的文本可以被选中,并可以复制、剪切
SemanticsDebugger Shortcuts
Slider滑块
SliverAnimatedList SliverAppBar SliverReorderableList
SnackBar 带有可选操作的轻量级消息,在屏幕底部短暂显示,SnackBar一般不单独使用,而是配合Scaffold.of(context).showSnackBar进行弹出展示 SnackBarAction
StatefulBuilder提供了局部更新控件的方法,当StatefulWidget中控件树较大时,更新一个属性导致整个树重建,消耗性能,而使用StatefulBuilder能有效的提高性能
StatusTransitionWidget
Stepper一系列步骤进度的控件
StreamBuilderBase
TabBar是一排水平的标签,可以来回切换 TabBarView
TextField
TextSelectionGestureDetector 是一个文本选择的手势识别控件,和GestureDetector的区别是GestureDetector只能处理单击或者双击事件,而TextSelectionGestureDetector可以同时处理单击和双击事件
Tooltip是一个消息提示组件,当用户点击或者长按时显示提示,在屏幕阅读器能够使它语音化
UiKitView ios的桥接view
UniqueWidget
UserAccountsDrawerHeader用户窗体
ValueListenableBuilder ValueNotifier 贯穿整个应用程序,比如用户信息,我们希望当这些数据发生变化时,应用程序任何页面的数据都更新
WidgetInspector
WidgetsApp 一般情况下,不会直接使用WidgetsApp,而是使用MaterialApp或者CupertinoApp
WillPopScope用于处理是否离开当前页面,在Flutter中有多种方式可以离开当前页面,比如AppBar、CupertinoNavigationBar上面的返回按钮,点击将会回到前一个页面,在Android手机上点击实体(虚拟)返回按钮,也将会回到前一个页面,此功能对于iOS程序员来说可能特别容易忽略
PreferredSizeWidget
AppBar CupertinoTabBar ObstructingPreferredSizeWidget PreferredSize TabBar