研究如何计算一个玩家在对局开始前的战力值TL;DR一个玩家的战力值由排位分，游戏分，英雄分加其他分数组成。前言最近尝试计算出对局开始时一个玩家的战力值，顾名思义就是用数值描述这个玩家的能力。初步得出基于排位分 + 游戏分 + 英雄分 + 其他因素的计算公式。排位分段位越高的玩家自然表示能力越强，排除代练，买号，代打等情况。以前的 Rank 分就是说明，不过现在 Rank 分被段位取代了，所以这里的排位分模拟 Rank 分。排位分是一个玩家的基础分数，是决定玩家战力高低的根本，没有定级的玩家会有一个默认分数。一种情况是以前的段位比现在高，但是本赛季还没有达到之前的段位，这种情况下会补偿一些分数，表示当前段位不是真实实力。另一种情况是以前最高段位比现在低，说明当前的实力上升，这种情况会取当前段位作为计算基础。游戏分根据玩家最近游戏表现计算，有多种计算维度，获取金钱，补兵数，参团率，伤害占比，KDA 等因素。计算最近 10 局游戏的数据，大乱斗和峡谷数据区分。每一局游戏默认 100 分，再根据玩家的数据进行加减，每种因素对一局游戏的影响力不同，所以分值也不同。计算因子获得金钱获得经验获得击杀参团率伤害量承伤量治疗量KDA助攻死亡数…英雄分玩家的英雄熟练度越高分值越高，同时根据英雄当前版本的层级进行加减分。如果没有熟练度，说明是练英雄，那么英雄分将是负分。其他因素超过多久没玩游戏战力减少， ...继续阅读 (18)

这两天更新了一个两年前的 Flutter 插件，有感而发。前言上周收到了一封邮件，询问我两年前开发的一个 Flutter 插件，我惊讶于这个插件还有人在用，便回复了邮件，后来相互加了微信，解决他提的问题。提问的人很大方，一上来就发了一个微信红包，说问题解决之后再发一个，于是我花了大概两个多小时，总算是解决了问题，果不其然他又发了一个红包，让我对他好感倍增 🐶后来想想这个插件还是有用的，于是又更新了一下这个”年久失修”的插件flutter-tree添加了在线示例现在这个插件变的更加易用，有了更多的功能，完善的文档，希望对更多人有帮助吧。PS: 果然对于我来说金钱才是第一生产力啊 🐶 ...继续阅读 (20)

前段时间发现了一种叫新拟物的 UI 设计 Neumorphism，感觉很新鲜。于是研究的一番，本文将分享新拟物设计的相关知识。前言前段时间发现了一种叫新拟物的 UI 设计 Neumorphism，感觉很新鲜。于是研究的一番，本文将分享新拟物设计的相关知识。新拟物设计是什么新拟物的前身是 Skeuomorphism（拟物设计），或叫拟物化，即在界面中模仿现实物纹理材质的设计，让人们在使用界面时联想到现实物体的使用方式，由 Apple 公司最先提出。新拟物设计是拟物设计的一种新的思路，它的关注点不在于对现实世界和数字世界的对比和模拟，而关键点在于色调，新拟物设计关注于整个屏幕的颜色，并为用户提供一个完全独特的体验。比如你有一个音乐播放器界面，使用新拟物设计，这个界面的 UI 元素不是放置在背景之上而是在它后面。它给人的感觉是，像按钮或卡片这样的组件实际上是在背景里面的，只是因为它们是从里面突出来的，所以才可以看到。新拟物设计风格的结构由背景色+高光色+阴影色组成，掌握了基本规律，就可以通过改变按钮、卡片的参数进行调整变换。总体来说就是纯色、低对比度以及适当的阴影效果，风格偏柔和。新拟物设计的对比新拟物设计是一种介于拟物与扁平之间的风格，简化了拟物设计中不必要的效果。谁在使用新拟物设计几个使用了新拟物设计的应用谜底时钟氢时钟Skailer分贝大师新拟物设计的实现原理新拟物设计通过应用两种 ...继续阅读 (19)

