Blog
Blog copied to clipboard
SmallStoneSK
总结 -> 成长
 ## 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....
## 1. 前言 继上周第一次开发Chrome插件[`github-star-trend`](https://github.com/SmallStoneSK/Blog/issues/10)之后，我就一直寻思有什么现实问题可以用插件来解决呢？正当我在浏览器中搜索寻找灵感时，打开的众多tab选项卡令我灵光一闪。 咦，为什么不做一个插件用来管理tab呢？每次同时打开过多的tab选项卡时，被挤压的标题总是让我分不清哪个是哪个，查看起来十分不便。于是乎，经过一个周末下午的折腾，我倒腾出这么个东西（gif图可能有点大，请耐心等待...）：  ## 2. 准备工作 国际惯例，正式进入主题之前让我们来先了解点预备知识。默默打开Chrome插件的[官方文档](https://developers.chrome.com/extensions/devguide)，直奔我们的[`Tabs`](https://developers.chrome.com/extensions/tabs)。可以看到它为我们提供了很多方法，而且竟然还有`executeScript`，这个可以说权限非常大了，不过跟我们这次的需求没啥关系。。。 ### 2.1 query 由于我们的需求是管理tab选项卡，所以首先肯定得获取所有的tab信息。扫了一遍[`Methods`](https://developers.chrome.com/extensions/tabs#methods)，最相关的就是方法[`query`](https://developers.chrome.com/extensions/tabs#method-query)： > Gets all tabs that have the specified properties, or all tabs if no properties are...
## 1. 前言 这天，在逛github（就是划水）的时候，突然想看看某个仓库的star走势，但是在star列表中翻了半天愣是没找到相应的功能。于是乎，谷歌一搜，发现有个叫[Star History](https://chrome.google.com/webstore/detail/star-history/iijibbcdddbhokfepbblglfgdglnccfn)的谷歌插件，然而竟然要收费。。。 于是，又接着搜索，发现了这个[仓库](https://github.com/timqian/star-history)。好巧的是，这个仓库就是那个插件的源码。稍微瞅了下源码，感觉我也能行？ 由于之前就想学学怎么写chrome插件，本着学习的态度和好奇心驱使（都是划水，没有什么不同），于是也做了一个可以查看仓库Star趋势的插件。效果如下：  ## 2. 准备工作 ### 2.1 chrome插件简单入门 由于也是第一次写Chrome插件，作为小白，就先搜搜大家都是怎么写chrome插件的吧。果然，一搜一大堆。。。不过，最终还是选择了[官方文档](https://developer.chrome.com/extensions)，毕竟是第一手资料，虽然是英文，但写得还算通俗易懂，阅读起来没啥问题。 这里推荐看[Getting Started](https://developer.chrome.com/extensions/getstarted)，非常友好，一步步教你完成一个最简单的修改网页背景颜色的Chrome插件。跟着教程完成之后你就会发现，原来Chrome插件就像完成一个web项目一样。 manifest.json是项目的配置文件（类似于package.json），插件所需要的一些能力（例如Storage）就在这个文件中声明。剩下的工作，无非就是根据Chrome插件提供的API实现你想要的功能即可。 我们来看下要创建的项目`目录`和`manifest.json`配置文件： ``` ├── README.md ├── dist │ └── bundle.js ├── images │ ...
## 1. Introduction 在日常开发中，页面切换时的转场动画是比较基础的一个场景。在react项目当中，我们一般都会选用`react-router`来管理路由，但是react-router却并没有提供相应的转场动画功能，而是非常生硬的直接替换掉组件。一定程度上来说，体验并不是那么友好。 为了在react中实现动画效果，其实我们有很多的选择，比如：`react-transition-group`，`react-motion`，`Animated`等等。但是，由于react-transition-group给元素添加的enter，enter-active，exit，exit-active这一系列勾子，简直就是为我们的页面入场离场而设计的。基于此，本文选择react-transition-group来实现动画效果。 接下来，本文就将结合两者提供一个实现路由转场动画的思路，权当抛砖引玉~ ## 2. Requirements 我们先明确要完成的转场动画是什么效果。如下图所示： ## 3. react-router 首先，我们先简要介绍下react-router的基本用法（详细看[官网介绍](https://reacttraining.com/react-router/web/guides/quick-start)）。 这里我们会用到react-router提供的`BrowserRouter`，`Switch`，`Route`三个组件。 - **BrowserRouter**：以html5提供的history api形式实现的路由（还有一种hash形式实现的路由）。 - **Switch**：多个Route组件同时匹配时，默认都会显示，但是被Switch包裹起来的Route组件只会显示第一个被匹配上的路由。 - **Route**：路由组件，path指定匹配的路由，component指定路由匹配时展示的组件。 ```javascript // src/App1/index.js export default class App1 extends...