V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
largecat
V2EX  ›  程序员

对于没做前端的人来说, FLUTTER 简直就是救星..

  •  
  •   largecat · 2019-05-11 11:56:52 +08:00 · 24094 次点击
    这是一个创建于 2022 天前的主题,其中的信息可能已经有所发展或是发生改变。
    没做前端的, 去做 UI 的话各种不适应, 因为组建太多,属性太多,记不住啊.不能熟练应用. 需要以个事件属性, 不知道哪个组件有, 每次一个实现都要翻文档.

    flutter 完全避免了这个问题, 任何东西都是小零件
    你要显示以个圈, 那就丢个 container 设置成圈圈, 你想它响应触摸, 你就套个 Gesturedetector,
    你根本不用去记哪个圆形组件有触摸,哪个圆形组件没有触摸,
    因为一切都是零散的,
    你可以随心所欲的根本不用特意去记某一些东西. 一些初步的了解就能随心的做出各种组合式的布局和事件响应机制,而且 material design 简直很美啊有没有,,

    还有, 因为 IT 行业更新快, 人不可能一直有精力去学新的东西, 所以每有新东西出来,都会得到老玩家的排斥, 比如 flutter 的嵌套风格,
    如果完全忘记老的 ui 做法, 这个新的嵌套风格可以所学习成本是非常低,非常顺手的.
    但是老玩家可能会排斥, 希望一切做法还是自己原先的做法, 但是话说回来, flutter 一切都按老的做法,那就不是 flutter 了,

    就好比 java 的人希望新的东西一切都要按 java 的规矩来, 那新的东西没必要出来了,出来了也是另外一个 java,
    是不是,

    可能利益的切换难免会受到旧事务的抱怨和抵制..

    但是 flutter 的 UI 涉及风格的学习成本几乎比 html css js 的风格学习成本低 90%以上,,,以我自己学习和使用的感受,
    曾经 html 页面布局折腾的我够呛....
    后期扩展开发的话, 现在 flutter 也有自己 bloc 之类的状态管理机制, 前端和后端是完全独立开来的,
    72 条回复    2019-12-21 11:27:51 +08:00
    yidinghe
        1
    yidinghe  
       2019-05-11 12:00:37 +08:00
    前一阵入门了一下 dart,觉得这个语言很棒,作为静态语言加入了很多动态语言的元素,编码效率提升了很多。
    murmur
        2
    murmur  
       2019-05-11 12:02:37 +08:00   ❤️ 2
    “但是 flutter 的 UI 涉及风格的学习成本几乎比 html css js 的风格学习成本低 90%以上”
    你这句话套给 react native 倒是挺合理的
    但是如果给了 flutter
    只能说你之前学的真差劲
    largecat
        3
    largecat  
    OP
       2019-05-11 12:05:31 +08:00
    @murmur 我说的学习成本是指 UI 布局方面, flutter 比 html, 原生的, 特别是 html 方面的学习成本低的非常非常非常多...
    largecat
        4
    largecat  
    OP
       2019-05-11 12:08:06 +08:00
    有些后端的同学做 ui 的时候, 如果被 html 的一些标记折磨的够呛的话, 不妨试试 flutter,
    你可以用极短的时间就能得到巨大的回馈....而且界面镇的很好看...
    bkmi
        5
    bkmi  
       2019-05-11 12:10:34 +08:00 via Android
    flutter 这嵌套还有不能省略的分号,离了 IDE 就哭了
    yuikns
        6
    yuikns  
       2019-05-11 12:14:20 +08:00
    我还以为 flutter 官方适配 web 了,然后搜了下居然真有... https://github.com/flutter/flutter_web


    @bkmi 不过反过来说,自己稍微配置下 IDE 构造 AST 支持起来也很强力,比各种动态语言精确多了。
    dog
        7
    dog  
       2019-05-11 12:15:24 +08:00 via iPhone
    跑个题,不谈技术,只说美观,一直欣赏不来 material design 好看在哪…… 是不是喜欢 md 风格的都是一些后端选手… 没见过精致的……
    jerrry
        8
    jerrry  
       2019-05-11 12:18:57 +08:00 via Android
    @dog mdbootstrap.com 倆者糅合的
    zjsxwc
        9
    zjsxwc  
       2019-05-11 12:19:39 +08:00   ❤️ 3
    jQuery 一把梭,flutter 弟弟
    dog
        10
    dog  
       2019-05-11 12:44:58 +08:00
    @jerrry 问题是 bs 也丑啊… 无论是 bs 还是 md 不都是为了给后端人员快速上手的选择嘛,真做项目我是觉得不忍直视的…
    bccoder
        11
    bccoder  
       2019-05-11 12:52:01 +08:00
    @zjsxwc dart 也有 server 版本,将来也可以一把梭,哈哈
    agdhole
        12
    agdhole  
       2019-05-11 13:06:05 +08:00
    @dog #7 大部分用框架的都是默认样式一把套,没有设计也没有调整,乱七八糟凑在一起当然不好看了,官方设计文档给出的很多示例图就很好看,https://material.io/design
    nguoidiqua
        13
    nguoidiqua  
       2019-05-11 13:31:23 +08:00
    个人也比较喜欢这种布局方式,不过有些人不适应,其实就是个习惯问题。
    askfilm
        14
    askfilm  
       2019-05-11 13:33:08 +08:00
    @agdhole 对的, 再好看的组件设计,到了后端手里,最后都会变成一坨...
    orangeade
        15
    orangeade  
       2019-05-11 13:38:06 +08:00 via Android
    @dog 精致怎么和前后端搭上关系了 笑话
    xrr2016
        16
    xrr2016  
       2019-05-11 13:57:43 +08:00 via iPhone   ❤️ 3
    不是吧,我觉得 flutter 写 UI 感觉是一种退步啊...
    wszgrcy
        17
    wszgrcy  
       2019-05-11 13:58:16 +08:00 via Android
    css 天下无双
    plqws
        18
    plqws  
       2019-05-11 14:01:17 +08:00
    flutter 相比 web,在各种意义上都是退步…除了性能和 dart
    dog
        19
    dog  
       2019-05-11 14:02:04 +08:00   ❤️ 3
    @orangeade 因为一个合格的前端或设计,见过好的 UI 是不少的,就不会欣赏 MD 这种不精致的 UI 了。尤其是在 BS 和 MD 出来之前,精致的 UI 比比皆是百花齐放。注意,我说的是只有后端会欣赏,是因为他们专注于业务逻辑代码,而没有把精力放在对审美的提升(这也合情合理),但我没说后端的对立面就是前端,至少包括设计和 PM 在内,都应该有合格的审美和眼光,而不是 MD / BS 一把梭。

    @agdhole 抱歉,即便是这个文档中的例子,即便是 google 自家的产品,我都认为不好看。比如大量的阴影设计、过多的动画效果、大边距、等等,这些元素在移动端 app 上也得非常细心的打磨,才可以出来比较能接受的产品,而直接拿来用的那些是真的欣赏不来。

    以上,我只是表达我个人欣赏不来 MD / BS 这些 UI 组件的设计风格,就好比大家可以说自己欣赏不来某个歌手艺人一样,萝卜青菜各有所爱。
    ttentau1
        20
    ttentau1  
       2019-05-11 14:04:07 +08:00 via Android
    同意 16 楼
    learnshare
        21
    learnshare  
       2019-05-11 14:28:25 +08:00
    Flutter 写 UI 效率可比 HTML + CSS 低多了,更别说跟 Vue/React 相比
    WildCat
        22
    WildCat  
       2019-05-11 14:36:32 +08:00
    所谓写 UI 效率高低不过劣质软件工程对所谓开发速度的需求。
    zzzim
        23
    zzzim  
       2019-05-11 14:41:04 +08:00 via Android
    md1 纯色不比其他花里胡俏的 ui 好看吗,不过组件的逻辑不适合 PC 网页端就真
    nguoidiqua
        24
    nguoidiqua  
       2019-05-11 14:43:41 +08:00
    @dog

    老实说,BS 和 MD 确实不是那种走精致路线的,这个没啥好说的,不过呢,直接套 BS 和 MD 是绝对比很多自己搞得设计要好的。

    另外,听说你审美很好的样子,不知道你这么好的审美,都欣赏哪些精致好看的 UI,有没有大家都能拿来用的那种。
    damngood
        25
    damngood  
       2019-05-11 14:54:50 +08:00 via iPhone
    flutter 这种 ui 构建方式真欣赏不来

    跨平台还是走 web 吧
    loginbygoogle
        26
    loginbygoogle  
       2019-05-11 15:00:05 +08:00 via Android
    没原生开发经验就别说 Flutter,不服写个跨平台的插件试试?
    dog
        27
    dog  
       2019-05-11 15:01:02 +08:00   ❤️ 2
    @nguoidiqua

    我就当你是善意讨论 而不是来杠的,斗胆回答一下。

    任何直接拿来用的 UI 框架基本没有精致的,不同应用 不同网站 不同内容,要展示的信息 侧重点不同,我发现大部分人在用这些 UI 框架的时候,都是在组件库中找一个差不多自己想要用的效果,然后套上去,这种做法往往会让细节无法直视。

    套框架的界面,整体看上去,有导航 有内容 有大标题 有子菜单 有分区,好似没什么问题,但都无法细看。因为这些设计元素,并不是针对要展示的内容去设计的。要论精致,即便是用 BS / MD 也要在很多细节的地方,自己重写样式去调整。如果界面内容不多的话,还不如全部自己写。

    举个例子,同样是导航站,如果像 /t/562937 这种的话当然不如套 UI,但类似 /t/478547 这种,就是我想表达的,针对内容去设计,至少在我看来,非常舒服。

    最后回到你说的,大家都可以用的 UI 框架,我觉得 iView 和阿里的飞冰,都优化得不错,无论是 PC 上的体验,还是在中文内容的呈现上,都调教得不错。在项目比较赶 或者比较懒的时候,我会直接用这两套。
    CommandZi
        28
    CommandZi  
       2019-05-11 15:02:32 +08:00   ❤️ 1
    @dog 同意,一直以来都有看到吹 material design,吹得我怀疑人生,我心想是不是我不懂得欣赏。material design 在我看来更像是色块加阴影。
    zqx
        29
    zqx  
       2019-05-11 15:02:56 +08:00 via Android
    html 几乎没有学习成本啊。xml 和 json 一样是数据通讯格式,而不是“编程语言”
    dog
        30
    dog  
       2019-05-11 15:04:39 +08:00
    补充一下,上面最后说的两套 UI,是指做后台管理应用时比较适用(或者说比较重业务逻辑的)。如果是前台页面,像什么产品展示啊、企业官网啊、小工具类的界面啊,那还是不建议套 UI 的。
    wisetc
        31
    wisetc  
       2019-05-11 15:06:26 +08:00
    听上去真好
    dodo2012
        32
    dodo2012  
       2019-05-11 15:06:29 +08:00
    嵌套的头晕,dart 现在也不习惯,就练练手
    dog
        33
    dog  
       2019-05-11 15:08:43 +08:00
    @CommandZi

    色块加阴影 哈哈 挺直白的,官方的色块 配官方的业务 还过得去,而很多人拿来瞎改色,用在自己那些 app 上,那是真的惨不忍睹。

    其实讲最简单的,去 themeforest 上找那些基于 MD / BS 的框架,找个觉得好看的舒服的,右键查看源代码,就知道改写了几百上千行样式。把改写的部分去掉,完全是两个东西。
    xianxiaobo
        34
    xianxiaobo  
       2019-05-11 15:13:20 +08:00
    material design 天下第一
    azh7138m
        35
    azh7138m  
       2019-05-11 15:18:27 +08:00 via Android
    @dog 握手,我也觉得 MD2 之后动效过多了,新版 Gmail 真的难受,好多产品更新之后感觉非常捉鸡,完全是面向移动端的设计,桌面上用的别扭。
    azh7138m
        36
    azh7138m  
       2019-05-11 15:21:31 +08:00 via Android
    @CommandZi 反观微软的就做的很好,设计指南里面全是交互动图,解释什么场景要怎么做(
    一个详情交互效果我感觉我能写一年。
    jlkm2010
        37
    jlkm2010  
       2019-05-11 15:55:19 +08:00
    同意 22 楼
    nguoidiqua
        38
    nguoidiqua  
       2019-05-11 16:31:45 +08:00
    @dog

    既然你知道这种开箱即用的东西不可能精致,那你说它不精致有意思吗?这种东西,它保障的是下限,而不是上限。

    事实上,现在大部分套用 MD 的 APP 还看着可以,我不觉得他们离开 MD 会设计得更好,很多自己搞自己风格的大 APP 那才叫惨不忍睹。一些小而美的 APP 确实比简单套用 MD 的看起来好点,但是对比那些 MD 用得好,也没有什么蛮突出的。在 MD 出来之前的时代,小而美的 APP 很受大家推崇,我也经常关注一些精品 APP 推荐。后来 MD 出来了,这种事情就没那么流行了,为什么呢,因为大家都不差了,稍微精致一点也没强到哪里去。

    另外你说的那两个,也相去不远。
    dog
        39
    dog  
       2019-05-11 16:38:01 +08:00
    @nguoidiqua 开箱即用不精致,我为什么就不能说它不精致?我觉得非常有意思。
    nguoidiqua
        40
    nguoidiqua  
       2019-05-11 16:43:14 +08:00   ❤️ 2
    @dog 没有说不能说,我的意思是——这是一句废话。

    楼主说的就是 MD 开箱即用很方便,也好看。你站出来反驳说不好看,那你起码能拿出一个同样开箱即用但是比 MD 更好的对吧。
    dog
        41
    dog  
       2019-05-11 16:49:41 +08:00
    @nguoidiqua 首先我说 MD / BS 不精致,和它是否开箱即用无关。我也阐述了我认为好看的 UI 应该如何、以及为什么我认为 MD 不好看。我觉得我这是非常友善的讨论。你问我 我认为的有什么更好的,我也给了你两个例子,以及理由,你觉得相去不远,那就继续用 MD 就好了。何必来杠?到底是谁在说废话呢?
    nguoidiqua
        42
    nguoidiqua  
       2019-05-11 17:27:26 +08:00   ❤️ 1
    @dog 你觉得友善就是友善,你觉得别人审美差就是审美差,你觉得好看就是好看,你觉得丑就是丑,对吧。

    不讲那么多,我就问你,针对楼主的需求,你能提供更好看的选择吗?难不成你说这些只是为了表明你的审美比楼主高。

    那我知道了。
    dog
        43
    dog  
       2019-05-11 17:30:10 +08:00
    @nguoidiqua 傻逼
    jin5354
        44
    jin5354  
       2019-05-11 17:39:13 +08:00
    ?? 评论比主贴好看
    okayz
        45
    okayz  
       2019-05-11 17:44:41 +08:00
    嵌套太懵逼。。
    nguoidiqua
        46
    nguoidiqua  
       2019-05-11 17:51:51 +08:00
    @dog 你不是很友善吗?你不是见得多了吗?

    喷别人的时候就举世无双,好像你比 BS/MD 的设计都强出一个世纪一样。这种东西本来就是个人喜好的问题,非要跳出来喷别人审美,还一喷一个群体。
    dog
        47
    dog  
       2019-05-11 18:06:20 +08:00 via iPhone   ❤️ 2
    @nguoidiqua 遇到不会好好讨论的傻逼我当然也可以不友善,比如你这种
    wly19960911
        48
    wly19960911  
       2019-05-11 18:17:52 +08:00
    论嵌套,react 和 flutter 没什么区别啊,而且 react 的成本还比 flutter 大。换成 html 之后,后端就能接受嵌套语法?
    janxin
        49
    janxin  
       2019-05-11 18:18:07 +08:00
    首先虽然我也是非常喜欢 Flutter 的,不过确实有几点我觉得还是提一下比较好。

    一个是对比 React,React 的 UI 库提供的功能也是非常方便和简单的,对后端同学也比较友好,相对来说 Vue 对后端可能不太友好一点。借助 TSX 则可以扩展更多的类型提示,也是非常强大的。推荐楼主可以了解一下。React 确实是一个很有意思的框架,非常值得学习。

    另外一个是,嵌套确实是一个问题,一坨真的没有美感。在这一点上,同样是嵌套,对比上 React 是要好上一些(虽然有时候也很恶心)。不过现在好消息是,Flutter 1.5 + Dart 2.3 之后很多的情况是代码如果简单使用就不会像之前那么冗长了,这个情况要比之前好上不少。具体可以看一下 Dart 的官方博客:

    https://medium.com/dartlang/announcing-dart-2-3-optimized-for-building-user-interfaces-e84919ca1dff

    还有一个是关于界面组合,我觉得网页开发也好,原生 GUI 开发也好,Flutter 也好,都是概念非常多的拼接组合,本质上没有什么太大区别,就是写法有些区别罢了...
    AndroidEngineer
        50
    AndroidEngineer  
       2019-05-11 18:19:48 +08:00
    嵌套是真的不喜欢好吗?怎么会有人认为方便!无语
    reus
        51
    reus  
       2019-05-11 18:35:31 +08:00
    嵌套不喜欢?那 html 就没有嵌套了?
    murmur
        52
    murmur  
       2019-05-11 18:37:13 +08:00
    @wly19960911 xml 那是全程序员都学过的语法 html 也算 xml 的一种 jsx 当然也像 xml
    然而 flutter 那是没有 jsx 裸写 render 方法
    wly19960911
        53
    wly19960911  
       2019-05-11 18:40:04 +08:00 via Android
    @janxin 我感觉抛弃 HTML 之后的声明式语法比 HTML 看起来舒服多了,而且 dart 没有 js 版本的兼容问题,源码想看就看,js 没有人提供 source map 的话,你就自己猜吧。

    至少看了些 flutter 原生提供的组件思路,结合看看源码,对我个人还是很受益的。
    murmur
        54
    murmur  
       2019-05-11 18:41:12 +08:00
    @wly19960911 我们写 react 用的 es5 的语法 sourcemap 有是锦上添花 没有的话一样可以
    qwertyyb
        55
    qwertyyb  
       2019-05-11 18:45:27 +08:00 via iPhone
    这一层层的嵌套,一层层的小括号,有种回调的即视感。相对来说还是 Xml 的嵌套更为直观一些,可读性也更好
    wly19960911
        56
    wly19960911  
       2019-05-11 18:52:23 +08:00 via Android
    @murmur 裸写 render ?

    const myheader = (name) => <header>{name}</header>;

    这样定义?(手机手打)如果这样的话,dart 也可以做。我只是感觉嵌套下,其实没什么区别。不过我不是争论 react 和 flutter 的优劣,从语法上 HTML js 混合的声明语法对我来说比声明 class 思考起来更麻烦。和你理解 flutter 类似。

    这还是 react 好,换成 vue 和 angular 模板写法,创建组件麻烦的要死,不少人多创建一个组件都嫌麻烦
    kuyuzhiqi
        57
    kuyuzhiqi  
       2019-05-11 19:00:49 +08:00 via iPhone
    新的 Android studio3.4 界面优化了,更加友好了
    abcbuzhiming
        58
    abcbuzhiming  
       2019-05-11 19:35:22 +08:00
    @wszgrcy 没错,但是 CSS 同时难学难用容易遗忘
    ace12
        59
    ace12  
       2019-05-11 19:38:39 +08:00
    flutter 那嵌套不比 html 难受?
    tianyu94
        60
    tianyu94  
       2019-05-11 19:43:10 +08:00 via iPhone
    @dog 什么是精致?
    oatw
        61
    oatw  
       2019-05-11 20:16:22 +08:00   ❤️ 1
    flutter 那一坨一坨的感觉。。。如果全世界只剩下它那一种开发 UI 的方式,那我宁可改行去当个护林员。
    marcushbs
        62
    marcushbs  
       2019-05-11 21:46:32 +08:00
    @azh7138m 想起了 Windows Vista 关机菜单几十人忙了一年的梗: http://moishelettvin.blogspot.com/2006/11/windows-shutdown-crapfest.html
    laogui
        63
    laogui  
       2019-05-11 21:52:19 +08:00
    React Native 至少继承了 Web 的表现和业务分离,标签、样式、业务代码可以分开写,Flutter 都写到一起,再加上代码嵌套,后期维护成本很高。但还是很看好 Flutter,在多端统一的兼容性上做的很不错。
    kuyuzhiqi
        64
    kuyuzhiqi  
       2019-05-11 22:34:42 +08:00
    @oatw 去使用 Android studio3.4
    Heavytiger
        65
    Heavytiger  
       2019-05-11 23:41:26 +08:00
    确实,希望能够统一起来
    fakeshadow
        66
    fakeshadow  
       2019-05-12 06:20:23 +08:00
    把 widget 尽量拆散,利用 bloc 之类的模式把逻辑和样式隔离。我个人感觉 flutter 的嵌套也没那么严重。
    caqiko
        67
    caqiko  
       2019-05-12 11:49:35 +08:00
    @dog 你说的 BS 是 bootstrap 吗?看另一个组做的内部系统,全是 bootstrap,样式看起来都差不多。
    MiYogurt
        68
    MiYogurt  
       2019-05-12 12:49:27 +08:00   ❤️ 2
    同样不喜欢 MD 风格,google 用起来感觉还行,不算丑,可以接受,但是自己用起来,感觉自己像拉了一门意大利炮,然后拿着炮管去砸人的滑稽感觉。描述树结构最优化的描述语言就是 xml 语言系,不支持这一类的工具,估计还是官方的精力不够,dart 的东西太多了,更新不过来。我最近准备出版一本关于 dart 语言的书籍,https://github.com/MiYogurt/DartUp,这几天在录制这个里面的 flutter 实战教程,这两天应该就可以录完了,可以到我的 bilibili https://space.bilibili.com/2514211 或者 https://nodelover.me 关注一下。
    tuomasi
        69
    tuomasi  
       2019-07-25 07:30:56 +08:00
    material design 天下第一
    divasatanica
        70
    divasatanica  
       2019-07-30 18:18:55 +08:00
    Flutter 的写法让我想起 ext.js
    yah0130
        71
    yah0130  
       2019-11-28 17:26:45 +08:00
    @divasatanica 还真挺像
    keling
        72
    keling  
       2019-12-21 11:27:51 +08:00
    对前端想写 APP 的是救星,h5、rn、uniapp 之类的完全不能和 flutter 比
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5277 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 53ms · UTC 08:22 · PVG 16:22 · LAX 00:22 · JFK 03:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.