用 Flutter 写了个 V2EX 的小 demo， Flutter 真的很优秀。

[wyndamlion]

V2EX Flutter Demo

项目地址： https://github.com/onlynight/v2ex_flutter_demo

关于 Demo

该 Demo 旨在学习 flutter，以及研究 flutter 的实用性。

从学习 flutter 到编写完该 demo 总计耗时 3 天，易上手。

设计理念优秀，UI 组建全部以 widget 形式呈现，非 UI 组建也可以是 widget，API 设计规范统一，优秀。

app 预览

app 下载

下载最新的 release https://github.com/onlynight/v2ex_flutter_demo/releases

相关项目

使用 V2EX 接口项目地址: https://github.com/djyde/V2EX-API

之前写的一个 MVVM 模式的 V2EX android demo 项目地址： https://github.com/onlynight/V2EX

Flutter

这是一个用 flutter 写的 V2EX 客户端 app。旨在学习 flutter，以及研究 flutter 的实用性。对比了 React Native，Weex 和 Flutter，Flutter 优势很明显，具体有以下几点：

1. 性能表现优异（目前只测试 android 端，ios 暂时没有测试，估计性能会比 android 更优秀）
2. 教程文档全中文
3. 社区友好，文档齐全
4. 大厂 google 负责开发维护
5. 高校 UI 编写（虽然没有从开发框架层面做 MVC，直接使用代码编写界面，但是设计理念优秀，特别适合 app 开发人员学习，深入）
6. 综上，非常优秀的大前端框架，优秀。

很多小伙伴说图没了，之前用的csdn的图，现在换成github的希望能好点。

再更新一次，有很多小伙伴想要中文文档，这里贴出来。

中文官网，https://flutterchina.club/

官网，https://flutter.io/

[chenjian026]

图好像挂了

[wyndamlion]

@chenjian026 github 嘛，还是这个帖子?

[ss098]

厉害，Flutter 确实非常值得学习。

“组件”，“高效”错别字。

[wyndamlion]

@ss098 哈哈，看的很仔细，优秀。

[CloudnuY]

贴内图挂了，换个图床试试

[kera0a]

嵌套看的我眼花
https://github.com/onlynight/v2ex_flutter_demo/blob/4be42e0b8c344e3e92757c83fe17a2d5da5ebd2c/lib/ui/home/Home.dart#L104

[fish267]

这错别字简直了！

[jiangnanyanyu]

我觉得嵌套一点都不优雅

[wyndamlion]

@kera0a 写起来真的很爽，我刚开始看的时候也很头疼，写起来真的开心。

[my101du]

操作流畅得飞起！
比之前用过的 Ionic 什么的完全不是一个感觉。
甚至有切换 tab 的触摸动画还没结束，数据就已经加载完毕并且转场进入了下一个界面的错觉。

[wyndamlion]

@my101du 是的，我也觉得性能很优秀，同样是虚拟机，dart 的比 js 的性能要好不少。

[jerrry]

教程文檔全中文？我看的是假的文檔

[dummyuser]

@jerrry 官方文档有中文翻译的

[Natumsol]

楼主错别字好多。。

[chenglu]

赞！

[azhangbing]

可以 最近也在学 flutter

[chmlai]

这种级别的 demo 怎么看能看出优不优秀

[kingcos]

Mark 一下，准备看看

[swkl86]

求中文文档链接

[chengluyu]

楼主的 GitHub 头像怎么看着那么眼熟呢……我总觉得在其它的论坛上见过。

[falcon05]

楼主用 Android studio 还是 vscode?

[chenglu]

@swkl86 可以看一下这里 https://flutter-io.cn/

[learnshare]

就是写起 UI 比较麻烦

[wyndamlion]

@chengluyu 偷的别人的头像哇，哈哈哈哈哈

[wyndamlion]

@jerrry 有官方中文文档啦，还专门针对国内有专有的包管理服务器 https://flutterchina.club/

[PopeyeLau]

最近也在学。「 Hot reload 」太爽了。

[chinagxwei]

有不少可以优化提高可读性的地方

[wyndamlion]

@falcon05 AS 和 VSCode 我都用了下，VScode 的 hot reload 感觉老是出问题，其他都差不多，最后换 AS 了。

[wyndamlion]

@chinagxwei 初学，也是看了别人写的 demo，稍微优化了下，写得不好，献丑了。

[lmw2616]

@chmlai 闲鱼里面部分使用 flutter 开发， 盲测一下看看能分辨出哪些页面是 flutter 开发的，

[nicevar]

写了个 helloworld，哇 RN 真的很优秀，我们采用 RN 开发吧！
过了段时间，哎呀，怎么这么多坑啊！
不行，这个问题解决不了，要等官方修复！
来不及了，还是用原生开发吧。。。

[wyndamlion]

@nicevar 坑肯定是有的，就我写这个简单的 demo 都遇到不少坑，但是不影响它优秀的设计，和优秀的体验。api 设计的拓展性都比较好，遇到坑可以曲线救国。

[lizhenda]

其它都蛮好，但是目前还未找到直接封装原生组件结合开发的途径，这样直接断送了比如接入视频播放、地图等其它第三方组件的路。这一点是比不上 RN 的

[erDaren]

赞！

不过错别字多的有点不能忍了

[artandlol]

前段时间就看到咸鱼的 leader 在掘金分享这框架

