English practising
hack something together v. to get into someone else’s computer system without permission in order to find out information or do something illegal
hear me out 听我说
masterfully 熟练地，巧妙地
detect 探测，检测
archive /ˈɑːkaɪv/ n. a collection of historical records relating to a place, organization, or family / v. to store historical records or documents in an archiveThe file was archived about a year ago after a worker wrongly labeled it as inactive. / These old photographs should go in t ...
空间适配(FittedBox)
空间适配（FittedBox）FittedBox子组件大小超出了父组件大小时，如果不经过处理的话 Flutter 中就会显示一个溢出警告并在控制台打印错误日志，比如下面代码会导致溢出：
1234Padding( padding: const EdgeInsets.symmetric(vertical: 30.0), child: Row(children: [Text('xx'*30)]), //文本长度超出 Row 的最大宽度会溢出)
运行效果如图所示：可以看到右边溢出了 45 像素。
上面只是一个例子，理论上我们经常会遇到子元素的大小超过他父容器的大小的情况，比如一张很大图片要在一个较小的空间显示，根据 Flutter 的布局协议，父组件会将自身的最大显示空间作为约束传递给子组件，子组件应该遵守父组件的约束，如果子组件原始大小超过了父组件的约束区域，则需要进行一些缩小、裁剪或其他处理，而不同的组件的处理方式是特定的，比如 Text 组件，如果它的父组件宽度固定，高度不限的话，则默认情况下 Text 会在文本到达父组件宽度的时候换行。那如果我们想让 Text ...
flutter中的层叠布局（Stack、Positioned）
层叠布局（Stack、Positioned）
层叠布局和 Web 中的绝对定位、Android 中的 Frame 布局是相似的，子组件可以根据距父容器四个角的位置来确定自身的位置。层叠布局允许子组件按照代码中声明的顺序堆叠起来。Flutter 中使用 Stack 和 Positioned 这两个组件来配合实现绝对定位。Stack 允许子组件堆叠，而 Positioned 用于根据 Stack 的四个角来确定子组件的位置。
StackStack 组件定义如下：
1234567Stack({ this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.clipBehavior = Clip.hardEdge, List<Widget> children = const <Widget>[],})
alignment：此参数决定如何去对齐没有定位（没有使用 Positioned）或部分定位的子组 ...
Dart类中的getter和setter
Dart 类中的 getter 和 setter
Dart 类中的 getter 和 setter 修饰符允许程序分别初始化和检索类字段的值。使用 get 关键字定义 getter 或访问器。Setter 或存取器是使用 set 关键字定义的。默认的 getter/setter 与每个类相关联。但是，可以通过显式定义 setter/getter 来覆盖默认值。getter 没有参数并返回一个值，setter 只有一个参数但不返回值。
Dart 不使用 getter 和 setter 修饰符的例子定义一个 Rect 类，在初始化构造函数的时候可以传入宽度高度，调用 area 方法可以计算面积。
1234567891011121314class Rect{ num height; num width; Rect(this.height,this.width); area(){ return this.height*this.width; }}void main(){ Rect r=new Rect(1 ...
Dart中的静态成员和静态方法
Dart 中的静态成员和静态方法Dart 中的静态成员:
使用 static 关键字来实现类级别的变量和函数
静态方法不能访问非静态成员，非静态方法可以访问静态成员
Dart 中的静态属性和静态方法可以直接使用类名称访问。1234567891011class Person { static String name = '张三'; static void show() { print(name); }}main(){ print(Person.name); Person.show();}
静态方法不能访问非静态成员，非静态方法可以访问静态成员123456789101112131415161718192021222324252627class Person { static String name = '张三'; int age=20; static void show() { print(name); } void pri ...
flex的三个属性
flex:flex-grow flex-shrink flex-basis
flex-grow:定义放大比例，默认为 0，规定项目相对于其他灵活的项目进行扩展的量
flex-shrink: 定义了项目的缩小比例，仅在宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值，默认为 1
flex-basis:给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
示例 1：子元素都设置为 flex:1 的时候平均分
123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed ...
.jpg)
前端路由的hash模式和history模式
前端路由是现代单页面应用（SPA）中不可或缺的一部分，它允许用户在不重新加载整个页面的情况下，实现页面之间的切换。在前端路由的实现中，Hash 模式和 History 模式是两种常见的技术。本文将深入探讨这两种模式的原理和区别。
Hash 模式
Hash 模式是基于 URL 的 hash 值来实现的。在 URL 中，hash 值是跟在#符号后面的部分，通常用于指向页面内的某个位置。在 Hash 模式的路由中，我们利用这个特性来模拟完整的 URL 路径。
原理
当用户点击链接时，只有 hash 值发生变化，浏览器不会向服务器发送请求。这是因为 hash 值的改变只会触发浏览器的 hashchange 事件，而不会导致页面的重新加载。前端路由库可以监听这个事件，根据 hash 值的变化来动态渲染对应的组件，从而实现无刷新的页面切换。
优点
兼容性好：所有支持 JavaScript 的浏览器都支持 hash 值的变化，包括老旧的浏览器。
无需服务器配置：由于浏览器不会向服务器发送 hash 值，因此无论 hash 值如何变化，服务器都会返回同一个页面。
缺点
不利于 SEO ...
对SVG矢量图的认识
Scalable Vector Graphics（SVG，可缩放矢量图形）是一种用于描述二维矢量图形的 XML 格式的图形标准。与位图图形（如 JPEG、PNG）不同，SVG 是基于 XML 的，它有一些显著的优势。
可缩放性
SVG 图形是矢量图形，因此可以无限放大而不失真。这使得 SVG 特别适用于响应式设计，其中图形需要根据设备和屏幕尺寸进行调整。
文本可编辑
SVG 是一种 XML 格式，可以使用文本编辑器直接编辑。这使得在 SVG 图形中嵌入文本和其他标记成为可能，便于编辑和维护。
小文件尺寸
SVG 文件通常比相应的位图图形文件小，因为它们以文本形式存储，并且可以进行 gzip 或其它压缩。这有助于提高网页加载性能，特别是对于移动设备或带宽有限的情况。
可通过 CSS 进行样式化
SVG 支持事件处理器，允许通过 JavaScript 实现交互式功能，如点击、悬停等。这使得 SVG 成为创建富交互式图形的强大工具。
适用于图标
SVG 常被用于创建图标，因为它允许图标在各种尺寸和分辨率下保持清晰度，而无需维护多个版本。
可与 HTML 结合
SVG 可以嵌入在 ...