📘 第1篇：初识 Yoga —— 布局的利器

谁的奶瓶子2025-06-12 10:15

一、Yoga 是什么？

Yoga 是 Facebook 开源的跨平台 Flexbox 布局引擎，灵感来自于 Web 的 CSS Flexbox。它被用于 React Native、ComponentKit 等项目中，用于构建灵活响应式的 UI。

二、为什么要用 Yoga？

跨平台（支持 iOS、Android、Windows 等）
布局逻辑清晰（遵循 Flexbox）
性能优越（C++ 实现，OC 有封装）
易集成，易学习

三、如何集成（iOS/Objective-C）？

使用 CocoaPods 安装：

ruby 复制代码

pod 'yoga', :subspecs => ['Yoga']

导入头文件：

objc 复制代码

#import "UIView+Yoga.h"

启用布局：

objc 复制代码

view.yoga.isEnabled = YES;

四、基本使用示例

objc 复制代码

UIView *container = [[UIView alloc] init];

container.yoga.isEnabled = YES;

container.yoga.flexDirection = YGFlexDirectionRow;

container.yoga.justifyContent = YGJustifySpaceBetween;


UIView *leftView = [[UIView alloc] init];

leftView.yoga.isEnabled = YES;

leftView.yoga.width = YGPointValue(100);

leftView.yoga.height = YGPointValue(50);



UIView *rightView = [[UIView alloc] init];

rightView.yoga.isEnabled = YES;

rightView.yoga.width = YGPointValue(100);

rightView.yoga.height = YGPointValue(50);



[container addSubview:leftView];

[container addSubview:rightView];

[container.yoga applyLayoutPreservingOrigin:YES];

五、常用属性简析

属性	含义
`flexDirection`	主轴方向（行/列）
`justifyContent`	主轴对齐方式
`alignItems`	交叉轴对齐方式
`width` / `height`	宽高
`margin` / `padding`	外边距 / 内边距