盒子
盒子
文章目录
  1. 为什么会有这篇文章
  2. 布局发展史
  3. 布局的核心
  4. 设计软件布局方式
  5. Layout In Swift UI and Flutter
  6. Flexbox 布局的缺点
  7. 我理想中的布局方式 (方案设计)
  8. Fower Layout

一个开发者优先(developer-first)的布局引擎

为什么会有这篇文章

两周前,我发布了我的一个前端开源项目,名字为:Fower。很多用户问我,Fower 和 Tailwindcss 有什么不同,我的回答是 Fower 在 utilty-first 这一点,理念是和 Tailwindcss 一致的,实际上 utilty-first 理念的 CSS 框架很早就有,比如:ACSSTachyons

其中,Fower 和 Tailwindcss 最大的不同点之一,就是 Fower 提供了非常易用的布局工具: Fower Layout toolkit,这样是写这篇文章的缘由。下面会详细分享开发 Fower layout 的初衷和其设计思路。

布局发展史

Fower Layout 要解决的问题就是布局问题,让我们简单回顾一下 Web 布局的发展史。在 Web 布局整个演进过程当中,经历了没有任何布局、表格布局、定位布局、浮动布局、Flexbox 布局、Grid 布局。

这里不细说每种布局的特点和优缺点,我只说我的观点和结论:在当前阶段,从功能性、易用性、浏览器兼容性等方面考虑,使用 Flexbox 布局是最好的选择。当然有兴趣的同学可以阅读下面的资料。

布局的核心

我认为,布局的核心是处理容器和元素 (container and item)在某一方向 (x,y)的空间关系。这里有几个关键要素:容器、元素、方向、空间关系。实际上,这也是 flexbox 布局核心的东西,flexbox 布局几乎所有概念和用法都是围绕这四个要素展开的。我们在拿到一个设计稿时,如果能快速地识别出其中的容器、元素,并且理清他们的空间关系,便能很快速地去实现它。

设计软件布局方式


Figma 和 Sketch 是两款非常出名的设计软件,我们可以看到,在元素空间关系的处理上,它们一致使用非常形象的指令: align to top、align to right、align to bottom、align to left、align base on space. 这也是最符合人直觉的方式。

Layout In Swift UI and Flutter

接下来我们看看两个现代化的 UI 解决方案:Swift UI 和 Flutter,它们是怎么处理 UI 布局的。

在 Swift UI,我们可以看到 HStack、VStack、aligment、space 等关键字,我们发现 Swift UI 也是围绕 容器、元素、方向、空间关系四个要素展开的:

struct ContentView: View {
var body: some View {
HStack(alignment: .top) {
VStack {
CalendarView()
Spacer()
}
VStack(alignment: .leading) {
Text("Event title").font(.title)
Text("Location")
}
Spacer()
}.padding()
}
}

在 Flutter 中,我们可以看到 Row、Column、aligment、space 等关键字,我们发现 Flutter 也是围绕 容器、元素、方向、空间关系四个要素展开的:

Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'),
],
);

Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'),
],
);

我们发现,Swift UI 和 Flutter 的布局理念和 Flexbox 布局极其类似,另外,我们发现它们的布局代码是直接依附在容器和元素中的,不像传统的 Web,需要补样式代码单独分离到一个 CSS 文件中。Fower 同样这样的理念,样式就是应该容器和元素的一部分。

Some references:

Flexbox 布局的缺点

上面说了设计软件和现代化 UI 框架的布局方式,他们和 Flexbox 布局的理念非常类似,那 Flexbox 布局有什么缺点呢?Flexbox 非常优秀,但对于我来说它有一个最大的缺点就是易用性不够好。它有很多概念:主轴、交叉轴、方向、align-item、justify-content、flex-start、flex-end、flex-center 等。最大问题是,主轴的方向发生改变时,align-items, justify-content 的 UI 表现非常不符合人的直觉。特别是对于我这个不是永远都是在写 UI 的人 (我经常需要去写后端、打杂等),每隔一段时间,就很可能忘记align-items, justify-content的用法。

我理想中的布局方式 (方案设计)

