本文为稀土技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!

这是 《Flutter 工程化结构挑选》 系列的第二篇 ,就像之前说的,这个系列只是单纯告诉你,创立一个 Flutter 工程,或许说建立一个 Flutter 工程脚手架,应该怎么快速挑选合适自己的功用模块,或许说这是一个指引系列,所以比较合适新手同学。

本篇首要介绍 UI 相关的,可是完全单纯介绍 UI 好像又有点水,那便是加一些小常识来吸吸水分吧

做为前端开发,咱们的大部分责任便是开发 UI ,可是假如有人帮咱们提早把 UI 做好,那岂不美哉?事实上许多时分 UI 的确是能够模版化,而前端范畴也一直是这样,例如 Ant DesignElement-UI 等 ,那 Flutter 上是否也有这样的支撑?

答案肯定是有的,可是在介绍它们之前,咱们先聊一个 Flutter UI 的问题:嵌套

为了不太水,咱们前语聊技术,后半部分引荐项目。

前语- UI 嵌套

谈到 Flutter 肯定就有人说嵌套,是的, Flutter 本身便是经过直接嵌套 Widget 来烘托 UI , 所以我们或许就会吐槽相似下面的代码,尽管这段代码没有意义,可是这儿咱们要先思考两个问题:

  • Flutter 怕不怕 Widget 嵌套影响性能
  • Flutter 有没有方法处理嵌套

Flutter 工程化框架选择 — 搞定 UI 生产力

首先第一点便是,Flutter 一般状况下不怕嵌套影响性能,由于 “众所周知” 的原因,Flutter 里的 Widget 并不是真实的控件,我更乐意说 Widget 是装备文件,真实的制作和布局对象是它背后的 RenderObejct 等相关逻辑

嵌套层级看起来许多的原因,是由于 Widget 颗粒度太细。

当然这个还要看你嵌套的 Widget 做了什么?或许说是嵌套的 WidgetRenderObject 做了什么,例如:

  • PaddingRenderPadding 便是在 layout 时多了一个 SizechildParentData.offset 核算
  • ColoredBox_RenderColoredBox 便是多一句 drawRect
  • AlignRenderPositionedBox 便是多核算一个 childParentData.offset

所以这些 Widget 的颗粒度很细,可是也很轻,咱们直接用的时分或许会一层一层嵌套,看起来不美观,可是实践烘托时对性能影响不大。

当然,并不是所有的 Widget 都很轻不怕嵌套,例如 ClipTransformOpacity 等,假如涉及到 pushLayer 等操作时,在需求做图层合成的时分,那的确对性能影响仍是比较大的。

那第二个问题,怎么处理嵌套?这时分你就需求 “装备模版” ,经过封装来优化代码结构

“装备模版”是什么意思?举个比方 : Container 应该用过吧? Container 其实便是官方给我们预备的 “模版” ,它本身只是一个 StatelessWidget ,也便是一个没有 RenderObjectWidget ,它靠的便是把各种功用的 Widget 组合起来运用,如下图便是运用 Container 的对比状况。

Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

所以在运用 Flutter 构建 UI 时,就能够谈及到两个点:

  • Widget 是装备文件,它一般很轻,不怕嵌套,真实制作烘托的是它背后的 RenderObject
  • 经过各种 UI 装备模版来处理嵌套,特别是抽象出合适自己业务逻辑的 UI 模版

举个比方,如下方的第三方开源布局包 dashboard ,在这种杂乱的 UI 布局上难道就靠直接一级一级嵌套 ColumnRow 来处理?答案肯定不是!

Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

dashboard 的是经过 Stack + Positioned 组成模版,在手势移动时核算,经过 AnimatedBuilder 完成动画偏移,主动核算控件方位。

其实也能够直接用 AnimatedPositioned ,详细可见 《Flutter 小技巧之风趣的动画技巧》

所以能够看到, Flutter 里你其实能够不那么嵌套,详细仍是看你的封装方法,除了这样,还有便是直接在 RenderObject 上进行自定义布局,比方下方这两个比方:

cloud custom_multi_render
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

你说上面的布局用 Stack + Positioned 的模式能不能做?肯定是能够,可是在 RenderObject 层完成不是更高雅吗?把脏活累活写在 RenderObject , 经过 Widget 供给装备接口,这样就不会一上来就向用户露 “底裤” 不是么

所以,把眼界打开,不要什么都盯着 Widget 嵌套,往 RenderObject 层面探究,你会发现 Flutter 其实不像外表那么浮躁,再不济来尝试下 CustomMultiChildLayout ,它也能够帮助你处理一些杂乱布局下的嵌套问题。

当然,还有一些项目另辟蹊径,比方 niku ,这个项目经过 typedef 和抽象拓展,利用语法对官方控件进行二次封装,完成创立了一个 “非正路” 的 UI 装备作用,详细如下图所示,喜不喜爱就看个人爱好了,可是它的确必定程度处理了嵌套可视化的问题。

Flutter 工程化框架选择 — 搞定 UI 生产力

作者是个二次元,可是看地址他应该是泰国哥们

当然,咱们这一期的关键是进步 UI 生产力,单说源码完成就没劲了,所以重点让咱们看后半部分。

UI 套件

在前端范畴,运用一致的 UI 套件能够加速开发的节奏,削减开发和规划之间的摩擦,而且风格一致。一般状况下,在企业内部都是在不知不觉中沉淀下来各种组件,最终构成组件池,从而落地成 UI 套件。

