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

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

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

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

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

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

前语- UI 嵌套

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

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

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

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

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

当然这个还要看你嵌套的 Widget 做了什么？或许说是嵌套的 Widget 的 RenderObject 做了什么，例如：

  • Padding 的 RenderPadding 便是在 layout 时多了一个 Size 和 childParentData.offset 核算
  • ColoredBox 的 _RenderColoredBox 便是多一句 drawRect
  • Align 的 RenderPositionedBox 便是多核算一个 childParentData.offset

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

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

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

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

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

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

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

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

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 工程或许结构的疑问，欢迎留言评论，或许新的资料又有了～