https://space.bilibili.com/64169458/channel/detail?cid=131083
SafeArea
this.left = true,
this.top = true,
this.right = true,
this.bottom = true,
this.minimum = EdgeInsets.zero,
this.maintainBottomViewPadding = false,
SafeArea 如果顶部和底部都是圆角,比如iPhone,如果不指定top的话,bottom也会有padding,用在title的时候就有问题
Expanded
扩张
int flex = 1, // 扩张系数
配合Row Column 使用,除去精确宽高之后,可以占满剩下的布局
Wrap
类似流式布局,当一行空间放不下时,会把控件放到下一行,适用于标签类的布局和小图标
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,
this.clipBehavior = Clip.hardEdge,
AnimatedContainer
Container的动画,以Animated开头的有很多类似的组件
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,
VoidCallback onEnd,
Opacity
渐变动画,渐显渐隐的效果,但是位置被占着。
0是transparent,1是显示
AnimatedOpacity 可以添加动画
FutureBuilder
异步组件
FadeTransition
淡入淡出Widget
FloatingActionButton
配合Scaffold和bottomNavigationBar可以把这个放到中间
PageView
PageView在增删更新不及时的时候,需要增加key,
Table
表格
defaultVerticalAlignment可以设置table里面的item对齐方式
SliverAppBar
需要和CustomScrollView一起使用,可以实现推上去的效果
SliverGrid SliverList
Grid和List同时在一个滚动视图里面
FadeInImage
异步图片占位图
FadeInImage.memoryNetwork
透明占位图:kTransparentImage
StreamBuilder
事件流控件
InheritedModel
provider里面用到,子控件状态跟随父控件状态
ClipRRect
clip round rect
圆角裁切,类似的还有ClipOval ClipPath之类
Hero
过渡动画,两个Navigator之间可以做过渡
CustomPaint
自定义画笔
Tooltip
给视力不佳的人使用,增加提示信息
FittedBox
当子控件大于父控件的时候,让子控件适配父控件
fit
alignment
LayoutBuilder
可以获得父控件的布局约束,大小
AbsorbPointer
禁止点击、滑动
Transform
各种复杂动画
ImageFilter
图片处理,模糊、倾斜、旋转等
配合BackdropFilter使用,达到模糊效果,前模糊、背景模糊、局部模糊
详情见高斯模糊
Align
比例用法
Positioned
配合Stack使用,放置位置
AnimatedBuilder
动画组件
Dismissible
左滑删除,左滑右滑都可以操作
Dismissible 小部件可通过向左或向右滑动来清除列表项。对于多方向滑动,它支持两种背景,如果您的 UI 需要用户垂直滑动,则有一个方向属性!
SizedBox
使用 SizedBox,您可以设置任何部件的确切大小。可以指定两个维度;或者只指定一个维度,让 Flutter 布局规则设定另一个维度。
子控件设置width和height不生效,和父控件一样大的时候,可以套这个或者UnconstrainedBox
ValueListenableBuilder
使用 ValueListenableBuilder 来为您的用户界面进行实时的数据更新。同样适用于动画类控件!
Draggable
配合DragTarget使用,可以实现拖动控件
AnimatedList
列表删除插入动画
Flexible
灵活布局,可以按比例放置
MediaQuery
获取用户设备大小、方向、系统UI的遮挡部分(类似SafeArea)
Spacer
自定义间距
InheritedWidget
允许跨组件更新数据,provider使用了这个
AnimatedIcon
使用 AnimatedIcon 小部件将动画图标直接拖放到您的应用程序中。Flutter 还有很多静态图标可供选择。
播放暂停动画很好看
AspectRatio
宽高比控件
LimitedBox
父控件无约束时为子控件提供默认大小
父控件有大小,LimitedBox无效
Placeholder
占位控件
RichText
富文本,配合TextSpan使用
ReorderableListView
ReorderableListView 展示出一个项目列表,用户可以通过拖动项目到他们想要的地方来重新排序。
AnimatedSwitcher
两个控件切换动画,配合key使用可以动其中一个控件
AnimatedPositioned
滑动的Positioned动画
AnimatedPadding
Padding改变时,可以有动效
AnimatedPadding 是在 Widget 和屏幕边框之间提供平滑缓冲区和空格的好方法。使用此选项可动态更改 Widget 的填充,并使其在两个值之间设置动画。
IndexedStack
这个类似Visibility,具体见对比
Semantics
为UI提供额外含义,有50多个属性
ConstrainedBox
Flutter ConstrainedBox Widget 非常适合添加 Widget 大小调整行为的要求。在 ConstrainedBox 中包装 Widget 可让您指定其最小和最大宽度和高度。
Stack
如果您曾想要重叠元素,那么 Stack 小部件就是为您准备的!Stack 允许您将多个小部件叠加在一起。 例如,您可以使用 Stack 在图像上添加文本。
叠加超出父控件大小,可以选择剪裁掉
AnimatedOpacity
淡入淡出的动画
FractionallySizedBox
有时您的设计需要相对的维度。 FractionallySizedBox 允许您将子项的大小调整为总可用空间的一小部分。
比例布局,在Row和Column要套一个Flexible
ListView
ListView.builder只加载可见部分
cacheExtent缓存屏幕外内容
Container
您是否有需要一些设计的 widget,例如背景颜色,形状或某些大小限制?尝试将其包装在 Container 中!可帮助您组成,装饰和定位子 widget。
ListTile
为什么要花费数小时来实现行、列、容器以及各种间距和样式的完美项目布局?你只需要 ListTile 就能搞定! ListTile 为你实现 Material Design 模式的列表项,你只需要关注其中的内容即可
SelectableText
您是否曾经想过要使应用程序中的一些文本可被选择呢? SelectableText 正是适合您的 widget!
DataTable
您是否有一些重要数据要以表格的方式显示给用户?使用 DataTable 定义列,行并自动调整单元格大小!
Slider
滑动进度条
AlertDialog
系统弹窗,不好用
AnimatedCrossFade
交叉淡入本是电影术语,意指一要素渐进淡入另一要素。若 Flutter widget 也有类似功能不是实用吗? 这方面,AnimatedCrossFade 就是解决方案。
切换组件
60. DraggableScrollableSheet
您是否想将小部件拖到屏幕上? 小部件是否具有可滚动的内容? DraggableScrollableSheet 可以帮助您!
showModalBottomSheet的升级版,可以放大Sheet的区域
ColorFiltered
ToggleButtons
您想让用户从多个相关选项中选择吗? 将 ToggleButtons 添加到您的应用程序会有所帮助!
CupertinoActionSheet
您是否正在构建一个需要向用户提供一系列下一步操作选项的 iOS 风格应用程序? CupertinoActionSheet 是适合您的 Widget!
TweenAnimationBuilder
您是否想要一个简单的动画,但是没有一个内置的隐式动画 widget 能解决问题? TweenAnimationBuilder 可以满足您所有自定义动画的需求,而无需担心 AnimationController!
65. Image
您的 app 需要显示图片吗?让 Flutter 助您一臂之力。无论图片来源是 assets (有时称为资源)、网络、文件系统还是 RAM (随机存取内存)等等,都可利用 Image 这个 widget 显示于屏幕。
66. DefaultTabController & TabBar
您需要将 widget 置入标签页吗?您可以使用 DefaultTabController、TabBar 和 TabBarView 小部件。
Drawer
需要为其他页面提供导航?欢迎尝试使用 Drawer!
SnackBar
您是否想在应用中显示快速消息?那么 SnackBar 非常适合您!SnackBar 可以让您在应用程序的底部弹出一条消息几秒钟。
ListWheelScrollView
ListViews 能让使用者浏览或选择屏幕无法一次显示的 item。不过有时候,一般的 ListView 太过枯燥乏味,好在有ListWheelScrollView。而本集视频会揭晓其实用之处。
可以试一下实现之前轮盘效果
ShaderMask
着色器可以把控件叠加颜色,可以做ListView的阴影
NotificationListener
你知道 widget 可以分派通知 (notification) 吗?例如 ListView 这类含有Scrollable组件的Widget,就会分派滚动通知。这方面可利用 NotificationListener 来处理这类通知。
72. Builder
大多数情况下,Flutter 中的部件在构建时,不会查找父部件的额外信息。但有时,编码时会遇到的一些状况是相同 BuildMethod 下,子部件需要存取父部件中的 BuildContext,这就是 Builder 部件的用途。
闭包思想,在获取点击位置的时候用到了,见文档
ClipPath
您是否希望 widget 具有独特的形状? ClipPath 允许您定义自己的 widget 形状!给定一个 CustomerClipper 和您定义的路径,ClipPath 将把 widget 的可见区域限制在此路径内。
CircularProgressIndicator and LinearProgressIndicator
您想要显示 Material App 的任务完成进度或是它正在执行任务吗?我们有一些 widget 可以派上用场!您可以使用 CircularProgressIndicator,以圆形进度条显示进度。若喜欢用线性的进度条 请使用 LinearProgressIndicator。
Divider
当两个 Widget 彼此之间需要一些空间时,在它们之间绘制一条线会很有帮助。无论您有需要分开的 Widget 还是 Widget 组,Divider Widget 都非常有用。了解如何划分 Widget 并准确获得所需尺寸!
ThemeData统一主题,可以把分割线统一处理
IgnorePointer
防止用户与 app 的某些部分进行交互可能会派上用场。当 UI 改变了用户的点击使用方式时,这实际上是一个非常常见且令人沮丧的问题。您可以通过禁用 app 中的所有交互式元素来解决此问题,或者可以使用 IgnorePointer。
- CupertinoActivityIndicator
如果您在 UI 中使用 Cupertino Widget,而您的应用程序需要加载指示器,那么可以选用 CupertinoActivityIndicator Widget!
iOS的圆形加载中
ClipOval
有时,图片或屏幕的其他部分看起来可能过于方正。而 ClipOval Widget 可将其子级裁剪为圆形和椭圆形。因此请发挥创意加以善用。
AnimatedWidget
是个抽象类,动画有许多不同的选项。在许多情况下,只需使用 AnimatedWidget 即可使 widget 实现动画。了解一些已经为您构建的动画 widget,以及如何构建自己的动画 widget!
Padding
内边距
CheckboxListTile
有时候,应用程序需要一个地方来放置法律条款、版本号、许可证和所有其他的小字号附加条款。不能到最后一刻才开始创建这部分。如果您遇到这种情况,有一个 Flutter Widgets 可以帮您解决!
多选
AboutDialog
83. Package:async
如果您使用 Dart 编码,则可能已经使用了 SDK 内置的异步支持,例如 Streams。您是否知道还有一个异步软件包,其中包含许多有用的附加内容?