关于新拟物设计 Neumorphism
前段时间发现了一种叫新拟物的 UI 设计 Neumorphism，感觉很新鲜。于是研究的一番，本文将分享新拟物设计的相关知识。前言前段时间发现了一种叫新拟物的 UI 设计 Neumorphism，感觉很新鲜。于是研究的一番，本文将分享新拟物设计的相关知识。新拟物设计是什么新拟物的前身是 Skeuomorphism（拟物设计），或叫拟物化，即在界面中模仿现实物纹理材质的设计，让人们在使用界面时联想到现实物体的使用方式，由 Apple 公司最先提出。新拟物设计是拟物设计的一种新的思路，它的关注点不在于对现实世界和数字世界的对比和模拟，而关键点在于色调，新拟物设计关注于整个屏幕的颜色，并为用户提供一个完全独特的体验。比如你有一个音乐播放器界面，使用新拟物设计，这个界面的 UI 元素不是放置在背景之上而是在它后面..
更多
Flutter 绘制图形 Circle Packing
本文讲解使用 Flutter 实现 Generative Artistry 教程里面的第六个图形 Circle Packing（圆形填充）前言懒癌发作，好久没写博客了…本文讲解使用 Flutter 实现 Generative Artistry 教程里面的第六个图形 Circle Packing（圆形填充）。实现这个图形的思路大致是：创建一个圆。判断这个圆是否与其他圆发生碰撞。没有则不断增大圆的半径，再次进行碰撞检测，直至最大半径。绘制更多的圆形，重复以上。初始化照旧创建一个 CirclePacking 控件以及 CirclePackingPainter。12345678910111213141516class CirclePacking extends StatelessWidget { @overri..
更多
使用 Github Action 发布 Flutter 插件
本文说明如何使用 Github Actions 自动发布 Flutter 插件到 pub.dev前言笔者有发布过几个 Flutter 插件，一直在手动更新。手动更新插件有点麻烦且容易失败（需要科学上网），因此研究了下如何使用 Github Actions（Github 提供的一种 CI/CD 服务）自动发布插件到 pub.dev，这样做的好处有避免手动发布，节约上传时间在 Github 合并别人提交的代码后也可以立即发布以下说明如何进行添加流程首先在插件的 .github/workflows 目录内创建一个配置文件 publish.yml。内容如下12345678910111213141516171819name: Publish to Pub.dev# 流程触发时机，当有标签创建时触发，如 v1.0.0..
更多
Flutter 绘制三角网格 Triangular Mesh
本文实现 Generative Artistry 教程的第 4 篇图形 Triangular mesh 效果如下前言本文实现 Generative Artistry 教程的第 4 篇图形 Triangular mesh 效果如下。没按顺序来，因为第二篇 Joy Division 我还没实现 😝创建画布首先创建一个用于绘制的画布，然后实现 TriangularMeshPainter 的 paint 方法。123456789101112131415class TriangularMesh extends StatelessWidget { @override Widget build(BuildContext context) { return CustomPaint( painter:..
更多
Flutter 绘制瓷砖线 Tiled Lines
前几天发现了一个使用 绘制图形的教程 generative artistry 感觉很有意思，尝试用 Flutter 实现。本文实现第一篇教程的图形 Tiled Lines 效果如下。前言前几天发现了一个使用 绘制图形的教程 generative artistry 感觉很有意思，尝试用 Flutter 实现。本文实现第一篇教程的图形 Tiled Lines 效果如下。创建画布首先使用一个 Container 控件创建一个 320*320 大小的绘制区域，添加 CustomPaint 画布和一个继承 CustomPainter的画笔 TiledLinesPainter。关于 CustomPaint 和 CustomPainter 的知识可以查阅这篇文章 使用 Flutter 绘制图表（一）柱状图 📊。1..
更多
用 Flutter 实现探探卡片布局
前几天写了一个 Fluter 插件 tcard，用来实现类似于探探卡片的布局。前言前几天写了一个 Fluter 插件 tcard，用来实现类似于探探卡片的布局。效果如下，本文讲解如何使用 Stack 控件实现这个布局。在线查看初识 StackStack 是一个有多子项的控件，它会将自己的子项相对于自身边缘进行定位，后面的子项会覆盖前面的子项。通常用来实现将一个控件覆盖于另一个控件之上的布局，比如在一张图片上显示一些文字。子项的默认位置在 Stack 左上角，也可以用 Align 或者 Positioned 控件分别进行定位。12345678910111213141516171819Stack( children: [ Container( width: 100, height:..
更多
Flutter 绘制图表（二）饼状图🍪
本文讲解如何使用 Flutter 绘制饼状图前言接上文，本文讲解如何使用 Flutter 绘制饼状图，最终效果如图在线查看定义 PieChart & PiePart第一步定义 PieChart 和 PiePart 类。PieChart 是整个饼状图控件，有 datas 和 legends 两个属性，表示饼图的数据和每部分的标识。PiePart 表示饼图的一部分，有 color, startAngle, sweepAngle 三个属性，分别表示颜色，起始弧度值，占据圆形的弧度值。PeiChartPainter 类实现了具体的绘制方法。123456789101112131415161718192021222324252627282930313233343536373839404142434445464..
更多