[rocbomb]

高校 UI 编写

哈哈哈,学院派 UI 编写

[chinagxwei]

@wyndamlion 没有没有我也在学习当中，加油

[JRay]

感觉 UI 那块看得头大

[misaka20]

最起码 2 年之内，没有学习的必要。

[CommandZi]

虽然我还没了解过，但从闲鱼 iOS 的那个详情页来看，滑动的细节跟原生的不太一样，有点不爽

[lynan]

前端狗，这两天才了解到 flutter，跟着教程敲完 demo，嵌套真的晕了。

[wyndamlion]

@lynan 嵌套粒度稍微拆分一下，按照模块分，然后独立一个 widget 这样看着会好很多。

[Totato5749]

我觉得 po 吹的过头了。。。。。

[cc128]

最近也在学习。flutter 是直接使用 skia 渲染。所以性能上相当 rn 还要好一些。不过确实不管是 rn 还是 flutter。这种响应式编程还是看着不舒服。

目前也是刚开始看，还不太清楚到底有多少坑。不过看有朋友说 2 年内没必要学，这个不能赞同。国内一些互联网公司已经开始小范围学习和实验了。

而去是 google 搞了个新的系统 fuchsia，并且 android art 虚拟机里已经增加了对他的支持。所以后续 2 各系统定位怎么样先不管。先了解学习下 dart 和 flutter 应该是很好的时机。

[WildCat]

生态有点差，轮子是不少了，就是功能都太简陋。

react native 还有个巨大的好处就是可以热更新。

[xiuscong]

性能一点都不优异。列表滑动掉帧卡顿，之前 flutter 官方的 demo 也是各种掉帧

[hyyou2010]

https://github.com/flutter/flutter/issues/14330

我估计 flutter 后续会增加热更新功能，这的确是个吸引人的能力

[lneoi]

三天时间，楼主之前是做什么的？也是 app 开发吗

[luvxy]

这个是什么能解释下吗，我第一次听说以为是原生的写安卓的东西，现在看你说好像安卓 ios 都能？

[wyndamlion]

@cc128 赞同

[wyndamlion]

@lneoi 厚着脸皮，四年 Android 开发

[wyndamlion]

@luvxy 你懂 React Native 嘛，还有 Weex，这两个都是通过写 JavaScript 然后通过虚拟机解释脚本调用原生（ android/ios/web ）的大前端框架。Flutter 的不同就是它不是使用 JavaScript 而是使用 google 自己的 dart 语言，可以实现一套代码三端复用，就是说可以开发 android、ios 和 h5。

[wyndamlion]

@xiuscong debug 的版本性能确实差，有很多 debug 的库没有移除，还有就是我猜 debug 时代码没有优化，release 后性能提升很多，和原生差不远了。有些地方需要优化一下，比如我写的 demo 中 tab 切换就要优化，不然每次切换页面都会卡顿，优化过后和原生体验差不太多。大前端时代要来了，我以前也很抵触这些东西，flutter 改变了我的想法，该学了兄弟。

[deathscythe]

跑了一个简单的列表 20 条数据，好卡，滑动一点都不顺畅

[tongyang]

你有米有遇到过 new text 出来的字体是红色的还有两条黄线？。。

[39499740]

@tongyang
我猜
你用的是 CupertinoPageScaffold
Text 默认就是带红色字体带两个黄线，你必须自己改
比如 style: TextStyle(
color: Color(0xff333333),
fontSize: 15.0,
decoration: TextDecoration.none,
fontWeight: FontWeight.normal)

另外，如果你使用的是 MD，就不会出这个问题，因为 MD 默认有字体的 style，覆盖了原来的默认 style

[39499740]

@wyndamlion 不是 debug 没优化的问题，主要是为了 JIT 模式，所以 DEBUG 会卡，release 只有 AOT 模式了，删除了 JIT 模式，效率就上去了

[tongyang]

@39499740 谢谢啦，弄明白了。。就是这个问题。。好坑啊。。

[tongyang]

@39499740 你知道 flutter 对于富文本该用什么控件么？

[39499740]

@tongyang Text 支持富文本，只不过用起来貌似麻烦点，你可以看看这个 https://www.aliyun.com/jiaocheng/20152.html?spm=5176.100033.2.11.hWOSsB

[tongyang]

@39499740 ==我的意思是类似那种像 Android 的 textview 可以直接解析 HTML 或者 markdown 网页的控件。。这种的即使显示了对内部的链接之类的也无法控制。。

[39499740]

@tongyang 因为现在没有相关方面的需求，所以没去了解。
你可以去 https://github.com/memspace/zefyr 了解一下。这是个富文本编辑器，但是编辑器里面好像有个页面是展示的，你可以翻翻 demo

[tongyang]

@39499740 谢谢啦

[pythonee]

不错，准备开始学习

[bbinchina]

楼主对 flutter 的工作感兴趣吗？我司正在招人，地点成都上海可选✧◝(⁰▿⁰)◜✧

[jemygraw]

不错，不错，稍微修修就能跑。

[cooaer]

@hyyou2010 #47 官方明确说了，不会有热更新功能，理由是苹果应用商店不允许二进制代码更新！

[cooaer]

@deathscythe #54 你试试 release 模式！ debug 和 release 包的代码运行模式不一样，debug 用的是 jit 模式，release 是 aot ，性能有很大提升！