fluter基础组件原理和应用

1、

flex 和 flexible 是flutter  弹性布局的布局算法

Flex 是 Row和Column的父组件.

Flex组件可以沿着水平或垂直方向排列子组件

Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。

Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力

Flexible并不会强制子组件填充可用空间,子组件实际大小是多少,它就是多大.

2、Expanded 的父组件是Flexible

可以按比例“扩伸” Row、Column和Flex子组件所占用的空间

flex参数为弹性系数,默认是1,如果为0或null,,则child是没有弹性的,即不会被扩伸占用的空间。如果大于0,所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。

Expanded、Flexible只在Row、Column组件使用。

3、

flutter 中尺寸限制类容器组件包括ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、LimitedBox、Container,Expanded。这些组件可以约束子组件的尺寸

ConstrainedBox用于对子组件添加额外的约束 ,最大宽高、最小宽高


UnconstrainedBox组件不对子组件做任何约束,但仍然受父控件的约束,超出父控件的区域会报错

A RenderConstraintsTransformBox overflowed by 50 pixels on the left, 50 pixels on the top, 50 pixels on the bottom, and 50 pixels on the right.


SizedBox是具有固定宽高的组件,直接指定具体的宽高

4、单组件布局容器  IntrinsicWidth / IntrinsicHeight

IntrinsicHeight的作用是调整child到固定的高度。官方说这个很有用,但是应该尽量少用,因为其效率问题。

这个控件的作用,是将可能高度不受限制的child,调整到一个合适并且合理的尺寸。

IntrinsicWidth

当stepWidth不是null的时候,child的宽度将会是stepWidth的倍数,当stepWidth值比child最小宽度小的时候,这个值不起作用;

可以防止子组件过高或过宽导致的屏幕越界,

5、FittedBox

在开发的过程中经常会遇到子widget大小超过父widget大小的现象。子widget应该遵循父widget的约束,如果子widget的原始大小超过了父原始视图的大小,就需要进行相应的处理(比如:缩小、裁剪等)。

如果父 widget 宽度固定高度不固定,则默认情况下 Text 会在文本到达父组件宽度的时候换行。

如果我们想让 Text 文本在超过父组件的宽度时不要换行而是字体缩小,这时候就需要用到 FittedBox 组件。


6、

通过 LayoutBuilder,我们可以在布局过程中拿到父组件传递的约束信息,然后我们可以根据约束信息动态的构建不同的布局。


7、

FutureBuilder 是flutter中用于构建基于 Future 返回的最新计算快照(Snapshot)的 Widget。使用 FutureBuilder 可以非常方便地根据异步计算的结果来创建 UI。

比如请求网络数据回来后创建widget。

builder 方法可能会被多次调用,尤其是在 Future 函数执行的过程中,它可能会调用多次 builder 来重建 UI。

8、状态管理

在 Flutter 中,有不同的状态管理方法可供选择,包括:

StatefulWidget、InheritedWidget、Provider就是基于InheritedWidget、Redux、BLoC 、GetX

InheritedWidget 它可以使 Widget 树中的祖先 Widget 共享数据给它们的后代 Widget

允许你共享数据和状态,并且可以让子部件自动更新当共享的数据发生变化时。

9、

而Dart是一个在单线程中运行的,一般使用Future异步来处理耗时操作。

项目中用到最多的就是通过future去处理网络请求

但是Future是表示单个计算结果的异步封装

Stream也是用来处理异步操作的,Stream所用的设计模式则是观察者模式,getx的obx就是使用的观察者模式

Stream和Future都是用于接收异步事件数据,而Stream表示的是多个序列化事件的异步封装

Completer  用来控制Future的调用,比如两个异步网络请求,第二个要依赖第一个结果,这时就可以用到 Completer

10、isolate 

Dart是单线程模型,单线程模型中主要就是在维护着一个事件循环(Event Loop)。

所以Dart只有一个主线程, 在Dart叫isolate(隔离)

所有的Dart代码都是运行在Isolate之中

isolate是Dart对 「Actor并发模型」 的实现

任何Dart程序的并发都是运行多个isolate的结果

isolate单向通信、isolate双向通信

什么场景该使用Future还是isolate

如果代码片段不能被中断,使用传统的同步过程(一个或多个相互调用的方法);

如果代码片段可以独立运行而不影响应用的性能,可以考虑通过Future使用事件循环;

如果繁重的处理可能需要一些时间才能完成,并且可能影响应用的性能,考虑使用Isolate。

如果一个方法需要几毫秒用Future

如果一个处理流程需要几百毫秒用Isolate

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