- 博客(263)
- 资源 (42)
- 收藏
- 关注
RSS订阅
翻译 【原理】Flutter内部结构--FLutter是如何工作的？
Flutter 是如何工作的？什么是Widgets, Elements, BuildContext, RenderObject, Bindings…阅读难度：初级介绍刚开始接触 Flutter 的时候，互联网上很难找到相关的资料，尽管也有不少相关的文章，但几乎没有关于 Flutter 内部实现的。Widgets, Elements, BuildContext 究竟是什么？为什么 Flutter 执行效率那么高？执行的时候，为什么有时候会出现不符合预期的结果？经常提到的树，究竟是什么？当你在开发一
2021-11-19 10:04:51
1333
原创 Flutter Inspector无法显示完整的Widget树
在Flutter开发过程中发现Flutter Inspector一直无法显示完整的Widget树
2022-08-11 16:07:11
1393
1
原创 Gradle复合构建
复合构建是指包含其他构建的构建。在许多方面，复合构建类似于 Gradle 多项目构建，不同之处在于它不包含单个项目，而是包括完整的构建。多项目构建和复合构建区分： 多项目构建重点是如何组织多个项目，项目之间往往是存在业务逻辑联系的。也是我们平常用的比较多的场景：比如项目APP，依赖ModuleA和ModuleB，表现形式如下：复合构建： 复合构建重点是如何整合多个独立的项目，被引入的项目是可以独立运行的，但不一定有逻辑联系。比如一个项目，它依赖公司另一个独立的 SDK，这个 SDK 可以作为独立
2022-07-04 12:02:25
1563
原创 Webpack5多页面打包通用方案
文章目录背景官方多入口配置多项目打包步骤安装glob模块修改webpack.config.js 配置，新增entries函数，修改entry:entries()，修改output的filename为"[name].js"测试执行打包命令`npm run build`,结果如下。背景前面介绍过，Webpack不单单只支持单页面项目（SPA），也支持多页面项目（MPA）的打包。那么在多页面项目开发过程中，每新增一个页面模块，都需要修改webpack.config.js配置文件（增加一个入口），这个时候我们就
2022-02-27 14:40:33
2439
1
原创 Webpack5静态资源内联
文章目录背景介绍资源内敛的意义使用步骤插件安装内联html内联js内联CSS直接使用`style-loader`借助 `html-inline-css-webpack-plugin`背景介绍首先什么是静态资源内联？静态资源内联，就说将CSS，JS，图片等静态资源，内联到html。比如上一文Webpack5之px自动转换成rem提到的，页面font-size大小计算的js脚本。我们可以通过静态资源内联来减少文件请求数量，优化加载速度。资源内敛的意义页面框架的初始化脚本，如rem换算等上报相关打点
2022-02-26 14:42:12
1967
2
原创 Webpack5之px自动转换成rem
文章目录背景介绍移动端 CSS px 自动转换成 rem背景介绍相信有过开发经验的同学都知道，无论你是做IOS，Android，还是前端开发，在做页面适配的话，都需要视频各种尺寸大小的屏幕。在传统的开发过程中，想要去适配不同大小的屏幕需要使用媒体查询实现@media screen and，这样一来适配多少个屏幕就需要编写多少个适配代码，无端添加工作量，切维护困难。为了结局上面地问题CSS3新增了一个相对单位rem。W3C 对 rem 的定义： font-size of the root elemen
2022-02-26 00:52:36
2376
1
原创 Webpack5之CSS3自动补齐前缀
文章目录背景使用步骤背景首先看文章标题，我们带着一个疑问，为什么CSS3需要带前缀呢？浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。各大浏览器的标准没有完全统一，导致各个浏览器地兼容不一样，到现在，依然还有很多属性需要带前缀。前缀浏览器内核-ms-IE浏览器Trident内核-moz-FirefoxGecko内核-o-OperaPresto内核-webkit-Chrome和SafariWebkit内核浏览器地兼容性问题，可以
2022-02-25 15:15:34
1443
2
原创 Webpack5文件压缩
文章目录HTML压缩CSS压缩JS压缩常遇坑位介绍我们在配置插件的时候有的是配置在`optimization.minimizer`中，有的是配置在`plugin`中，区别是什么？我们明明配置了`optimization.minimizer`为true ，但是为什么还是没有被压缩（无效）HTML压缩HtmlWebpackPlugin` 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该
2022-02-25 08:53:03
2428
1
原创 Webpack文件指纹
文章目录什么是文件指纹文件指纹的作用文件指纹策略占位符介绍文件指纹的设置JS文件指纹设置图片文件指纹设置CSS文件指纹设置设置步骤文件指纹项目应用什么是文件指纹文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理文件指纹的作用用作版本管理时，如果一个项目需要发布，只需要发布修改过的文件指纹；对于没有修改过的文件，用户在访问的时候，依旧可以使用浏览器缓存好的，无需二次加载，加速页面访问。文件指纹策略Hash和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash
2022-02-24 21:25:43
2121
原创 Webpack5中的文件监听与热更新
文章目录Webpack中的文件监听启动 webpack 命令时，带上--watch参数再配置文件webpack.config.js中设置watch：true文件监听的与原理热更新安装webpack-dev-server配置package.json将webpack.config.js中node改为development引入webpack自带插件'webpack.HotModuleReplacementPlugin'插件配置devServerWebpack中的文件监听Webpack文件监听是指在开发过程中，
2022-02-24 10:54:56
2294
原创 Webpack5资源解析
文章目录解析ES6babel具体使用步骤首先需要安装babel，以及相关依赖新增.babelrc配置文件，内容如下修改webpack.config.js文件解析CSS具体步骤解析Less和SaSS具体步骤解析图片使用步骤：解析字体使用步骤解析ES6webpack本身是支持原生js的解析，但是对于一些es6的语法特效，webpack原生是并不能了解到的，因此需要借助于babel-loaderbabel的配置文件：.babelrcbabel具体使用步骤首先需要安装babel，以及相关依赖np
2022-02-23 16:59:42
1187
1
原创 Webpack核心概念
文章目录核心概念entryentry的两种用法outputoutput两种用法loaders用法目前常见的Loadersplugins常用的Pluginsmode核心概念本文主要学习webpack入门的一些核心概念，包括webpack.config.js的entry，output，loaders，plugins，mode等，下面我们一个个来介绍entryentry是用来指定webpack的打包入口，Entry 属性指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，
2022-02-23 12:28:21
1476
2
原创 初识webpack与webpack环境搭建
文章目录认识webpack配置文件webpack配置结构环境搭建安装Node.js和NPMNVM安装Nodejs和NPM安装环境搭建安装webpack和webpack-cli创建空目录和package.json安装webpack和webpack-cli简单的DEMO手动创建webpack配置文件创建项目源文件执行打包命令认识webpack配置文件webpack默认配置文件：webpack.config.js可通过webpack --config 指定配置文件例如我们再开发环境将配置文件命名为web
2022-02-22 08:37:24
1260
1
原创 解密：通配符的匹配很全面, 但无法找到元素 ‘context:annotation-config‘ 的声明
解密：通配符的匹配很全面, 但无法找到元素 ‘context:annotation-config’ 的声明不知道大家在开发或者刚开始学习Spring的时候是否遇到过类似这种异常：找不到元素 ‘beans’ 的声明。通配符的匹配很全面, 但无法找到元素 ‘context:annotation-config’ 的声明通配符的匹配很全面, 但无法找到元素 ‘aop:config’ 的声明提示这种错误的原因其实很简单，一般原因是我们在Spring的XML Schema的配置文件错误导致，在我们添加一个
2021-11-30 10:51:26
2542
1
原创 【Flutter核心类分析】深入理解RenderObject
文章目录背景RenderObject分类创建驱动驱动小结：布局绘制文章小结背景Widget，Element，RenderObject可以说是Flutter Framework的三个核心成员，本文我们一起来学习下RenderObject。宏观上来讲，一个RenderObject就是我们之前说的三棵树之一RenderObject Tree中的一个对象，它的职责主要有三个：布局，绘制，命中测试。其中命中测试在之前的文章一文深入了解Flutter事件机制有过详细的分析，本文我们主要来讲解其它两点：布局和绘制。
2021-11-22 22:18:33
2720
原创 开源投屏工具scrcpy（手机投屏到电脑）介绍
文章目录介绍系统要求安装方法LinuxWindowsMacOS运行功能介绍采集设置降低分辨率修改码率限制帧率画面裁剪锁定屏幕方向编码器采集屏幕录制v4l2loopback缓冲连接无线多设备在设备连接时自动启动SSH 隧道窗口设置标题位置和大小无边框保持窗口在最前全屏旋转其他镜像设置只读显示屏保持常亮关闭设备屏幕退出时息屏显示触摸关闭屏保输入控制旋转设备屏幕复制粘贴双指缩放物理键盘模拟 (HID)文本注入偏好按键重复右键和中键文件拖放安装APK将文件推送至设备快捷键自定义路径介绍地址：https://gi
2021-11-22 09:10:20
7831
1
原创 【Flutter核心类分析】深入理解Element
文章目录背景Element分类核心源码分析Element.updateChildElement.inflateWidgetElement.upateStatelessElement.updateStatefulElement.updateProxyElement.updateRenderObjectElement.updateSingleChildRenderObjectElement.updateMultiChildRenderObjectElement.updateElement.mountCompon
2021-11-18 12:00:38
6761
5
原创 【Flutter核心类分析】深入理解Widget
文章目录背景Widgets系统分类核心源码WidgetStatelessWidgetStatefulWidgetStatesetStateInheritedWidgetRenderObjectWidget总结背景相信我们在Flutter开发过程中接触最多的无疑就是Widget了，通过Widget我们可以实现诸多功能：描述UI的层级结构定制UI的各色样式，国际化（font， color， theme）定义UI布局方式（padding，center等）数据共享（事件传递）(notification
2021-11-16 20:38:04
3698
8
原创 【Flutter原理】深入理解跨组件共享Provider
背景通过前面的文章深入理解InheritedWidget和文章深入理解Notification，我们知道Flutter原生提供了两种组件之间数据共享的组件自上而下的共享数据方式采用InheritedWIgdt，自下而上的数据共享方式采用Notification，如果是跨页面共享数据呢？跨页面/组件共享状态的管理方式比较多，比如全局时间总线EventBus，它是一个第三方的插件，使用观察者模式实现，通过它可以实现跨组件状态同步。但是它有两个缺点：必须显示定义各种事件，不好管理需要手动注册和取消注册，
2021-11-12 16:55:29
3517
原创 【原理】一文深入了解Flutter事件机制
背景Flutter作为一个跨平台的UI开发框架，有着自己独立的一套UI框架已经渲染引擎，那么它肯定有着自己一套独立的事件机制，用于分发管理各种各样的点击，双击，滑动等等事件，本文从Android平台层原生视图FlutterView出发，来探讨一下Flutter中的的事件分发机制。文章目录背景Flutter事件从哪来onTouchEventdispatchPointerDataPacketonPonterDataPacket_handlePointerDataPackethandlePointerEven
2021-11-11 22:05:44
3473
原创 【Flutter核心类分析】深入理解数据共享Notification
背景上一文深入理解InheritedWidget我们知道，InheritedWidget的数据共享方式是父Widget到子Widget的逐层传递，适用于父Widget状态变更通知子widget变更的场景；那么本文讲解的Notification正好相反了，数据的的流动方式就是从子Widget向上传递只父Widget，适用于子widget状态变化，通知上层做相应处理的场景。Notification用法Notification用法分为以下几个步骤；自定义一个通知类，需要继承自Notification类；
2021-11-11 11:01:11
2369
原创 【Flutter核心类分析】深入理解数据共享InheritedWidget
背景Flutter提供了用于Widget间共享数据的InheritedWidget，当InheritedWidget发生变化时，它的子树中所有依赖了它的数据的Widget都会进行rebuild，这使得开发者省去了维护数据同步逻辑的麻烦。InheritedWidget看名字就是一个Widget，那么它是如何做到数据共享，如何做到通知更新的呢？下面我们一起来看看。InheritedWidget用法InheritedWidget用法分为以下几个步骤；自定义Widget继承自InheritedWidget
2021-11-10 21:30:46
1513
原创 【Flutter核心类分析】深入理解BuildOwner
背景在之前的文章【Flutter原理】三棵树的诞生与核心流程一文中，我们第一次接触到了buildOwner，也就是在WidgetsBinding对象的attachRootWidget(widget rootWidget)方法中，我们现在来回顾一下： void attachRootWidget(Widget rootWidget) { _readyToProduceFrames = true; _renderViewElement = RenderObjectToWidgetAdapte
2021-11-10 13:07:04
1737
2
原创 【Flutter核心类分析】深入理解Key.
背景我们在进行Flutter开发过程中，几乎每一个Widget都会有一个可选参数——Key。但是我们却很少去传这个值，既然我们可以不用传，那么这个Key作用到底是什么呢？问题下面我们先来看看这样一个场景：void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(
2021-11-09 23:13:42
1603
原创 【Flutter核心类分析】深入理解BuildContext
背景不管是刚写Flutter开发还是Flutter开发的老将，相信对BuildContext一定不陌生。那么BuildContext是什么呢？为什么我们每次StatelessWidget.build(context)，State.build(context)在调用build的时候都需要传入一个BuildContext呢？本文主要讲下BuildContext来龙去脉，已经它的使用场景。常见的BuildContext场景首先我们一起来看看BuildContext的使用场景，相信做过Flutter开发的同
2021-11-09 15:38:50
1211
原创 【Flutter原理】Platform与Dart通信方式分析
背景我们知道Flutter作为一个跨平台框架，那么必定存在着Native到Dart，Dart到Native之间的双工通信问题。本文我们一起来看看Flutter 平台通信相关原理。三种通信方式Flutter 官方提供三种 Platform 与 Dart 端消息通信方式，他们分别是 MethodChannel、BasicMessageChannel、EventChannel。他们都是全双工通信，他们的主要区别是：MethodChanel：用于传递方法调用(Method invocation)，一次性通
2021-11-07 16:56:08
407
原创 2021年了，来谈谈Flutter的未来
背景介绍从19年过去的两年时间，Flutter在Google带领各大厂商的引领下，飞速发展。flutter sdk官方也在快速的迭代升级，从1.0.0到现在的2.5.0，从底层引擎到适配层再到框架层都有比较大的更新，忒别是在混合开发模式的支持上不断的优化，我们项目也是从1.0.0，到1.12.13，再到2.0.0，尽力过几次惨痛的升级，也感受到了Flutter官方对于开发者的友好程度。可见google官方对flutter的支持程度。跨平台方案分析亲身体验从最开始的Cordov/AppCan，到RN/W
2021-11-05 12:05:32
6539
6
原创 No Directionality widget found错误背后的原理
文章目录背景原理背景我们常在做Flutter开发的时候经常会碰到No Directionality widget found这种错误。这种错误产生的原因很简单就是因为在使用Text这个widget的时候，没有给他指定textDirection，在其构造方法里面加上即可修复问题，eg:void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContex
2021-11-05 11:00:02
2774
原创 【Flutter原理】三棵树的诞生与核心流程
文章目录背景三棵树的来源时序图attachRootWidget分析attachToRenderTree分析mount分析总结背景相信写过Flutter的开发同学都知道，我们的Flutter UI是由各色各样的Widget组成。一般情况下很少只绘制单个widget的情况。那么如何有效的编排widget的结构，以及高效的将这些widget描述信息交给Flutter Engine，从而渲染出可媲美原生UI的性能的。本文我们就来探究下widget背后三棵树的来龙去脉。三棵树的来源从前面的文章"Flutte
2021-11-04 14:11:22
1559
原创 一文彻底理解Flutter布局约束
文章目录前言约束布局规则重要的限制样例解释样例1样例2样例3样例4样例5样例6样例7样例8样例9样例10样例11样例12样例13样例14样例15样例16样例17样例18样例19样例20样例21样例22样例23样例24样例25样例26样例27样例28样例29严格约束（Tight）VS宽松约束（Loose）前言我们在写Flutter UI的时候，经常碰到明明widget设置width或者height，但是看上去就是无效呢。明明没有设置某个widget的大小，反而却呈现出我们想要的大小。又或者是各种莫名奇妙的
2021-11-03 11:29:19
2344
2
原创 Flutter架构概览
前言本文总结Flutter架构概览，包含其设计层面的核心原则以及概念。Flutter是一个跨平台的UI工具集，它允许在各种操作系统上复用相同的代码，同时应用程序直接与底层平台交互，避免了不同平台视图的差异，同时也让开发者能够在不同平台上都能交付拥有原生体验的高性能应用。开发阶段，FLutter应用会在一个VM（程序虚拟机）中运行，从而可以保留状态且无需重新编译的情况下，热重载相关的更新。对于发行版(release)，Flutter程序会直接编译错机器码，或者针对Web平台的JavaScript。概览
2021-11-02 16:05:19
2064
4
原创 【Flutter原理】平台视图系列问题分析
通过上一篇Flutter实践分析之——平台整合Hybrid Composition我们对平台视图的原理有了一定的了解，我们知道FlutterMutatorView是平台视图PlatofrmView的parentView，那么我们再抛出几个疑问：一个widget tree中多个PlatformView的时候，是对应一个还是多个FlutterMutatorView？widget tree中多个PlatformView重叠的时候，是对应一个还是多个FlutterMutatorView？在widget tr
2021-11-01 15:36:23
1303
原创 【Flutter原理】平台视图整合Hybrid composition分析
文章目录背景如何接入Hybrid composition1. 新建原生工程和Flutter Module2. 新建native_view_example.dart文件3. 在main.dart文件中显示4. 新建NativeView5. 新建NativeViewFactory6. 注册平台视图Hybrid Composition原理分析FlutterImageView分析PlatformViewLink分析PlatformViewController分析AndroidViewSurface分析Platfor
2021-10-31 23:03:18
926
1
原创 【Flutter原理】FlutterActivity/Fragment原理流程分析
前言之前了解了flutter从启动到view的创建流程，本文一起来分析下Flutter Android端FlutterActivity和FlutterFragment代码流程分析。Flutter Android在创建新Flutter项目的时候并没有看到FlutterActivity/FlutterFragment，原因是Flutter Android的源码主要在maven端，也就是：io.flutter:flutter_embedding_xxx包中，配置地方是在flutter.gradle，可查看文章
2021-10-26 13:45:40
2327
11
原创 【Flutter原理】FlutterView相关源码分析
文章目录前言Flutter渲染模式FlutterSurfaceView分析FlutterTextureView分析FlutterImageView分析FlutterRender分析FlutterView分析总结（类图，架构图）类关系图架构图前言 通过前面文章的分析我们了解到FlutterActivity的显示最终是通过FlutterView进行渲染。本文我们深入FlutterView的源码来具体分析下Flutter UI是如何一步步显示到Activity，又是如何跟Flutter Engine关联，
2021-10-24 07:38:15
4023
2
原创 如何快速编写Markdown、博客文档（语法收藏）
Markdown是一种轻量级标记语言，用来编写文本文档，后缀为.md。目前大部分博客文章都是支持Markdown编写。下面介绍一个我常用的编写文档的工具：工具：Typora，支持Mac，Window，Linux基础语法1、目录[TOC]会自动为当前的目录生成目录，目录是根据当前文档的标题来生成部分网站可能不支持此功能本文效果如下：文章目录基础语法1、目录2、标题h1h2h3h4h5h63、文字修饰4、分割线5、列表5.1、有序列表5.2、无序列表5.3、待办列表5.4、列表嵌套6、.
2021-10-22 11:17:50
2738
17
原创 通俗易懂一文入门UML类图（笔记收藏）
平常阅读一些源码或者是设计应用架构时候，类关系错综复杂，这篇文章主要记录UML类图表示以及类关系呈现笔记。文章目录UML类途中常见的几种关系：如何绘制UML类的表示类的关系表示方式泛化关系实现关系关联关系聚合关系组合关系依赖关系总结UML类途中常见的几种关系：泛化(Generalization)：继承关系，extend实现(Realization)：实现接口，类与接口的关系，implements关联(Association)：拥有的关系，单项关联（单项箭头 ），双向关联（无箭头），自身
2021-10-20 15:40:15
2768
8
原创 【Flutter原理】Flutter App启动流程分析
首先手动创建一个hello_project的Flutter Project，再一步步跟着源码走按照惯例我们首先查找是否有自定义的Application，发现Flutter Project没有自定义Application，然后我们再来看MainActivity.ktclass MainActivity: FlutterActivity() {}MainActivity代码无比简单，我们继续看FlutterActivity.java（Google官方都推Kotlin了，FlutterActivity居
2021-10-19 21:15:43
1188
原创 一文搞定Dart入门（学习笔记）
文章目录前言重要概念变量变量定义默认值Final/Const数据类型NumberStringBooleanList(也被称为Array)MapSet函数可选参数匿名函数闭包返回值常用的操作符类型判定运算符条件表达式级联运算符 (..)非空调用三目赋值运算符整除控制流程语句`if` and `else``for` loops`while` and `do`-`while` loops`break` and `continue``switch` and `case``assert`异常类使用类的成员变量构造函数
2021-10-15 17:15:40
1703
3
原创 【Flutter原理】Flutter入口runApp源码分析
Flutter APP跟其他应用程序一样，入口也是在main方法，其内部就是一行代码，调用runAppp方法，将我们定义的根widget添加到界面上。作为Flutter的入口函数，我们有必要了解其背后的工作原理，runApp都做了些啥，能让我们的widget显示在界面上，同事支持各种事件操作，界面刷新等。首先我们来看看runApp源码：// App是一个widget，是Flutter应用启动以后要展示的第一个组件void runApp(Widget app) { // 1. 确保Widgets
2021-10-14 16:11:10
2646
1
JavaWeb开发帮助文档大集合
2011-10-21
httplook.exe
2011-05-17
(11或12系统下我)Tuxera_NTFS_2021_(2021.0.0)_(最低10.4)
2022-02-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人