这是一个创建于 1770 天前的主题，其中的信息可能已经有所发展或是发生改变。
用不成熟的 flutter web 做了个网站
目前，flutter web 还不成熟，官方不建议在生产环境中使用。于是我本着“我不入地狱谁入地狱”的觉悟，趟了趟这坑浑水。
说实话，比想象中的坑少，并没有被坑得爬不起身。但依旧还有几个大问题还没有找到解决方案。
先上地址：
-
放在垃圾服务器上面的：http://www.kuyichang.com
两个地址都非常慢，无法忍受的慢，所以如果不是非常感兴趣，恐怕你是和它无缘了。
tips：挂代理速度还是可以的
既然如此，先挂几张图吧
简单介绍一下这个小破站 - 哭一场（ kuyichang ）：
-
包括电影、故事、照片、一言、说点五个板块，内容核心就是两个字：“催泪”，网站定位是帮憋屈的你哭出来，让你哼着歌进去，喊着娘出来。
-
电影数据来自豆瓣
-
故事、照片、一言来自网络收集
-
说点里面的诗词 API 来自https://www.jinrishici.com/
-
有一个切换天气的功能，使用动画实现，事实证明大量控件的 rebuild 会干死自己
-
目前没有做适配
需要吐槽的地方：
-
debug 是真难用
-
图片上面不能盖一层颜色(纯色或渐变)
-
build 的 js 太大了
-
多控件 rebuild 还是卡的
总体感受：
确实能很真切地感受到 web 端的不成熟，很多交互和布局都是移动端的模式，硬用在 web 上来感觉有些别扭。
不得不夸赞的地方是，dart 用得很舒服，继承了传统语言的优点，又具有现代语言的优雅高效。
刚开始对于 widget 的嵌套很不适应，但慢慢地也就习惯了，其实它也促使你更细化地分离组件，对于 flutter 的 widget 树 rebuild 机制来说，组件颗粒度是越小越好的。
flutter 在 web 上的渲染还能接受，之所以不想用 flutter 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。
欢迎资源推荐或拍砖~
第 1 条附言 · 2020-01-20 20:05:04 +08:00
雨越大越卡。上文有提到，是因为大量对象的rebuild。如果有优化想法的同学，欢迎与我交流。
 |
1
murmur 2020-01-20 14:05:30 +08:00
windows 下这渲染看着真难受。。。
|
 |
2
xttli123 2020-01-20 14:06:56 +08:00
很卡
|
 |
3
maomaomao001 2020-01-20 14:12:07 +08:00
mac 上非常卡 （滑动时）
|
 |
4
Vegetable 2020-01-20 14:14:49 +08:00
一言那个模块，回弹太快了点，用滚轮都鬼畜了
|
|
5
murmur 2020-01-20 14:16:49 +08:00
另外一个问题，电影的页面似乎只支持滚轮，不支持键盘事件
|
 |
6
ngrok111 2020-01-20 14:18:19 +08:00
github 地址访问速度还行，另一个半天都打不开( 土澳渣网 )
|
 |
7
windfarer 2020-01-20 14:18:34 +08:00
有点卡
|
 |
8
Tink 2020-01-20 14:22:32 +08:00
图好像全挂了
|
 |
9
itstudying 2020-01-20 14:23:32 +08:00
下雨的效果是一阵一阵的
|
 |
10
zhw2590582 2020-01-20 14:24:33 +08:00
慢，而且控制台很多错误
|
 |
11
speedofstephen 2020-01-20 14:30:08 +08:00
好巧阿，我这几天也想着这个创意呢。感觉网易云音乐很多歌曲的精彩评论也很催泪。
|
 |
12
zhanziyang 2020-01-20 14:30:56 +08:00
太丧了，玩不下去
|
 |
13
CoCoMcRee 2020-01-20 14:32:43 +08:00
很好奇...怎么会如此的卡
|
 |
14
jayin 2020-01-20 14:36:13 +08:00
还有很大的改进空间
|
 |
15
lookas2001 2020-01-20 14:45:34 +08:00 via Android
卡。。卡的
|
 |