比方贝壳的 bruno ,我乐意称它为 Flutter 界的 Element-UI ,目前已经支撑到 Flutter 3 ,作为少有国内大厂保护的 Flutter UI 项目,乃至它还供给了 sketch 规划指引 和 规划物料下载 。

bruno getwidget fsuper
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

当然,除了 bruno 之后,像 getwidget 、 fsuper 也供给了日常开发中常用的 UI 套件,尽管风格风格上或许并没有 bruno 一致,可是仍是能够在必定程度进步开发的生产力。

事实上关于个人开发者来说,这种套件能够处理许多规划上的问题。

另外聊到 Flutter UI 套件就要必定要介绍国内的 fluttercandies 组织,fluttercandies 是由大佬们共同保护的一系列 Flutter 开源项目,记住,是大佬们,而且一直在继续更新:

  • extended_image
  • extended_nested_scroll_view
  • extended_text
  • extended_text_field
  • extended_list
  • extended_sliver
  • extended_tabs
  • wechat_assets_picker
  • waterfall_flow

举个比方,假如 flutter framework 短期不能处理的问题,那就大佬就会 cv 一份控件自己保护,这便是 fluttercandies 的节奏和优势。

PC

既然介绍 Flutter UI ,就不得不介绍 PC 相关的风格的 UI ,由于 Flutter 不只是 Android 和 iOS ,它还支撑 Web 和 PC, 所以相似 PC 的 UI 风格也值得引荐,比方 ant_design_flutter 便是一个很有意思的项目

fluent_ui macos_ui ant_design_flutter
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

Responsive

那有的人或许就说,我想要一套代码适配多渠道的屏幕尺度行不行?答案肯定是能够的,下面这几个 package 就供给了不同屏幕尺度下一套代码的动态适配计划,我个人或许会比较喜爱 ResponsiveFramework 。

ResponsiveFramework responsive_sizer flutter_adaptive_ui
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

Appbar

这类 Appbar 的完成其实是我被问过最多的,其实它的中心完成都是 Sliver ,严格意义上我觉得并不需求第三方库,自己用 Sliver 就能够完成,可是本着能不着手就不着手准则,也引荐几个库吧:

draggable_home extended_sliver scroll_app_bar
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

gsy_flutter_demo 里也供给了几种完成思路,其实并不杂乱。

Drawer

或许有人会觉得,不会吧不会吧, Drawer 也需求第三方库?

还真有,由于有时分或许需求不一样的动画作用,另外这儿的 sidebarx ,也和官方供给的 NavigationRail有异曲同工之妙,能在 UI 上适配多渠道的操作习气。

sidebarx flutter_advanced_drawer curved_drawer
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

Tarbar

既然都说到 Drawer ,那 Tabbar 也供给几个花里胡哨的动画作用,首要是切换时的动画作用,另外 tab_container 或许算是比较有意思的库,用的 Path 来编绘布景动画作用。

flutter-cupertino-tabbar tab_indicator_styler tab_container
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

BottomBar

说到 Tabbar 相对应的还有 BottomBar 相关,这儿也供给几个库,首要是动画作用很风趣,我个人仍是挺喜爱这种曲线的动画作用。

curved_navigation_bar salomon_bottom_bar bubble_bottom_bar
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

指引

发动指引这个需求,正常状况下一个 PageView 就能够满足产品经理的场景,可是有时分或许会需求你来“亿”点点动画作用来添加 KPI,所示拿着或许就对你有用了,当然你也能够把它当作 PageView 动画来运用。

concentric_transition nice_intro intro_views_flutter
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

角标

这个应该无需多言了,基本上 App 都会需求用到,这两个库基本覆盖了 90% 的场景

flutter_badges corner_decoration
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

动画按键

这个或许一般状况下我们都不需求这么花里胡哨的作用,可是万一呢?Material 风格上这种交互仍是挺多的,不过国内对 Material 的确不是很感冒。

flutter_animated_button progress_state_button
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

头像

没想到吧?头像为什么还需求库?

其实便是下面的这个场景,相信这个场景或许我们都不会生疏,有社交需求的时分,经常会存在这样的 UI ,沸点不也有相似 UI 么?

avatar_stack overflow_view
Flutter 工程化框架选择 — 搞定 UI 生产力

swipe 卡片

这个需求或许一般人不会需求,引荐它是由于我还记得几年的时分,收了 1000 给人做了这样的一个外包,便是做一个这样的控件。

swipe_deck swipeable_card_stack appinio_swiper
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

bottom sheet

这其实更多是一个 Route 相关的动画作用,感觉好像国内也不常用到,可是之前的确有好几次咨询有没有相似的完成。

we_slide sliding_up_panel
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

时间轴 UI

这是我在群里被问过好屡次的一个需求场景,我也不知道为什么那么多使用会需求用到这样的 UI ?不过这类需求自己从头完成的确会比较费事。

timeline_tile timelines
Flutter 工程化框架选择 — 搞定 UI 生产力
Flutter 工程化框架选择 — 搞定 UI 生产力

好了,关于 Flutter UI 相关的内容引荐就到这儿,本篇首要仍是供给给我们怎么了解 Flutter 的 UI 布局,而且尽或许去处理嵌套,同时供给一些有意思的第三方 package ,进一步进步我们开发 UI 的生产力

最终,假如你还有什么关于 Flutter 工程或许结构的疑问,欢迎留言评论,或许新的资料又有了~