美文网首页
fluter基础组件原理和应用

fluter基础组件原理和应用

作者: 六道Peter | 来源:发表于2024-04-19 11:13 被阅读0次

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

相关文章

  • Angular组件篇

    Angular组件 一:组件基础 1:什么是组件? 组件(Component)是构成Angular应用的基础和核心...

  • 大型应用的iOS架构(下)

    大型应用的架构 大型应用的架构,采用组件化的方式,基础SDK组件和业务组件分开,稳定的模块采用库的方式,改动频繁的...

  • 基于Apache组件,分析对象池原理

    池塘里养:Object; 一、设计与原理 1、基础案例 首先看一个基于common-pool2对象池组件的应用案例...

  • react摘要

    基础 jsx(原理?) 实现一个简单的createElement及render方法 组件声明方式 props和st...

  • 组件化1.build.gradle的配置

    组件化原理 组件化是在模块化的基础上,通过修改build.gradle的参数,使各个模块可以在library和ap...

  • Mac搭建Fluter应用环境

    笔者的电脑是Mac,所以使用Mac演示:1、创建一个路径。例如我创建是: 然后创建一个文件夹: 把下载好的Flut...

  • 文档基础

    Vue3中文文档收获 基础 一.应用&组件实例 1.1.根组件 constRootComponent={/* 选项...

  • 实现领域驱动设计-应用程序

    应用程序定义 “应用程序”表示那些支撑核心域模型的组件,通常包括领域模型本身,用户界面,内部使用的应用服务和基础设...

  • 能力框架

    基础模块: 计算机基础、JVM 原理、多线程、设计模式、数据结构和算法 应用模块: 常用工具集、常用框架...

  • flutter-开发中,各种组件的应用场景【一】

    记录一下,解决不同应用场景的需求中各种组件的应用,这里不涉及原理,及详细解析。 场景1:组件需要点击事件 区别: ...

网友评论

      本文标题:fluter基础组件原理和应用

      本文链接:https://www.haomeiwen.com/subject/sztuxjtx.html