1 Star 0 Fork 94

无名之辈FTER / GSYFlutterBook

forked from CarGuo / GSYFlutterBook 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
Flutter-Supernova.md.bak 4.67 KB
一键复制 编辑 原始数据 按行查看 历史
CarGuo 提交于 2020-05-21 15:00 . clear history
关于 Spuernova 我曾在 [《Flutter Interact 的 Flutter 1.12 大进化和回顾》](https://juejin.im/post/5df2366b6fb9a016510da009) 中介绍过:在 2019 年末的 Flutter Interact 大会上,Spuernova 发布了对 Flutter 的支持,**通过导入设计师的 Sketch 文件从而生成 Flutter 代码**,这无疑提升了 Flutter 的生产力和可想象空间。
![](https://user-gold-cdn.xitu.io/2020/3/15/170de8164b9e7c7c?w=1576&h=890&f=png&s=696700)
自动生成代码的方式并不罕见,可能不少有过类似经验的开发者会表示“不屑一顾”,也可能会有节奏党再一次拉起“开发药丸”的大旗,当然这次要分享的不会是这些,这次想要分享的是: **Spuernova 可以成为开发者和设计师之间另类的沟通桥梁**。
> **一般情况下设计师和程序员之间是存在某种程度的“生殖隔离”**,设计师产出的效果在开发手上很容易“难产”,那么如何给设计师解释“为什么做不了”和“需要怎么做”就是一件很费劲的事情,甚至关乎到“信任问题”。
**Spuernova 对 Flutter 的支持,可以让设计师很直观地知道 Flutter 能做到什么程度,从而让设计师能够更好地规范 UI 效果,提供沟通的友好度**。
举个例子,如下图所示,在设计过程中 *阴影*、*模糊* 和 *渐变* 是常见的效果,而这些效果在 Sketch 上也可以很容易地被实现。
![](https://user-gold-cdn.xitu.io/2020/3/15/170de8477f7f6ddc?w=2280&h=1360&f=png&s=279053)
但是这些效果在 Flutter 中能够被完美还原吗?
如下图所示,这时候设计师只需要将 Sketch 文件导入到 Spuernova 中,就可以直观地看到设计稿在 Flutter 中的默认渲染效果。
![](https://user-gold-cdn.xitu.io/2020/3/15/170de848eb8faa32?w=2860&h=1608&f=png&s=534586)
从上图可以看到,**Sketch 中的阴影效果被完美还原,但是模糊和渐变效果却发生了一些变化,说明了这个效果在 Flutter 上“并不支持”** 。
> **这时候并不是说 Flutter 就完全没办法还原出设计稿的效果,只是说默认情况下官方并没有支持,所以实现这种效果需要一定成本**。
首先如下图所示,在选择阴影框的时候,可以看到在设计稿中的阴影在 Flutter 可以使用 `boxShadow` 实现,而 `boxShadow` 对应的实现代码被放在 `shadows.dart` 文件中。
![](https://user-gold-cdn.xitu.io/2020/3/15/170de84a2999c234?w=1648&h=660&f=png&s=132008)
![](https://user-gold-cdn.xitu.io/2020/3/15/170de84b3213e235?w=1812&h=1074&f=png&s=439207)
接着查看 `shadows.dart` 文件,可以看到对应的 `primaryShadow` 实现代码,**这时候开发就可以直接 cv 样式代码,不需要对着设计稿一遍一遍的调整参数**,并且在 Supernova 的右侧还有对应给设计师调整参数的工具栏,从而提供了设计和开发之间另类的“沟通语言”。
![](https://user-gold-cdn.xitu.io/2020/3/15/170de84db01352d4?w=1552&h=438&f=png&s=89255)
接着看模糊阴影实现,该效果在 Flutter 代码上直接消失了,其实高斯模糊的效果在 Flutter 上是可以实现,这里不过是单纯因为“纯色”效果而导致无法被正常“识别”。
![](https://user-gold-cdn.xitu.io/2020/3/15/170dea112e262be5?w=1704&h=358&f=png&s=99894)
接着看渐变效果,渐变效果在 Flutter 上是用 `Gradient` 实现的,只是设计稿中的渐变效果在 Flutter 上被识别为 `LinerGradient` ,呈现效果出现了偏差。
> 这里应该被识别为 `RadialGradient` 更为贴切,只是想要完成实现设计稿的效果还是有些难度。
![](https://user-gold-cdn.xitu.io/2020/3/15/170dea2437fade8b?w=1586&h=390&f=png&s=121711)
![](https://user-gold-cdn.xitu.io/2020/3/15/170de9d067557b14?w=1634&h=764&f=png&s=119356)
从上述例子可以看到 Spuernova 并不完美,甚至在列表、点击、动画等常见效果上还需要做额外的配置,**但是对于我而言 Spuernova 是和设计师沟通的平台,它用更直观的方法告诉了设计师“能做什么”,并且快速让我知道“需要做什么”。**
另外还有一个惊喜就是:**Spuernova 还支持 Sketch “转译” 为 Android 、iOS 和 react-native 代码,但是另一个惊喜就是除了 Flutter 之外其他需要收费。**
![](https://user-gold-cdn.xitu.io/2020/3/15/170de854e8022cc3?w=2462&h=1132&f=png&s=204549)
**总的来说 Spuernova 确确实实提升了 Flutter 工程师的生产力,能在一定程度上成为设计师和程序员之间的“桥梁”,虽然它并不完美,但是值得一试。**
![](https://user-gold-cdn.xitu.io/2020/3/15/170dea99951ff4f7?w=979&h=960&f=png&s=688292)
1
https://gitee.com/jiangdongguo/GSYFlutterBook.git
git@gitee.com:jiangdongguo/GSYFlutterBook.git
jiangdongguo
GSYFlutterBook
GSYFlutterBook
master

搜索帮助