Flutter widgets

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,

image.jpeg

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,

image.jpeg

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

异步组件

image.jpeg
image.jpeg

FadeTransition

淡入淡出Widget

FloatingActionButton

image.jpeg

配合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

比例用法

image.jpeg

Positioned

配合Stack使用,放置位置

AnimatedBuilder

动画组件

image.jpeg

Dismissible

左滑删除,左滑右滑都可以操作

Dismissible 小部件可通过向左或向右滑动来清除列表项。对于多方向滑动,它支持两种背景,如果您的 UI 需要用户垂直滑动,则有一个方向属性!

SizedBox

使用 SizedBox,您可以设置任何部件的确切大小。可以指定两个维度;或者只指定一个维度,让 Flutter 布局规则设定另一个维度。

子控件设置width和height不生效,和父控件一样大的时候,可以套这个或者UnconstrainedBox

ValueListenableBuilder

使用 ValueListenableBuilder 来为您的用户界面进行实时的数据更新。同样适用于动画类控件!

Draggable

配合DragTarget使用,可以实现拖动控件

AnimatedList

列表删除插入动画

Flexible

灵活布局,可以按比例放置

image.jpeg

MediaQuery

获取用户设备大小、方向、系统UI的遮挡部分(类似SafeArea)

Spacer

自定义间距

image.jpeg

InheritedWidget

允许跨组件更新数据,provider使用了这个

AnimatedIcon

使用 AnimatedIcon 小部件将动画图标直接拖放到您的应用程序中。Flutter 还有很多静态图标可供选择。

播放暂停动画很好看

AspectRatio

宽高比控件

image.jpeg
image.jpeg

LimitedBox

父控件无约束时为子控件提供默认大小

父控件有大小,LimitedBox无效

image.jpeg

Placeholder

占位控件

RichText

富文本,配合TextSpan使用

ReorderableListView

ReorderableListView 展示出一个项目列表,用户可以通过拖动项目到他们想要的地方来重新排序。

AnimatedSwitcher

两个控件切换动画,配合key使用可以动其中一个控件

AnimatedPositioned

滑动的Positioned动画

image.jpeg

AnimatedPadding

Padding改变时,可以有动效

AnimatedPadding 是在 Widget 和屏幕边框之间提供平滑缓冲区和空格的好方法。使用此选项可动态更改 Widget 的填充,并使其在两个值之间设置动画。

IndexedStack

这个类似Visibility,具体见对比

Semantics

为UI提供额外含义,有50多个属性

ConstrainedBox

Flutter ConstrainedBox Widget 非常适合添加 Widget 大小调整行为的要求。在 ConstrainedBox 中包装 Widget 可让您指定其最小和最大宽度和高度。

image.jpeg

Stack

如果您曾想要重叠元素,那么 Stack 小部件就是为您准备的!Stack 允许您将多个小部件叠加在一起。 例如,您可以使用 Stack 在图像上添加文本。

叠加超出父控件大小,可以选择剪裁掉

image.jpeg

AnimatedOpacity

淡入淡出的动画

FractionallySizedBox

有时您的设计需要相对的维度。 FractionallySizedBox 允许您将子项的大小调整为总可用空间的一小部分。

比例布局,在Row和Column要套一个Flexible

image.jpeg

ListView

ListView.builder只加载可见部分

cacheExtent缓存屏幕外内容

Container

您是否有需要一些设计的 widget,例如背景颜色,形状或某些大小限制?尝试将其包装在 Container 中!可帮助您组成,装饰和定位子 widget。

ListTile

为什么要花费数小时来实现行、列、容器以及各种间距和样式的完美项目布局?你只需要 ListTile 就能搞定! ListTile 为你实现 Material Design 模式的列表项,你只需要关注其中的内容即可

image.jpeg

SelectableText

您是否曾经想过要使应用程序中的一些文本可被选择呢? SelectableText 正是适合您的 widget!

DataTable

您是否有一些重要数据要以表格的方式显示给用户?使用 DataTable 定义列,行并自动调整单元格大小!

Slider

滑动进度条

AlertDialog

系统弹窗,不好用

AnimatedCrossFade

交叉淡入本是电影术语,意指一要素渐进淡入另一要素。若 Flutter widget 也有类似功能不是实用吗? 这方面,AnimatedCrossFade 就是解决方案。

切换组件

image.jpeg

60. DraggableScrollableSheet

您是否想将小部件拖到屏幕上? 小部件是否具有可滚动的内容? DraggableScrollableSheet 可以帮助您!

showModalBottomSheet的升级版,可以放大Sheet的区域

ColorFiltered

image.jpeg
image.jpeg

ToggleButtons

您想让用户从多个相关选项中选择吗? 将 ToggleButtons 添加到您的应用程序会有所帮助!

CupertinoActionSheet

您是否正在构建一个需要向用户提供一系列下一步操作选项的 iOS 风格应用程序? CupertinoActionSheet 是适合您的 Widget!

TweenAnimationBuilder

您是否想要一个简单的动画,但是没有一个内置的隐式动画 widget 能解决问题? TweenAnimationBuilder 可以满足您所有自定义动画的需求,而无需担心 AnimationController!

65. Image

您的 app 需要显示图片吗?让 Flutter 助您一臂之力。无论图片来源是 assets (有时称为资源)、网络、文件系统还是 RAM (随机存取内存)等等,都可利用 Image 这个 widget 显示于屏幕。

image.jpeg

66. DefaultTabController & TabBar

您需要将 widget 置入标签页吗?您可以使用 DefaultTabController、TabBar 和 TabBarView 小部件。

Drawer

需要为其他页面提供导航?欢迎尝试使用 Drawer!

SnackBar

您是否想在应用中显示快速消息?那么 SnackBar 非常适合您!SnackBar 可以让您在应用程序的底部弹出一条消息几秒钟。

image.jpeg

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。

  1. CupertinoActivityIndicator

如果您在 UI 中使用 Cupertino Widget,而您的应用程序需要加载指示器,那么可以选用 CupertinoActivityIndicator Widget!

iOS的圆形加载中

ClipOval

有时,图片或屏幕的其他部分看起来可能过于方正。而 ClipOval Widget 可将其子级裁剪为圆形和椭圆形。因此请发挥创意加以善用。

AnimatedWidget

是个抽象类,动画有许多不同的选项。在许多情况下,只需使用 AnimatedWidget 即可使 widget 实现动画。了解一些已经为您构建的动画 widget,以及如何构建自己的动画 widget!

Padding

内边距

CheckboxListTile

有时候,应用程序需要一个地方来放置法律条款、版本号、许可证和所有其他的小字号附加条款。不能到最后一刻才开始创建这部分。如果您遇到这种情况,有一个 Flutter Widgets 可以帮您解决!

多选

image.jpeg

AboutDialog

image.jpeg

83. Package:async

如果您使用 Dart 编码,则可能已经使用了 SDK 内置的异步支持,例如 Streams。您是否知道还有一个异步软件包,其中包含许多有用的附加内容?

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容