上面聊了 Flexbox layout 的缺点:易用性不够好。我理想中布局方式的使用,应该像现代设计软件一样好用,我们只需关注布局四要素容器、元素、方向、空间关系,用法就是找到容器和元素,设置容器内元素的方向,然后设置空间关系。这里核心是如何表达空间关系,我觉得最符合人直觉的表达方式就是设计软件的方案。我把这种表达方式抽象为:toCenter, toCenterX, toCenterY, toTop, toRight, toBottom, toLeft, toBetween, toAround, toEvenly.

  • toCenter, make children elements align to center, see Online Demo
  • toCenterX, make children elements align to center horizontal, see Online Demo
  • toCenterY, make children elements align to center vertical, see Online Demo
  • toTop, make children elements align to left, see Online Demo
  • toRight, make children elements align to right, see Online Demo
  • toBottom, make children elements align to bottom, see Online Demo
  • toLeft, make children elements align to left, see Online Demo
  • toBetween, make children elements space between, see Online Demo
  • toEvenly, make children elements space evenly, see Online Demo
  • toAround, make children elements space around, see Online Demo

不管你的容器是水平方向 (row) 还是垂直方向 (column),toRight、toBottom 这些空间关系表达,都会符合你视觉习惯。

这种抽象的表达方式为什么更好呢?我觉的有几点好处:

  • 更符合人的直觉,你只需记住按照方向处理空间关系,比如:toRight、toBotom 等,没有什么比这更符合人的直觉,另外的好处的是你的记忆负担会变得非常小
  • 更少地代码,这种方式会让你代码更少,可维护性更强,开发效率更高

我理想中的代码编写方式(伪代码):

1.下面代码会自动把容器内的元素水平和垂直居中,容器默认是 row, 所以可以省去:

<Container toCenter>
<ItemA />
</Container>

效果如下:

2.下面代码会把 A,B,C 三个个元素在容器内靠右对齐, 容器默认是 row, 所以可以省去:

<Container toRight>
<ItemA />
<ItemB />
<ItemC />
</Container>

效果如下:

3.下面代码会把 A,B 两个元素在容器内靠右对齐, 我们声明了 column, 所以元素是竖着排列的:

<Container column toRight>
<ItemA />
<ItemB />
</Container>

效果如下:

  1. 使用组合:
<Container toBetween toCenterY>
<ItemA />
<ItemB />
<ItemC />
</Container>

效果如下:

这里只举这四个伪代码例子,实际上你可以使用 “toLeft”, “toRight” 等这些指令实现大部分 UI 布局。

上面,我们抽象了空间关系的表达方式,并把指令作用于容器上。下面我们来看一个布局效果,你会怎么实现它:

下面说说我理想中的方案,伪代码如下:

<Container toBetween toCenterY>
<ItemA />
<ItemB selfBottom />
<ItemC />
</Container>

这里我们抽象出另外一类指令:selfTop, selfRight, selfBottom, selfLeft, selfStretch. 这些指令可以作用在元素上,单独控制元素的定位对齐方式。

所以我们有一些作用于元素的指令:

  • selfTop, make elements seft align to top
  • selfRight, make elements seft align to right
  • selfBottom, make elements seft align to bottom
  • selfLeft, make elements seft align to left
  • selfStretch, make elements seft to Stretch

最后,总结一下我们布局工具设计方案:

  • 【容器】方向控制指令,使用 row, column, 如果未声明,默认为 row
  • 【容器】内元素对齐方式指令: toCenter, toCenterX, toCenterY, toTop, toRight, toBottom, toLeft, toBetween, toAround, toEvenly,使用这些指令控制子元素对齐方式,并且和 row, column 方向无关
  • 【元素】自身对齐方式指令:selfTop, selfRight, selfBottom, selfLeft, selfStretch. 这些指令单独控制元素自身对齐方式
  • 使用任何【容器】指令,会自动触发 flexbox 布局,无需手动设置 display: flex;

上面 4 条规则设计,就是我个人理想中的布局方式。

Fower Layout

回到我们的标题:一个开发者优先(developer-first)的布局引擎。 实际上,Fower Layout 不能称之为布局引擎,那是什么? 也许我们称其为 Layout toolkit 会更合适。

Fower Layout 的最大特点是 developer-first,它易于使用并且符合人们的直觉。

实际上,即使你不使用 Fower Layout, 你也可以使用上面提到的设计思想去实现一套好用的布局工具,而不是使用原始的 Flex Layout。

关于 Fower Layout 更详细的信息,可以看看官方文档的介绍:Fower Layout Introduction

支持一下
扫一扫,支持forsigner
  • 微信扫一扫
  • 支付宝扫一扫