16
oubenruing 2020-01-20 14:51:17 +08:00
我还以为写 flutter web，写的楼主哭了一场。
|
|
17
murmur 2020-01-20 14:52:20 +08:00
不知道你们说网卡还是页面卡，windows 7 代 u chrome cpu 瞬时占用突破 50%，750ti 亮机卡都有 30%负载，不过时好时坏，考虑到 windows 的 chrome 比 osx 要好，mac 卡也是应该的
关雨保平安 |
 |
18
heijiangjun 2020-01-20 15:01:50 +08:00
简单的效果也这么卡，确实有点不能接受。话说设计挺漂亮的，楼主自己设计的吗
|
|
19
heijiangjun 2020-01-20 15:05:23 +08:00
“flutter 在 web 上的渲染还能接受，之所以不想用 flutter 写移动端，首要原因就是在移动端的渲染和原生在视觉上还是有很大差距。“ 我用 flutter 自己写了个小应用玩，debug 模式下运行在红米 k20 上感觉挺流畅的，视觉上也和原生没太多区别啊
|
 |
20
pota 2020-01-20 15:06:34 +08:00
1.5M 的 js。。。
|
 |
21
Lombard 2020-01-20 15:10:43 +08:00
不知道为啥，我对这种 hover 效果有种生理上的不适
|
 |
22
lylijincheng 2020-01-20 15:23:57 +08:00
@CoCoMcRee 同好奇。。
|
 |
24
kkniub 2020-01-20 15:33:18 +08:00
(((((()))))) 是这样的吗?
|
 |
25
love 2020-01-20 15:48:59 +08:00 via Android
看了标题还以为是 flutter 写 web 太痛苦了大哭了一场
|
 |
26
gaigechunfeng 2020-01-20 16:31:25 +08:00
我靠。为什么我看着一点都不卡啊？
难道是我的电脑配置太牛逼了。 |
 |
27
mmrx 2020-01-20 16:43:45 +08:00
确实一卡一卡的，不是很流畅
不知道是代码的问题，还是确实 flutter web 转 js 优化做得不够 楼主行动力很强 |
 |
28
mgrddsj 2020-01-20 16:45:14 +08:00 via Android
移动端竖屏显示不出来电影图片，横屏时内容显示不全。滑动时卡得不行，Android Chrome 79 + 骁龙 835
|
 |
29
chanchan 2020-01-20 16:53:38 +08:00
电影简介应该用渐变缓慢翻页的动画,这样弹出来一点都不想哭
别的动画也太突兀了,没内味儿 |
|
30
murmur 2020-01-20 16:55:47 +08:00
|
 |
31
Cbdy 2020-01-20 17:01:43 +08:00
f12 了一下，这个页面爬虫没法爬😂
|
|
32
mmrx 2020-01-20 17:05:29 +08:00
@murmur 哈哈哈哈 @registered 建 议 改 为： 撸 一 场
|
 |
33
hst001 2020-01-20 17:15:33 +08:00
滑动卡看起来像 bug，比较有规律
|
 |
34
moonrailgun 2020-01-20 17:43:30 +08:00
这个下雨的特效惊到我了
|
 |
35
sneezry 2020-01-20 17:48:11 +08:00
内容非常好！如果滚动能顺滑一点，过度动画慢一点感觉会更好
|
 |
36
wdaye 2020-01-20 17:54:03 +08:00
mac 打字 滑动 都卡到不行。
|
 |
37
snowspace 2020-01-20 18:18:21 +08:00
“移动端的渲染和原生在视觉上还是有很大差距” 差距貌似不大呀
|
 |
38
superpeaser 2020-01-20 18:35:22 +08:00
看着还不错啊
|
 |
39
registered OP @murmur 关雨保平安，😝
|
|
40
registered OP @xttli123 关雨保平安，😝
|
|
41
registered OP @maomaomao001 关雨保平安，😝
|
|
42
registered OP @Vegetable 额，是我考虑不周，很多年没用过鼠标了
|
|
43
registered OP @murmur 额，没太明白您的意思。是说电影的介绍信息的滚动吗
|
|
44
registered OP @ngrok111 等我有钱了，肯定换个国内的服务器，🐶
|
|
45
registered OP @windfarer 关雨保平安，😝
|
|
46
registered OP @Tink “照片”板块的图片源和其它的图片源不一样，应该不会同时挂吧
|
 |
