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

相关推荐
我叫黑大帅1 分钟前
从刷不到底的朋友圈说起:手把手教你搞懂 "下拉加载更多"
前端·javascript
前端服务区2 分钟前
Map与WeakMap
前端·javascript
用户3802258598243 分钟前
vue3源码解析:编译之编译器代码生成过程
前端·vue.js·源码阅读
Mintopia3 分钟前
🤖 接入 AI 服务之「OpenAI 篇」——一场与神经网络谈心的仪式
前端·javascript·aigc
晴殇i5 分钟前
前端视角下的单点登录(SSO)从原理到实战
前端·面试·trae
圆心角8 分钟前
深入解析协商缓存(弱缓存)
前端·浏览器
用户151865304138412 分钟前
从传统办公软件到云协作Flash Table AI分钟级生成表单,打造企业远程高效率办公的利器
前端·后端·前端框架
鹏北海17 分钟前
vue-route-query-hook:一个用于 Vue 3 的 Composable,提供响应式参数与 URL 查询参数之间的双向同步功能
前端·javascript·vue.js
VisuperviReborn28 分钟前
打造自己的前端监控---前端接口监控
前端·javascript·架构
程序员海军29 分钟前
这才是Coding该有的样子!重新定义编程显示器
前端·后端