Flutter
文章平均质量分 90
Tʀᴜsᴛ³⁴⁵
纸上得来终觉浅,绝知此事要躬行
展开
-
flutter | 悬浮窗解决方案 flutter_floating
特性全局的悬浮窗管理机制支持各项回调监听,如移动、按下等支持自定义是否保存悬浮窗的位置信息支持单页面及全局使用,可插入 N 个悬浮窗支持自定义禁止滑动区域,例如在 距离顶部 50 到底部的区域内滑动等完善的日志系统,可查看不同悬浮窗对应的 Log支持自定义位置方向及悬浮窗的各项指标支持越界回弹,多指触摸移动,自适应屏幕旋转以及小窗口等情况…依赖方式flutter_floating: ^0.0.1地址github 地址pub.dev 地址效果图全局小屏缩放屏幕原创 2022-02-21 13:00:50 · 6220 阅读 · 3 评论 -
Flutter | Image 源码阅读和使用优化
前言Image 是 Flutter 用于显示图像的小组件,它可以加载网络,本地,文件或者内存中的图像,支持 JPEG、PNG、GIF、动画 GIF、WebP、动画 WebP、BMP 和 WBMP 格式。Flutter Image 本身也实现了内存缓存的机制,可以很大的提高图片展示速度等。重温 Image 的打开方式Image.networkImage.network("图片地址",fit: BoxFit.cover,width: ,height: 400)Image.fileImage原创 2022-02-09 19:05:29 · 2093 阅读 · 0 评论 -
Android 集成 Flutter | 与交互
这篇文章将以如何在 Android 项目中集成 Flutter 和 如何在两者之间进行交互为主要内容。原创 2022-01-19 10:51:48 · 2461 阅读 · 0 评论 -
Flutter | 布局流程
浅谈布局过程Layout(布局)过程中是确定每一个组件的信息(大小和位置),Flutter 中的布局过程如下:1,父节点向子节点传递约束信息,限制子节点的最大和最小宽高。2,子节点根据自己的约束信息来确定自己的大小(Szie)。3,父节点根据特定的规则(不同的组件会有不同的布局算法)确定每一个子节点在父节点空间中的位置,用偏移 offset表示。4,递归整个过程,确定出每一个节点的位置和大小。可以看到,组件的大小是由自身来决定的,而组件的位置是由父组件来决定的。Flutter 中布局类组件有很原创 2022-01-05 11:50:03 · 1800 阅读 · 0 评论 -
Flutter | 启动,渲染,setState 流程
前言用了这么久 Flutter 了,居然都不知道他的启动过程,真的是学之有愧啊,今天我们来分析一下 Flutter 的启动流程,以及他的渲染过程,对其做一个简单的剖析。启动流程Flutter 的启动入口在 lib/main.dart 里的 main() 函数中,他是 Dart 应用程序的起点,main 函数中最简单的实现如下:void main() => runApp(MyApp());可以看到,main 函数中只调用了 runApp() 方法,我们看看它里面都干了什么:void run原创 2021-12-02 11:13:06 · 2501 阅读 · 0 评论 -
Flutter | 三棵树构建流程分析
引言在 Flutter 中,很多人都知道三棵树,最熟悉就是其中的 Widget 树了,这也是平常开发的过程中最多用到的东西,那么其他两棵树你知道是什么吗,了解他们的构建流程吗?Widget 树在开发过程中,与我们息息相关的就是 widget 了,几乎所有页面上显示的都是 widget ,Widget 是 Flutter 的核心,是用户界面的不可变描述。事实上,widget 的功能就是描述一个 UI 元素的配置数据 ,也就是说 widget 并不是最终绘制到屏幕上的元素,它只是描述显示元素的一个配置原创 2021-11-18 18:45:19 · 2504 阅读 · 0 评论 -
Flutter| 事件循环,Fluture
牢骚故乡容不下灵魂,他乡容不下肉身!若能一世安稳,谁愿颠沛流离。正文在 Dart 中,没有多线程的概念,所谓的异步操作全部都是在一个线程里面执行的, 并且不会造成卡顿的原因就是事件循环(Event Loop),如下图所示,在程序的运行过程中,会有两个事件补充上图:Micortask Queue 为空 才会执行 EventQueue ,EventQueue 为空时程序结束,实际上,事件循环从启动的之后会一直执行。在程序执行过程中,如果有异步操作,这个操作就会添加到队列中,当发现队列不为空时原创 2021-11-05 16:15:37 · 2044 阅读 · 0 评论 -
Flutter | Sliver 系列
概述CustomScrollView:一个滚动的容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动的列表,如 Appbar, 列表,网格,等这种就可以直接使用 SliverAppBar,SliverList 和 SliverGridSlivers 不是单独指一个组件,而是指的一个系列,所以以 Sliver 开头的组件都是这个系列的,但是他们都只能作用于 CustomScrollView 中。常用到的 Sliver 有,SliverAppb原创 2021-08-13 18:13:38 · 840 阅读 · 1 评论 -
Flutter | 一文搞懂 BuildContext
概述[BuildContext] objects are actually [Element] objects. The [BuildContext] ,interface is used to discourage direct manipulation of [Element] objects.翻译过来的意思就是 [BuildContext] 对象实际上是 [Element] 对象。 [BuildContext] 接口用于阻止直接操作 [Element] 对象。根据官方的注释,我们可以知道 Bui原创 2021-08-02 15:48:33 · 985 阅读 · 1 评论 -
Flutter | Key的原理和使用
概述在几乎所有的 widget 中,都有一个参数 key ,那么这个 key 的作用是什么,在什么时候才需要使用到 key ?没有 key 会出现什么问题?我们直接看一个计数器的例子:class Box extends StatefulWidget { final Color color; Box(this.color); @override _BoxState createState() => _BoxState();}class _BoxState extend.原创 2021-06-21 20:45:00 · 736 阅读 · 0 评论 -
Flutter | 动画
简介在任何系统的 UI 框架中,动画的实现原理都是相同的,即:在一段时间内,快速地多次改变 UI 外观;由于人眼会产生视觉停留,所以最终看到的就是一个连续的动画;我们将 UI 的一次改变称为一个动画帧,对应一次屏幕的刷新,而决定动画流畅度的一种重要指标就是 FPS,即每秒的动画帧数。帧数越高,动画就会越流畅;一般情况下,动画帧率超过 16FPS ,就比较流畅了,超过 32FPS 就会非常细腻平滑,而超过32FPS 人眼基本就感受不到差别了,由于动画每一帧都是要改变 UI 输出,对设备的软硬件要求都较.原创 2021-05-08 10:08:05 · 789 阅读 · 1 评论 -
Flutter | 事件处理
概述在移动端,各个平台或者 UI 系统的事件模型都是基本一致,即:一次完整的事件分为三个阶段,手指按下,移动,抬起,而其他的双击,拖动等都是基于这些事件的当指针按下时,Flutter 会对应用程序执行命中测试(Hit Test) ,以确定指针与屏幕接触的位置存在哪些 Widget,指针按下事件(以及该指针的后续事件)会被分发到由命中测试发现的最内部的组件,然后从哪里开始,事件会在组件树中向上冒泡,这些事件会从最内部的组件分发的组件树的根路径上的所有组件,这个 Web 开发浏览器的事件冒泡机制相似,但是.原创 2021-04-01 11:20:52 · 678 阅读 · 0 评论 -
Flutter 弹出输入框导致溢出
修改:return Scaffold( resizeToAvoidBottomInset: false,}resizeToAvoidBottomInset:如果为true,则[body]和脚手架的浮动窗口小部件应自行调整大小,以避免屏幕键盘的高度由周围的[MediaQuery]的[MediaQueryData.viewInsets] bottom属性定义。例如,如果在支架上方显示了屏幕键盘,则可以调整主体的大小以避免键盘重叠,这可以防止键盘遮盖主体内部的小部件。默认为true。...原创 2021-03-09 12:59:22 · 906 阅读 · 0 评论 -
This error might indicate a memory leak if setState() is being called because another object is reta
E/flutter ( 4976): This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() fr原创 2021-03-09 09:39:53 · 2284 阅读 · 0 评论 -
Flutter | 布局组件
布局类组件都会包含一个或多个组件,不同的布局类组件对子组件(layout)方式不同。在 Flutter 中 Element 树才是最终的绘制树,Element 树是通过 Widget 树来创建的 (通 Widget.createElement()) ,Widget 其实就是 Element 的配置数据。在 Fluter 中,根据 Widget 是否需要包含子节点将 Widget 分为了三类,分别对应三种 Element,如下表:Widget对应的 Element用途LeafRe.原创 2021-03-02 10:26:37 · 638 阅读 · 0 评论 -
Flutter | 常用组件
文本常用的配置class TextTest extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: EdgeInsets.all(30), child: Column( children: <Widget>[ Text("he.原创 2021-02-20 12:01:27 · 1649 阅读 · 0 评论 -
Flutter | 基础 Widget
基础 Widget在 Fluter 中,几乎所有的都是一个 widget ,与原生开发不同的是,widget 的范围更加广阔,他不仅可以表示 UI 元素,也可以表示一些功能的组件,如手势检测的 widget,用于主题数据传递的 Theme 等等。所以,在大多数时候,可以认为 widget 就是一个控件,不必纠结于概念Widget 的功能是 “描述一个 UI 元素的配置数据”,widget 并不是表示最终绘制在屏幕上的显示元素,正在代绘制屏幕上的是 Element ,下面就看一下 ElementWid.原创 2021-02-20 12:00:18 · 383 阅读 · 0 评论 -
Flutter | 异常处理
本文示例代码在了解 Flutter 异常捕获之前需要先了解一下 Dart 的异常处理以及 Dart 的单线程模型,只有知道了代码的执行流程,我们才能只要该在什么地方去捕获异常Dart 中的异常Dart 可以抛出和捕获异常,如果没有被捕获,则会抛出,最终导致程序终止运行和 Java 不同,Dart 中的所有异常时非检查异常,方法不会声明它们抛出的异常,也不要求捕获任何异常Dart 提供了 Exception 和 Error 类型,以及一些子类型。也可以自定义异常类型。此外,Dart 程序可以抛出任.原创 2021-01-20 11:53:02 · 847 阅读 · 0 评论 -
Flutter | 资源管理
Flutter 安装包中会包含代码和 assets 资源两部分,Assets 是会打包到程序安装包中的,可在运行时访问。常见类型的 assets 包括静态数据,如 json ,配置文件,图片,MP3,gif 等。加载图片例如加载一张图片,在 Flutter 中使用 pubspec.yaml 文件来管理所需要的文件在加载图片之前,需要在根目录下创建一个文件夹,里面存放图片,以及它所对应分辨率的图片如上图,创建了 images 文件夹,然后放入图片,并创建对应分辨率的文件夹,将图片放进去即可.原创 2021-01-18 15:25:38 · 402 阅读 · 1 评论 -
Flutter | 包管理
在日常开发中,很多时候需要用到第三方的 SDK ,这些 SDK 可能会被很多个项目用到,因此可以将这些代码单独抽到一个模块中,使用的时候只需要集成对于的模块即可, 在 Java 中,模块会被打成一个 jar 包 在 Android 中,模块会被打成一个· aar 包 一个 app 在开发的过程中可能会依赖非常多的包,这些包通常都会出现交叉依赖,版本依赖等,如果需要手动管理,则会非常麻烦,因此,各种编程语言的官方都会提供一下包管理工具,如: 在 Android 中提供了 G.原创 2021-01-12 21:44:08 · 205 阅读 · 0 评论 -
Flutter | 路由管理
什么是路由?对于移动开发者来说,路由指的就是页面,在 Android 中就是 activity,在 ios 中Wie ViewController说简单点就是映射页面跳转关系的,当然它也包含跳转相关的一切功能而路由管理则就是管理这些页面直接跳转,通信方式等示例1,创建一个新的路由,命名 NewRoute/// StatelessWidget 无状态组件class NewRoute extends StatelessWidget { @override Widget build(B.原创 2021-01-08 11:03:45 · 296 阅读 · 0 评论 -
上手指南 | Dart,随用随查
入门最近打算要入坑 Flutter,所以在此进行记录,随用随查;不要怂,就是干,一个简单的 Dart 程序//????函数,应用从这里开始执行main(){ var number = "Hello World"; printInteger(number);}//定义一个函数printInteger(int aNumber){ print('The number is $aNumber');}重要的概念在学习 Dart 语言时,应该基于以下事实和概念任何保存在变量中的都原创 2020-10-29 11:54:32 · 319 阅读 · 0 评论