47
banliyaya 2020-01-20 19:02:59 +08:00 via iPhone
用 macbookpro 和 xr 很流畅，但是切换到下雨就明显有点顿了。除了下雨其他动画很舒服哈啊哈
|
 |
48
LancerComet 2020-01-20 19:04:34 +08:00
除了下雨卡，我感觉速度还 OK，Windows 10 + Chrome，Thinkpad X1E
|
 |
49
Anarchy 2020-01-20 19:46:32 +08:00
下雨比较卡，其他没什么问题 macbookpro 2015 款
|
|
50
registered OP @zhw2590582 嗯，发现了两个错误。一个是逻辑错误，一个是权限问题。感谢指出
|
|
51
registered OP @heijiangjun 谢谢，是自己设计的
|
|
52
registered OP @heijiangjun 我说的差距不是说性能，是视觉感受。确实和很多同学交流，他们都说没什么区别，我倔强的认为有差别，如果非要形容一下的话，就是“无质感”。
|
|
53
registered OP @speedofstephen 感兴趣的话可以一起来玩啊 ~
|
|
54
registered OP @chanchan 感谢指出。欢迎交互大佬提建议
|
 |
55
viewsnake 2020-01-20 20:11:10 +08:00
非常棒的网站，加入我的收藏夹了，现在这个碎片化时代，我特别讨厌头条抖音快手那种主动推送的 APP，让你失去主动思考的灵魂，统统卸载，手机只保留支付宝和微信。
|
|
56
registered OP @itstudying 是的。因为如果是连续的话，对象没办法复用，会更卡，暂时做不到。
|
|
57
registered OP @viewsnake 哥们你这个留言像是机器人呀 ~
|
 |
58
kasusa 2020-01-20 20:16:59 +08:00
嗯，，好卡呀不知道为啥
|
|
59
itstudying 2020-01-20 20:25:54 +08:00
想去说点啥看到需要回复诗句的下一句，想去百度搜答案发现不能复制，想去 f12 复制发现定位不到标签，最后还是来这回复了。就别为难我这个没文化的后端 boy 了，所以，用 dart 写出来就是不能定位标签的吗？还是我姿势不对
|
 |
60
stardust21 2020-01-20 20:27:18 +08:00
完成度挺高的了，不过 js 是真的挺大的
|
|
61
itstudying 2020-01-20 20:33:55 +08:00
@itstudying #59 哦 就是都转成了 js，全都是 js 在操作 dom 呗
|
|
62
registered OP @mgrddsj 没有做适配哟 ~
|
|
63
viewsnake 2020-01-20 21:58:02 +08:00
@registered 为啥像机器人，难道我已经变成机器人了哈
|
 |
64
droiz 2020-01-20 21:59:52 +08:00
transform 的计算全靠 js 啊，这 tm 真的卡
|
 |
65
HuHui 2020-01-20 22:18:31 +08:00
http://www.imooc.com/article/289434
可以加个高斯模糊 |
 |
66
userdhf 2020-01-20 22:37:43 +08:00
f12 了一下，刷新了三观。。。还不如纯 dom。。一路嵌套，是 flutter 就这德行，还是楼主刚上手??
|
 |
67
yafoo 2020-01-20 23:02:26 +08:00 via Android
以前觉得 flutter 很牛逼，现在突然觉得这东西高不成低不就。
|
 |
68
oatw 2020-01-20 23:38:06 +08:00 via iPhone
我用手机 safari 看的 点不动呀
|
 |
69
GPLer 2020-01-21 00:46:43 +08:00 via Android
Firefox 操作完全不卡，就是这雨怎么一阵一阵的。（
|
 |
70
ccraohng 2020-01-21 06:37:58 +08:00 via Android
手机上的滚动好僵硬
|
 |
