阿里巴巴淘系技术团队官网博客
阿里巴巴淘系技术团队官网博客

拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了

拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了_第1张图片

作者|张翰(门柳)

出品|阿里巴巴新零售淘系技术部

我在之前一篇文章《打破重重阻碍，Flutter 和 Web 生态如何对接？》提到了这么一句话：“CSS 和 Widget 的对接也是很繁琐的过程，而且存在完备性问题”。我直接给了结论，没有给出原因。

现在填上这个坑，这篇文章专门对比 Flutter Widget 的布局原理和 CSS 布局原理的差异，分享在对接过程中会遇到的问题和解决方案，帮大家理一理思路，内容可以分为这几部分：

  • CSS 和 Widget 参赛选手介绍

  • Let's Battle! 从五个角度正面硬刚

  • Love & Peace 讨论取长补短的可行性

  • Happy Ending 最重要的环节

CSS

CSS 是 Cascading Style Sheets（层叠样式表）的简写，是一种用来描述样式的标记语言，最初的想法诞生自 1994 年，1996 年落成第一版规范（参考 20 Years of CSS）。HTML 描述了页面的结构，CSS 描述页面呈现出来的样子，这对 CP 已经配合工作了二三十年，依然是布局圈里最高效的组合。

拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了_第2张图片


▐  CSS is Awesome

拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了_第3张图片

CSS 描述布局很高效，这点无需质疑。后续出现的各种布局方案，前端框架 CSS in JS、XML描述文件、Flutter 等等，即使没有直接照搬 CSS 的功能，也深受 CSS 设计的影响。

CSS 很容易上手，经典的盒模型一学就会，文本相关的属性看名字就知道怎么回事，Flexbox 也是很好用的，但是 CSS 逐渐出现了一些很难驾驭的功能，多列布局就稍微难了一点，CSS Grid … 这代码也太难写了吧，我觉得这是给 AI 设计的，不是让人手写的，再加上 clip-path, filter, css houdini 等等，功能越来越强大，可以做滤镜、画皮卡丘、画油画、甚至还可以做游戏。功能很强大，但是不实用，上述这些功能在生产环境基本上都是用 JS 实现的，没时间去磨 CSS。

▐  渲染布局流程

浏览器里 CSS 的渲染过程，简化一下可以总结为 加载、解析、查询并作用到 DOM 节点、计算布局 这四个过程。浏览器首先加载 HTML 文件，遇到