SmallStone
SmallStone
这里修复以下几个问题： 1. 在解析v-for时，只是简单得保存下了(of|in)两边的值分别作为alias和for。然后在genFor时，利用这两个值来构成一个function： ```javascript function genFor (el) { el.forProcessed = true; const exp = el.for; const alias = el.alias; const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''; const iterator2 =...
roadmap
### 基础 - [P0] 单元测试、完善文档 - [P0] 创建使用 `iMove` 开发的场景示例 `demo`，帮助新手快速学习上手 `iMove` ### 功能升级 - [P0] 节点能力 - 支持子流程：多个节点可以合并成单个节点，支持展开收起，更方便节点的复用 - 支持节点引用：相同节点在出码时只有一份代码，减小 bundle size - 支持节点输入/输出类型推断：类型推断自动分析，便于上下游节点组装时进行可行性检查 - 支持节点单元测试：测试用例存储（input/output），单个/批量执行单元测试，检查节点健康状态 - [P1] 国际化...
可以使用 X6 的布局功能，实现智能排版 参考文档： https://x6.antv.vision/zh/docs/tutorial/advanced/layout
 ## 1. 前言 `Flutter`作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些`闲鱼`，`美团`，`腾讯`等大公司均已投入生产使用。虽然目前其生态还没有完全成熟，但身靠背后的`Google`加持，其发展速度已经足够惊人，可以预见将来对`Flutter`开发人员的需求也会随之增长。 无论是为了技术尝鲜还是以后可能的工作机会，都9102年了，作为一个前端开发者，似乎没有理由不去尝试它。正是带着这样的心理，笔者也开始学习`Flutter`，同时建了一个用于练习的[仓库](https://github.com/SmallStoneSK/flutter_training_app)，后续所有代码都会托管在上面，欢迎star，一起学习。 在之前的文章中，我们学习了如何使用`ListView`和`GridView`这两个滚动类型组件。今天，我们就来学习另一个滚动组件`CustomScrollView`及其搭配使用的`Sliver`系列组件。掌握了它们，你就可以做一些有趣的滚动效果啦~ ## 2. 必备知识 在进入今天的正题之前，我们先来简单了解下今天的两个主角`CustomScrollView`和`Sliver`：`CustomScrollView`是`Flutter`提供的可以用来自定义滚动效果的组件，它可以像胶水一样将多个`Sliver`粘合在一起。 什么意思呢？举个栗子（你也可以点击[这里](https://youtu.be/ORiTTaVY6mM)看`youtube`上的一个视频）： 假如页面中同时存在一个`List`和一个`Grid`，虽然它们看起来是一个整体，但是由于各自的滚动效果是分离的，所以没法保证一致的滚动效果。 而使用`CustomScrollView`组件作为滚动容器，`SliverList`和`SliverGrid`分别替代`List`和`Grid`作为`CustomScrollView`的子组件，滚动效果再由`CustomScrollView`统一控制，这样就可以了。 其中`SliverList`和`SliverGrid`就是我们前面提到的`Sliver`系列中的两员，除此之外，`Sliver`家族还有常用的几个： - `SliverAppBar`：Creates a material design app bar that can be placed in a CustomScrollView. -...
## 1. 前言 一直以来都想做个组件库，一方面是对工作中常遇问题的总结，另一方面也确实能够提升工作效率（谁又不想造一个属于自己的轮子呢~），于是乎就有了本文的主角儿`rn-components-kit`。 市面上`web`的UI组件库如此之多，`react`相关的有`antd`，`vue`相关的有`element`。不过，今天介绍的是`react-native`的一个组件库。不同于上述组件库都有统一的视觉规范，`rn-components-kit`更注重的是在提供组件基本能力的同时尽可能多地赋予自定义样式的可能性。 **放上[仓库地址](https://github.com/SmallStoneSK/rn-components-kit)，欢迎`star`，欢迎提`issue`，欢迎提`PR`~** 下面就让我们来认识一下`rn-components-kit`~ ## 2. 快速开始 ### 2.1 安装 你可以通过下面的命令安装`rn-components-kit`: ```bash npm install rn-components-kit --save ``` ```js import React from 'react'; import {Badge} from ' @rn-components-kit/badge';...
## 1. 前言 `Flutter`作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些`闲鱼`，`美团`，`腾讯`等大公司均已开始使用。虽然目前其生态还没有完全成熟，但身靠背后的`Google`加持，其发展速度已经足够惊人，可以预见将来对`Flutter`开发人员的需求也会随之增长。 无论是为了现在的技术尝鲜还是将来的潮流趋势，都9102年了，作为一个前端开发者，似乎没有理由不去尝试它。正是带着这样的心理，笔者也开始学习`Flutter`，同时建了一个用于练习的[仓库](https://github.com/SmallStoneSK/flutter_training_app)，后续所有代码都会托管在上面，欢迎star，一起学习。 今天分享的是Flutter中最常用到的一些基础组件，它们是构成UI界面的基础元素：`容器`，`行`，`列`，`绝对定位布局`，`文本`，`图片`和`图标`等。  ## 2. 基础组件 ### 2.1 Container(容器组件) `Container`组件是最常用的布局组件之一，可以认为它是web开发中的`div`，rn开发中的`View`。其往往可以用来控制大小、背景颜色、边框、阴影、内外边距和内容排列方式等。我们先来看下其构造函数： ```dart Container({ Key key, double width, double height, this.margin, this.padding, Color color, this.alignment, BoxConstraints constraints, Decoration...
 ## 1. 前言 `Flutter`作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些`闲鱼`，`美团`，`腾讯`等大公司均已投入生产使用。虽然目前其生态还没有完全成熟，但身靠背后的`Google`加持，其发展速度已经足够惊人，可以预见将来对`Flutter`开发人员的需求也会随之增长。 无论是为了技术尝鲜还是以后可能的工作机会，都9102年了，作为一个前端开发者，似乎没有理由不去尝试它。正是带着这样的心理，笔者也开始学习`Flutter`，同时建了一个用于练习的[仓库](https://github.com/SmallStoneSK/flutter_training_app)，后续所有代码都会托管在上面，欢迎star，一起学习。 在上一篇[文章](https://github.com/SmallStoneSK/Blog/issues/12)中，我们学习了`Flutter`中使用频率最高的一些基础组件。但是在一些场景中，当组件的宽度或高度超出屏幕边缘时，`Flutter`往往会给出`overflow`警告，提醒有组件溢出屏幕。为了解决这个问题，今天我们就来学习最常用的一个`滚动型容器组件` — `ListView组件`。 ## 2. ListView使用方法 从功能比较上来看，`Flutter`中的`ListView`组件和`RN`中的`ScrollView`/`FlatList`非常相似，但是在使用方法上还是有点区别。接下来，就跟着我一起来看看`ListView`组件都有哪些常用的使用方法。 ### 2.1 ListView() 第一种使用方法就是直接调用其`默认构造函数`来创建列表，效果等同于`RN`中的`ScrollView`组件。但是这种方式创建的列表存在一个问题：**对于那些`长列表`或者需要`较昂贵渲染开销`的子组件，即使还没有出现在屏幕中但仍然会被`ListView`所创建，这将是一项较大的开销，使用不当可能引起性能问题甚至卡顿**。 不过话说回来，虽然该方法可能会有性能问题，但还是取决于其不同的应用场景而定。下面我们就来看下其构造函数（已省略不常用属性）： ```dart ListView({ Axis scrollDirection = Axis.vertical, ScrollController controller, ScrollPhysics physics, bool shrinkWrap...
