一个 Swift 版本的 Flexbox Layout 工具

安装

Swift Package Manager

https://github.com/DingSoung/FlexLayout master

使用

构造树

let layout1 = FlexLayout()
layout1....
let layout2 = FlexLayout()
layout1....
let layout3 = FlexLayout()
layout1.set(children: [layout2, layout3])

计算

_ = layout1.calculateLayout()
print(layout1.frame, layout2.frame, layout3.frame)

赋值方式

方式 1: 直接赋值

• 数值，枚举，结构

let layout = FlexLayout()
layout.width = .Value(value: 80, unit: .percent)
layout.height = 300
layout.alignItems = .flexStart

• 支持字符串复制

let layout = FlexLayout()
layout.height = "300"
layout.alignItems = "flex-start"
layout.width = "80%"

• 支持百分数

let layout = FlexLayout()
layout.width = 80%

方式 2: 动态赋值

• CSS 字典

let layout = FlexLayout()
layout.set(layout: [
		"aspect-ratio": "1",
		"width": "50%",
		"margin": "8"
     ]
)

• CSS 字符串

let layout = FlexLayout()
layout.set(layout: "aspect-ratio: 1; width: 50%; margin: 8")

方式 3: 链式调用

let layout = FlexLayout()
	.margin(8)
	.flexShrink(1)
	.width(100%)
	.height(.auto)

特征

• 纯 Swift & C/C++

• 基于 Yoga， 性能远超 AutoLayout

  参考 ayoutFrameworkBenchmark

• Fondation, 依赖极少

#import FlexLayout

• 使用简便

let view = UIVIew()
view.layout.width(100).height(200)

let label = UILabel()
label.width(80%).top(10)

view.addSubView(label)
view.layout.setChildren(label.layout)

_ = view.layout.calculateLayout()
view.recursiveSyncFrame()

• 支持异步线程

DispatchQueue.global.async {
	let layout = FlexLayout()
  layout...
	 _ = layout.calculateLayout()
	 DispatchQueue.main.async {
	 		view.frame = layout.frame
	 }
}

• 绝对控制

view.frame = ...

let layout = FlexLayout()
layout...
_ = layout.calculateLayout()
view.frame = layout.frame

layout.width = 100%
_ = layout.intrinsicSize
UIView.animation {
	view.frame = layout.frame
}