71
nicevar 2020-01-21 08:17:30 +08:00 via Android
没事，其实前端圈发展起来之后，这样卡的网站满天飞，油管也没比你这好多少
|
 |
72
mxT52CRuqR6o5 2020-01-21 09:20:47 +08:00 via Android
优化的方法就是换个技术栈，说实话 flutter 的 native 端我也没觉得性能好到哪去
|
|
73
registered OP @yafoo 还是新生儿。我觉得现在的问题是官方急着响应口号“适配多端”，而不是花大力气去优化
|
|
74
registered OP @userdhf 嵌套不是重点吧。这不是手写代码，是 build 后的代码。
|
 |
75
Chengxians 2020-01-21 10:32:41 +08:00
收藏，下个月 vue copy 一份
|
 |
76
zxcslove 2020-01-21 10:35:27 +08:00
标题党，楼主没哭一场，差评
|
 |
77
herozzm 2020-01-21 10:36:36 +08:00
得有多弱，web 都需要用 flutter
|
 |
78
studyro 2020-01-21 10:58:07 +08:00
渲染不是基于标准的 HTML 标签，导致 VIM 插件不可用了。如果 Flutter Web 在这个基础上被推广开，那真的是灾难了。
|
 |
79
GopherTT 2020-01-21 11:03:51 +08:00
左侧边栏 hover body 闪瞎我..
|
 |
80
xrr2016 2020-01-21 11:10:10 +08:00
赞一个
|
 |
81
maxint 2020-01-21 11:21:22 +08:00
很棒
|
 |
83
liuxey 2020-01-21 11:28:30 +08:00
关雨保流畅
|
|
84
registered OP @herozzm 那您可不是牛逼坏了
|
 |
85
wanguorui123 2020-01-21 11:49:15 +08:00 via iPhone
勇士
|
 |
86
xiaotianhu 2020-01-21 12:56:30 +08:00
我也以为是 lz 写的哭了一场....尴尬
|
 |
87
xuanbg 2020-01-21 13:24:15 +08:00
下雨似乎影响点击？？
|
 |
88
Maiiiiii 2020-01-21 13:44:31 +08:00
一言那里好像没办法用滚轮滑动
小雨就卡的不行 故事内容不能被选中，对于我这种喜欢选一段高亮看字的，有点别扭 |
 |
90
milukun 2020-01-22 10:53:05 +08:00
感觉并不慢 打开还挺快
|
 |
91
sodulty 2020-01-22 14:01:31 +08:00
啥时候能顶掉 rn 上位呢
|
 |
92
xjqxz2 2020-01-22 14:31:37 +08:00
单页应用怎么才能给爬虫们收录啊
|
 |
93
loginbygoogle 2020-03-30 17:27:52 +08:00 via iPhone
😀
|
|
94
milukun 2020-04-18 11:50:32 +08:00
问一下 flutter 做的 web 是不是不存在 url 的路由一说？ 只能是全部运行在一个页面
|
|
95
registered OP @milukun 据我所知，是这样的。但应该可以配合 NGINX 做到不同的地址对应不同的“页面”，这里的“页面”指的是 flutter 概念上的页面，不是指 web 页面。
|
 |
96
zcoderrr 2020-05-15 10:48:08 +08:00
@milukun
@registered 既然是 web 肯定要有 url 路由的，可以看下我写的静态博客，可以直接通过地址跳到指定文章 ： http://toseetheworld.cn/#/post?title=Welcome 仓库地址： https://github.com/zcoderr/Fluttlog |
|
97
registered OP @zcoderrr nice work ！之前我也这样试过，不过不知道为什么当时没成功，只能眺首页。我以为 Flutter 不支持 url 传进来的路由地址。
|
 |
98
39499740 2020-06-04 15:21:08 +08:00
@registered 话说这个你重新 build 过么？ 136 天了，不知道现在的渲染效率是不是会提高一些
|
 |
99
CatalinaMylove 2020-06-12 02:21:46 +08:00
我想哭 但是哭不出来
等到思念像海 太丧了，玩不下去 |
Select Language