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

一、Yoga 是什么?

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

二、为什么要用 Yoga?

  • 跨平台(支持 iOS、Android、Windows 等)

  • 布局逻辑清晰(遵循 Flexbox)

  • 性能优越(C++ 实现,OC 有封装)

  • 易集成,易学习

三、如何集成(iOS/Objective-C)?

  1. 使用 CocoaPods 安装:
ruby 复制代码
pod 'yoga', :subspecs => ['Yoga']
  1. 导入头文件:
objc 复制代码
#import "UIView+Yoga.h"
  1. 启用布局:
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 外边距 / 内边距

相关推荐
李鸿耀2 小时前
Flex 布局下文字省略不生效?原因其实很简单
前端
皮蛋瘦肉粥_1213 小时前
pink老师html5+css3day06
前端·css3·html5
华仔啊7 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel7 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴7 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel7 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫7 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin8 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学9 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室11 小时前
CSS高效开发三大方向
前端·css