最近在项目发现了一些看起来很神奇的代码，一个组件 A 的方法通过props传到组件 B，然后到组件 C，再到组件 D，再到组件 E，最后到组件 D， 简直是千层饼😂。前言最近在项目发现了一些看起来很神奇的代码，一个组件 A 的方法通过props传到组件 B，然后到组件 C，再到组件 D，再到组件 E，最后到组件 D， 简直是千层饼😂。提问一番后知道了这种将属性深层传递的现象叫Prop Drilling，本文说明如何使用 React 的 Context API 避免这种现象。什么是 ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。这些组件共享的以及变化不频繁的数据正是 Context 用武之地。如何使用 Context举个例子🌰 说明在线示例本文代码创建 Context首先用React.createContext ...继续阅读 (17)

作为一个前端切图仔，工作中少不了用上 Babel，ESLint，Prettier 这些工具，但是这些工具背后的工作原理却不求甚解😅前言作为一个前端切图仔，工作中少不了用上 Babel，ESLint，Prettier 这些工具，但是这些工具背后的工作原理却不求甚解😅 ，最近才尝试去了解一番，没想到发现一个全新的世界，那就是AST中文名抽象语法树。初识在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法架构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真是语法中出现的每个细节。比如嵌套括号被隐含在树的结构中，并没有以节点的形式呈现；二类似于if-condition-then这样的条件跳转语句，可以使用带有三个分支的节点来表示。和抽象语法树相对的是具体语法树（通常称作分析树）。一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树，然后从分析树生成AST。一旦AST被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。抽象語法樹让我们从一个全能的函数开始，它返回生命、宇宙以及任何事情的终极答案1234functionask(){constanswer =42returnanswer& ...继续阅读 (25)

分享两个监测元素是否在视口内的方法前言分享两个监测元素是否在视口内的方法1. 位置计算使用Element.getBoundingClientRect()方法返回元素相对于视口的位置123constisElementVisible =(el) =>{constrect = el.getBoundingClientRect();};获取浏览器窗口的宽高12345constisElementVisible =(el) =>{constrect = el.getBoundingClientRect();constvWidth =window.innerWidth ||document.documentElement.clientWidth;constvHeight =window.innerHeight ||document.documentElement.clientHeight;};判断元素是否在视口内，如图所示1234567891011121314151617constisElementVisible =(el) =>{constrect = el.getBoundingClientRect()constvWidth =window.innerWidth ||document.documentElement.clientWidthco ...继续阅读 (22)

最近需要将 base64 格式的图片转化成 JS 里的 File 对象进行上传，于是学习了一下这方面的知识前言最近需要将 base64 格式的图片转化成 JS 里的 File 对象进行上传，于是学习了一下这方面的知识Base64 转 Blob分割 Base64 数据，生成类文件对象，base64 -> Uint8Array -> Blob123456789101112131415161718192021functiondataURI2Blob(dataURI){// 分割数据const[meta, data] = dataURI.split(',')// 对数据编码letbyteif(meta.includes('base64')) {byte = atob(data)}else{byte =encodeURI(data)}// 获取图片格式constmime = meta.split(':')[1].split(';')[0]// 创建 8 位无符号整型数组constia =newUint8Array(byte.length)// 获取字符 UTF-16 编码值for(leti =0; i < byte.length; i++) {ia[i] = byte.codePointAt(i)}// 生成类文件对象re ...继续阅读 (26)

JUST FOR FUN初始化新建页面，添加一个canvas元素，引入 css, js 文件12345678910111213Christmas Tree12345678canvas{position: absolute;left:50%;top:50%;transform:translate(-50%, -50%);background:#fefdfd;box-shadow:002pxrgba(0,0,0,0.4);}123456789101112131415constCANVAS_WIDTH =360constCANVAS_HEIGHT =620functioninitCanvas(id){constcanvas =document.getElementById(id)canvas.width = CANVAS_WIDTHcanvas.height = CANVAS_HEIGHTreturncanvas}functionmain(){constcanvas = initCanvas('tree')}window.addEventListener('load', main)画树枝使用stroke方法绘制树枝，设置旋转角度绘制左右子树，保存状态，递归绘制子树。12345678910111213141516171819202 ...继续阅读 (27)

Slate 是一个使用 TypeScript 开发富文本编辑器开发框架，诞生于 2016 年。介绍Slate是一个使用 TypeScript 开发富文本编辑器开发框架，诞生于 2016 年，作者是Ian Storm Taylor。它吸收了Quill，Prosemirror，Draft.js的优点，核心数据模型十分精简，具有高度的可扩展性，最新版本为v0.60.1。特点插件作为一等公民，能够完全修改编辑器行为数据层和渲染层分离，更新数据触发渲染文档数据类似于 DOM 树，可嵌套具有原子化操作 API，理论上支持协同编辑使用 React 作为渲染层不可变数据结构Immer架构图源码分析Slate 使用 monorepo 方式管理仓库，packages 目录中有 4 个源码包。slateslate核心仓库，包含抽象数据模型 interfaces，操作节点的方法 transforms，创建实例的方法等。Interfacesintefaces 目录下是 Slate 定义的数据模型。Node表示 Slate 文档树中不同类型的节点。12345exporttypeBaseNode = Editor | Element | TextexporttypeDescendant = Element | TextexporttypeAncestor = Editor | ElementEditor对象用于 ...继续阅读 (28)

浏览器的 Range 和 Selection 对象前置知识DOM 文档对象模型中总共有 12 种节点类型，常见的有以下几种常量值类型ELEMENT_NODE1元素节点TEXT_NODE3文本节点COMMENT_NODE8注释节点DOCUMENT_NODE9Document 节点DOCUMENT_FRAGMENT_NODE11DocumentFragment 节点https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeTypeRangeRange对象表示一个范围，有起始点和终止点，是用于管理选择范围的通用对象。每个点都是一个相对于父节点的偏移量（offset），如果父节点是元素节点，则偏移量是子节点的编号。如果父节点是文本节点，则是文本中的位置。需要注意的是终点要在起点之后。有以下 HTML 片段1HelloWorld!使用 Range 选择节点12345678910constdiv =document.getElementById('div')// 创建一个 `Range` 对象constrange =newRange()// 设置范围起点为文本节点 Hellorange.setStart(div,0);// 设置范围终点为元素节点!（不包括）range.setEnd(div,2);// 以文本形式返回其内容co ...继续阅读 (29)

package.json里面的peerDependencies是什么意思前言众所周知dependencies是项目的依赖包，devDependencies项目开发阶段的依赖包，这些依赖包会在npm install过程中自动安装。假设项目本身依赖 package A, 但是另一个 package B 同时依赖 package A，为了避免冲突，这时候就需要将 package A 设置为 package B 的peerDependencies。示例假设项目 A 依赖 package B12345{"dependencies": {"b": "^1.0.0"}}package B 有一个peerDependenciespackage c12345{"peerDependencies": {"c": "^1.x"}}那么在项目 A 安装 package B 的时候, 要求同时安装 package C 作为 A 的dependencies。总而言之peerDependencies是宿主项目安装给其他依赖包使用的 package。注意: npm 1 和 2 版本会自动安装 peerDependencies。从 npm@3 开始将不再自动安装，而是得到一个警告，告知peerDependency没有被安装。参考What ...继续阅读 (15)

观察者模式是一种行为设计模式，允许你定义一种订阅机制，可在对象事件发生时通知多个 “观察” 该对象的对象。什么是观察者模式观察者模式是一种行为设计模式，允许你定义一种订阅机制，可在对象事件发生时通知多个 “观察” 该对象的对象。有值得关注的状态的对象通常被称为目标，由于它要将自身的状态改变通知给其他对象，我们也将其称为发布者 （publisher），所有希望关注发布者状态变化的其他对象被称为订阅者（subscribers）。当发布者发布了事件，它要遍历订阅者并调用其对象的特定通知方法。举例说明观察者模式类似于明星与粉丝的关系，粉丝关注明星，当明星发布消息的时候，粉丝会对这个消息做出反应。观察者模式适用场景当一个对象状态的改变需要改变其他对象，可使用观察者模式。当一些对象必须观察其他对象时，可使用观察者模式。实现观察者模式12345678910111213141516171819202122232425262728293031323334353637383940414243// 目标classSubject{constructor() {this.observers = []}// 添加观察者attach(observer) {constisExist =this.observers.includes(observer)if(isExist) ...继续阅读 (27)

本文讲解使用 Flutter 实现 Generative Artistry 教程里面的第六个图形 Circle Packing（圆形填充）前言懒癌发作，好久没写博客了…本文讲解使用 Flutter 实现Generative Artistry教程里面的第六个图形 Circle Packing（圆形填充）。实现这个图形的思路大致是：创建一个圆。判断这个圆是否与其他圆发生碰撞。没有则不断增大圆的半径，再次进行碰撞检测，直至最大半径。绘制更多的圆形，重复以上。初始化照旧创建一个CirclePacking控件以及CirclePackingPainter。12345678910111213141516classCirclePackingextendsStatelessWidget{@overrideWidget build(BuildContext context) {returnCustomPaint(painter: CirclePackingPainter(),);}}classCirclePackingPainterextendsCustomPainter{@overridevoidpaint(Canvas canvas, Size size) {}@overrideboolshouldRepaint(CircleP ...继续阅读 (31)

前段时间做了三道阿里的在线面试题，分享一下前言前段时间做了三道阿里的在线面试题，分享一下。(一) 身为前端，我很抱歉123456789101112131415根据表达式计算字母数。说明：给定一个描述字母数量的表达式，计算表达式里的每个字母实际数量表达式格式：字母紧跟表示次数的数字，如 A2B3括号可将表达式局部分组后跟上数字，(A2)2B数字为1时可缺省，如 AB3。示例：countOfLetters('A2B3');// { A: 2, B: 3 }countOfLetters('A(A3B)2');// { A: 7, B: 2 }countOfLetters('C4(A(A3B)2)2');// { A: 14, B: 4, C: 4 }functioncountOfLetters(letters, res){/** 代码实现 */}这题面试的时候完全没思路，之后搜索了一下，发现跟 LeetCode 上的一道算法题类似类似726.原子的数量🤥12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667const ...继续阅读 (21)

本文说明如何使用 Github Actions 自动发布 Flutter 插件到 pub.dev前言笔者有发布过几个 Flutter 插件，一直在手动更新。手动更新插件有点麻烦且容易失败（需要科学上网），因此研究了下如何使用Github Actions（Github 提供的一种 CI/CD 服务）自动发布插件到 pub.dev，这样做的好处有避免手动发布，节约上传时间在 Github 合并别人提交的代码后也可以立即发布以下说明如何进行添加流程首先在插件的.github/workflows目录内创建一个配置文件publish.yml。内容如下12345678910111213141516171819name:PublishtoPub.dev# 流程触发时机，当有标签创建时触发，如 v1.0.0。当然也可以选择别的触发时机，如 push，release 等on:createjobs:publishing:runs-on:ubuntu-lateststeps:# 拉取仓库代码-name:"Checkout"uses:actions/checkout@v2# 发布插件-name:DartandFlutterPackagePublisheruses:k-paxian/dart-package-publisher@v1.2with:# 设置发布插件需要的 TokenaccessToken:$& ...继续阅读 (23)

本文实现 Generative Artistry 教程的第 4 篇图形 Triangular mesh 效果如下前言本文实现Generative Artistry教程的第 4 篇图形 Triangular mesh 效果如下。没按顺序来，因为第二篇 Joy Division 我还没实现 😝创建画布首先创建一个用于绘制的画布，然后实现TriangularMeshPainter的paint方法。123456789101112131415classTriangularMeshextendsStatelessWidget{@overrideWidget build(BuildContext context) {returnCustomPaint(painter: TriangularMeshPainter(),);}}classTriangularMeshPainterextendsCustomPainter{@overridevoidpaint(Canvas canvas, Size size) {}@overrideboolshouldRepaint(TriangularMeshPainter oldDelegate) =>false;}绘制端点声明一个gap变量等比分割画布，在纵轴，横轴方向每隔gap长度 ...继续阅读 (29)

前几天发现了一个使用绘制图形的教程 generative artistry 感觉很有意思，尝试用 Flutter 实现。本文实现第一篇教程的图形 Tiled Lines 效果如下。前言前几天发现了一个使用绘制图形的教程generative artistry感觉很有意思，尝试用 Flutter 实现。本文实现第一篇教程的图形 Tiled Lines 效果如下。创建画布首先使用一个Container控件创建一个320*320大小的绘制区域，添加CustomPaint画布和一个继承CustomPainter的画笔TiledLinesPainter。关于CustomPaint和CustomPainter的知识可以查阅这篇文章使用 Flutter 绘制图表（一）柱状图 📊。12345678910111213141516171819202122232425262728293031import'package:flutter/material.dart';classTiledLinesextendsStatelessWidget{@overrideWidget build(BuildContext context) {returnScaffold(body: Center(child: Container(width:320.0,height:320.0,decoration ...继续阅读 (18)

前几天写了一个 Fluter 插件 tcard，用来实现类似于探探卡片的布局。前言前几天写了一个 Fluter 插件tcard，用来实现类似于探探卡片的布局。效果如下，本文讲解如何使用Stack控件实现这个布局。在线查看初识 StackStack是一个有多子项的控件，它会将自己的子项相对于自身边缘进行定位，后面的子项会覆盖前面的子项。通常用来实现将一个控件覆盖于另一个控件之上的布局，比如在一张图片上显示一些文字。子项的默认位置在Stack左上角，也可以用Align或者Positioned控件分别进行定位。12345678910111213141516171819Stack(children:[Container(width:100,height:100,color: Colors.red,),Container(width:90,height:90,color: Colors.green,),Container(width:80,height:80,color: Colors.blue,),],)Stack (Flutter Widget of the Week)布局思路要使用Stack实现这个卡片布局的大致思路如下首先需要前，中，后三个子控件，使用Align控件定位在容器中。需要一个手势监听器GestureDetector监听手指滑动。监听手指在屏幕上滑动同时更新最前面卡片的位置 ...继续阅读 (29)

本文讲解如何使用 Flutter 绘制饼状图前言接上文，本文讲解如何使用 Flutter 绘制饼状图，最终效果如图在线查看定义 PieChart & PiePart第一步定义PieChart和PiePart类。PieChart是整个饼状图控件，有datas和legends两个属性，表示饼图的数据和每部分的标识。PiePart表示饼图的一部分，有color,startAngle,sweepAngle三个属性，分别表示颜色，起始弧度值，占据圆形的弧度值。PeiChartPainter类实现了具体的绘制方法。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172classPiePart{doublesweepAngle;finalColor color;finaldoublestartAngle;PiePart(this.startAngle,this.sweepAngle,this.color,);}classPieChartextendsStatefulWidget{finalListdatas;finalListlegends;constP ...继续阅读 (14)

本文讲解如何使用 Flutter 绘制一个带有动画效果的柱状图表前言本文讲解如何使用Flutter（Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台） 绘制一个带有动画效果的柱状图表，最终效果如下图。要绘制这样的图表普通的 Widget 难以实现，这时就需要CustomPaint和CustomPainter出场了，它们类似于 Web 里面的元素，CustomPaint提供了一个绘制区域，而CustomPainter拥有具体的绘制方法。CustomPaint 是什么CustomPaint是用来提供画布的控件，它使用传入画笔painter在child控件后面绘制图形, ，foregroundPainter画笔绘制在child控件之前。size属性控制画布的大小，假如定义了子控件child，那么画布的大小将由子控件的大小决定，size属性被忽略。1234567891011classCustomPaintextendsSingleChildRenderObjectWidget{constCustomPaint({Key key,this.painter,this.foregroundPainter,this.size = Size.zero,this.isComplex =false,this.wil ...继续阅读 (24)

如何在 Flutter 中选择合适的动画 Widget 中文翻译前言Flutter 团队推出了一个关于如何在 Flutter 中选择合适的动画 Widget的视频以及配套的文章How to Choose Which Flutter Animation Widget is Right for You?都挺有好的，所以将文中的选择图翻译出来。英文版中文版参考How to Choose Which Flutter Animation Widget is Right for You? ...继续阅读 (23)

Flutter 中的动画前言动画本质是在一段时间内不断改变屏幕上显示的内容，从而产生视觉暂留现象。动画一般可分为两类：补间动画：补间动画是一种预先定义物体运动的起点和终点，物体的运动方式，运动时间，时间曲线，然后从起点过渡到终点的动画。基于物理的动画：基于物理的动画是一种模拟现实世界运动的动画，通过建立运动模型来实现。例如一个篮球🏀从高处落下，需要根据其下落高度，重力加速度，地面反弹力等影响因素来建立运动模型。Flutter 中的动画Flutter 中有多种类型的动画，先从一个简单的例子开始，使用一个AnimatedContainer控件，然后设置动画时长duration，最后调用setState方法改变需要变化的属性值，一个动画就创建了。代码如下1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253import'package:flutter/material.dart';classAnimatedContainerPageextendsStatefulWidget{@override_AnimatedContainerPageState createState() => _AnimatedContainerPageState(); ...继续阅读 (26)

在 Flutter 中有两种处理异步操作的方式Future和Stream，Future用于处理单个异步操作，Stream用来处理连续的异步操作前言在 Flutter 中有两种处理异步操作的方式Future和Stream，Future用于处理单个异步操作，Stream用来处理连续的异步操作。比如往水杯倒水，将一个水杯倒满为一个Future，连续的将多个水杯倒满就是Stream。Stream 详解Stream是一个抽象类，用于表示一序列异步数据的源。它是一种产生连续事件的方式，可以生成数据事件或者错误事件，以及流结束时的完成事件。123abstractclassStream{Stream();}Stream分单订阅流和广播流。单订阅流在发送完成事件之前只允许设置一个监听器，并且只有在流上设置监听器后才开始产生事件，取消监听器后将停止发送事件。即使取消了第一个监听器，也不允许在单订阅流上设置其他的监听器。广播流则允许设置多个监听器，也可以在取消上一个监听器后再次添加新的监听器。Stream有同步流和异步流之分。它们的区别在于同步流会在执行add，addError或close方法时立即向流的监听器StreamSubscription发送事件，而异步流总是在事件队列中的代码执行完成后在发送事件。Stream家族StreamController带有控制流方法的流。 可以向它 ...继续阅读 (29)

总结一下关于 Flutter 渲染方面的知识前言使用 Flutter 开发移动端有一段时间了，总结一下关于 UI 渲染方面的知识。了解关于 Flutter 渲染方面的知识还是有必要的，可以帮助你开发更稳定，性能更高的应用。要解答这个问题，首先需要认识到 Flutter 中有三棵树：Widget树，Element树和RenderObject树。当应用启动时 Flutter 会遍历并创建所有的Widget形成Widget Tree，同时与Widget Tree相对应，通过调用Widget上的createElement()方法创建每个Element对象，形成Element Tree。最后调用Element的createRenderObject()方法创建每个渲染对象，形成一个Render Tree。然后需要知道Widget，Element和RenderObject到底是啥以及它们是干什么的。什么是 WidgetWidget是 Flutter 的核心部分，是用户界面的不可变描述信息。正如 Flutter 的口号Everything’s a widget, 用 Flutter 开发应用就是在写Widget🐶。Flutter 的Widget不只表示 UI 控件，还表示一些功能性的组件，如路由跳转Navigator，手势检测GestureDetector组件等。12345678910111213 ...继续阅读 (17)

学习PlantUML前言前段时间设计后端表结构的时候接触了PlantUML，它能够直观表现出类的属性和方法，反应出类与类之间的关系。之前有同事就是用PlantUML来做后端数据表设计工作的，所以有必要学习一下。流程图Flowchart是用来展示操作过程或逻辑流程的一种图表，语法比较简单，方便易用，一些比较复杂的判断都可以使用一个流程图来直观表现。PlantUMLPlantUML是一个开源项目，支持快速绘制时序图、用例图、类图、活动图、组件图、状态图、对象图、部署图等。同时还支持非 UML 图的甘特图、架构图等。PlantUML有一些通用语法单行注释：以单引号'开头的语句。多行注释：以/'和'/作为注释的开始和结束。页眉：使用header命令在生成的图中增加页眉，用center,left或right实现居中、左对齐和右对齐。页脚：使用footer命令在生成的图中增加页眉，用center,left或right实现居中、左对齐和右对齐。缩放：使用scale命令缩放生成的图像。标题：使用title关键字添加标题。图片标题：使用caption关键字在图像下放置一个标题.图例说明:legend和endlegend作为关键词，使用left,right,center为这个图例指定对齐方式。一个🌰查看1234567891011121314151617181920212223242526272829@ ...继续阅读 (22)

记录两个关于DropdownButton的问题这几天在使用Flutter开发应用过程中遇到关于DropdownButton两个问题，记录一下。问题一：在showModalBottomSheet里面使用DropdownButton改变选择后界面不变化。但是onChanged事件已经触发代码如下1234567891011121314151617181920212223242526272829303132333435363738394041424344454647int_type =0;...IconButton(icon: Icon(Icons.filter_list),onPressed: () {showModalBottomSheet(context: context,builder: (BuildContext context) {returnColumn(crossAxisAlignment: CrossAxisAlignment.start,children:[Padding(padding:constEdgeInsets.all(12.0),child: Row(children:[SizedBox(width:80.0,child: Text('类型: '),),DropdownButton(value: _type,onChanged: (intn ...继续阅读 (22)

二叉树是一种非线性的数据结构，以分层的方式存储数据。在二叉树上进行添加，查找和删除数据非常快。前言二叉树是一种非线性的数据结构，以分层的方式存储数据。用于存储有层级关系的数据，如计算机文件，公司组织结构等数据。在二叉树上进行添加，查找和删除数据非常快。实现要实现树结构首先需要Node节点类，节点保存数据和它左右节点的链接，show方法返回节点数据。12345678910111213classNode {data:numberleft: Node =nullright: Node =nullconstructor(data:number) {this.data = data}show() {returnthis.data}}实现二叉树，首先需要向树中插入节点的方法，这个方法先创建一个节点，判断树是否有根节点，没有的话将新节点作为树的根节点，否则进行下一步；设当前节点为树的根节点，开始循环如果插入节点的数据小于当前节点的数据，将新当前节点设为原当前节点的左节点，否则执行第 4 步如果当前节点的左节点为null，就将新的节点插入这个位置，退出循环；否则执行下一次循环将新当前节点设为原当前节点的右节点如果当前节点的右节点为null，就将新的节点插入这个位置，退出循环；否则执行下一次循环12345678910111213141516 ...继续阅读 (21)

本文介绍如何使用 Gitlib CI/CD 构建发布 Flutter 应用前言前一篇文章介绍了使用 Github Actions 持续发布 Flutter 应用，本文分享下如何使用 Gitlib 的 CI/CD 功能同样实现发布 Flutter 应用，因为有很多公司是用自己搭建的 Gitlab 来管理代码的。要使用 Gitlib 的 CI/CD 功能首先需要在项目根目录创建一个 yml 格式的配置文件.gitlab-ci.yml，这个配置文件会定义一个流水线 Pipeline。一个 Pipeline 由多个任务 Job 组成，任务就是具体要做的事情，如代码编译或测试； Pipeline 里的 stages 决定了任务何时以及如何运行。以下就是一个 Pipeline 有 3 个 stage，依次执行 build，test 和 deploy 任务。1234567891011121314stages:-build-test-deployjob01:stage:buildscript:echo'build job'job02:stage:buildscript:echo'test job'job03:stage:deployscript:echo'deploy job'配置要在 Pipeline 里构建打包 Flutter 应用的 apk，首先需要在流水线里配置 Android 以及 Fl ...继续阅读 (28)

本文讲解如何使用 Github Actions 构建并发布 Flutter 应用前言Github Actions是 Github 提供的一种 CI/CD 服务，如果你的 Flutter 应用代码放在 Github 上，那就可以使用这个服务自动化进行应用测试，构建，发布工作了。先说下 Github Actions 几个核心概念，感觉还是挺易懂的，不得不说 Github Actions 的设计很厉害 😄Workflow file配置工作流程的文件，YAML 格式，放在项目根目录的.github/workflows目录内Workflow由配置文件定义的一个工作流程，由一系列的的任务组成Job工作流程中的一个任务，由一系列的步骤 Step 组成Step一个任务其中的一个执行步骤，执行一些命令或者 ActionAction一个步骤中的具体要进行操作，如拉取代码，发送请求等，可以使用自己或社区共享的 ActionEvent触发工作流程运行的事件，比如推送代码到仓库 push，创建一个版本标签 tag 等Artifact工程流程执行时产生的东西Runner就是工作流程运行的地方，Github 提供的服务器示例下面用一个示例项目来说明如何使用 Github Actions 发布 Flutter 应用，先放成果地址首先创建一个 Flutter 项目1flutter create flutter_gi ...继续阅读 (24)

工作需求学习一下 MySQL 数据库前言什么是 MySQL？引用官方说明MySQL is the world’s most popular open source database. Whether you are a fast growing web property, technology ISV or large enterprise, MySQL can cost-effectively help you deliver high performance, scalable database applications.MySQL 是世界上最受欢迎的开源数据库。无论您是快速增长的 Web 资产，技术 ISV 还是大型企业，MySQL 都能经济高效地帮助您交付高性能，可扩展的数据库应用程序。MySQL 是目前最流行的关系型数据库，国内外很多公司都在使用，作为一个应用开发人员还是有必要学习一下 MySQL 的基本知识的。基础操作使用 Docker 运行一个 MySQL 容器1docker run --name my-mysql -e MYSQL_ROOT_PASSWORD=1234 -d -v volume_folder -p 3306:3306 mysql:5命令行登录 MySQL1docker exec -it my-mysql bash1mysql -u root ...继续阅读 (22)