📘 第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 外边距 / 内边距

相关推荐
要加油哦~几秒前
前端笔试题 | 整理&总结 ing | 跨域 + fetch + credentials(携带cookie)
前端
旺财是只喵3 分钟前
vue项目里使用3D模型
前端·vue.js
golang学习记6 分钟前
从0死磕全栈之使用 Next.js 构建高性能单页应用(SPA)
前端
好奇的候选人面向对象7 分钟前
基于 Element Plus 的 TableColumnGroup 组件使用说明
开发语言·前端·javascript
小纯洁w8 分钟前
vue3.0 使用el-tree节点添加自定义图标造成加载缓慢的多种解决办法
前端·javascript·vue.js
叫我詹躲躲8 分钟前
Vue 3 ref 与 reactive 选哪个?
前端·vue.js
程序员Sunday9 分钟前
Vite 要收费啦?虚拟 DOM 要取消啦?尤雨溪这次玩了把大的!
前端·vue.js
云枫晖14 分钟前
webpack系列-plugin
前端·webpack
啃火龙果的兔子21 分钟前
前端八股文es6篇
前端·ecmascript·es6
困惑阿三21 分钟前
ES6冷门API
前端·ecmascript·es6