## 1. 前言 最近盯上了app store中的动画效果，感觉挺好玩的，嘿嘿~ 恰逢周末，得空就实现一个试试。不试不知道，做完了才发现其实还挺简单的，所以和大家分享一下封装这个组件的过程和思路。 ## 2. 需求分析 首先，我们先来看看app store中的效果是怎么样的，看下图： 哇，这个动画是不是很有趣，很神奇。为此，可以给它取个洋气的名字：神奇移动，英文名叫magicMoving~ 皮完之后再回到现实中来，这个动画该如何实现呢？ 我们来看这个动画，首先一开始是一个长列表，点击其中一个卡片之后弹出一个浮层，而且这中间有一个从卡片放大到浮层的过渡效果。乍一看好像挺难的，但如果把整个过程分解一下似乎就迎刃而解了。 1. 用FlatList渲染长列表； 2. 点击卡片时，获取点击卡片在屏幕中的位置（pageX, pageY）； 3. clone点击的卡片生成浮层，利用Animated创建动画，控制浮层的宽高和位移； 4. 点击关闭时，利用Animated控制浮层缩小，动画结束后销毁浮层。 当然了，以上的这个思路实现的只是一个毛胚版的神奇移动。。。还有很多细节可以还原地更好，比如背景虚化，点击卡片缩小等等，不过这些不是本文探讨的重点。 ## 3. 具体实现 在具体实现之前，我们得考虑一个问题：由于组件的通用性，浮层可能在各种场景下被唤出，但是又需要能够铺满全屏，所以我们可以使用Modal组件。 然后，根据大概的思路我们可以先搭好整个组件的框架代码： ```javascript...
 ## 1. 前言 `Flutter`作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些`闲鱼`，`美团`，`腾讯`等大公司均已投入生产使用。虽然目前其生态还没有完全成熟，但身靠背后的`Google`加持，其发展速度已经足够惊人，可以预见将来对`Flutter`开发人员的需求也会随之增长。 无论是为了现在的技术尝鲜还是将来的潮流趋势，都9102年了，作为一个前端开发者，似乎没有理由不去尝试它。正是带着这样的心理，笔者也开始学习`Flutter`，同时建了一个用于练习的[仓库](https://github.com/SmallStoneSK/flutter_training_app)，后续所有代码都会托管在上面，欢迎star，一起学习。 经过[上一篇](https://github.com/SmallStoneSK/Blog/issues/13)对`ListView`组件的学习，我们已经对滚动型组件的使用有了初步认识，这对今天要学习的`GridView`组件十分有帮助。因为两者都继承自`BoxScrollView`，所以两者的属性有80%以上是相同的，用法非常相似。 而且如下图所示可见，`GridView`网格布局在app中的使用频率其实非常高，所以接下来就让我们来看看在`Flutter`中如何使用吧~  ## 2. 初识GridView 今天我们的主角`GridView`一共有5个构造函数：`GridView`，`GridView.builder`，`GridView.count`，`GridView.extent`和`GridView.custom`。但是不用慌，因为可以说其实掌握其默认构造函数就都会了~ 来看下`GridView`构造函数（已省略不常用属性）： ```dart GridView({ Key key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, ScrollPhysics physics,...
 ## 1. 前言 `Flutter`作为时下最流行的技术之一，凭借其出色的性能以及抹平多端的差异优势，早已引起大批技术爱好者的关注，甚至一些`闲鱼`，`美团`，`腾讯`等大公司均已投入生产使用。虽然目前其生态还没有完全成熟，但身靠背后的`Google`加持，其发展速度已经足够惊人，可以预见将来对`Flutter`开发人员的需求也会随之增长。 无论是为了技术尝鲜还是以后可能的工作机会，都9102年了，作为一个前端开发者，似乎没有理由不去尝试它。正是带着这样的心理，笔者也开始学习`Flutter`，同时建了一个用于练习的[仓库](https://github.com/SmallStoneSK/flutter_training_app)，后续所有代码都会托管在上面，欢迎star，一起学习。 今天要分享的内容其实非常简单，我们都知道`Flutter`内置了一套`Material Design`风格的`Icon图标`，但对于一个成熟的App而言，通常情况下还是远远不够的。为此，我们需要在项目中引入自定义的`Icon图标`。 本文就将以`Ant Design`图标库为例，介绍如何在`Flutter`中引入自定义图标。 ## 2. 准备工作：字体文件 正所谓“巧妇难为无米之炊”，要想引入自定义图标，首先我们得准备好图标字体文件（`.ttf`后缀）。对于大公司而言，找视觉同学切就可以了。但如果是自己做的业余项目或者没有资源的时候，我们可以上[阿里巴巴矢量图标库](https://www.iconfont.cn/)pick自己心仪的图标。 这里就以[Ant Design官方图标库](https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.de12df413&cid=9402)为例（一共有600个图标），通过以下操作，我们将图标字体文件加入到项目中： 添加购物车 --> 点击购物车 --> 下载代码 --> 解压 --> 拷贝至项目（可重命名）    ## 3....