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

相关推荐
你挚爱的强哥13 分钟前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球13 分钟前
css新特性
前端·css
Nicholas6815 分钟前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端
无羡仙25 分钟前
React 状态更新:如何避免为嵌套数据写一长串 ...?
前端·react.js
TimelessHaze1 小时前
🔥 一文掌握 JavaScript 数组方法(2025 全面指南):分类解析 × 业务场景 × 易错点
前端·javascript·trae
jvxiao1 小时前
搭建个人博客系列--(4) 利用Github Actions自动构建博客
前端
袁煦丞2 小时前
SimpleMindMap私有部署团队脑力风暴:cpolar内网穿透实验室第401个成功挑战
前端·程序员·远程工作
li理2 小时前
鸿蒙 Next 布局开发实战:6 大核心布局组件全解析
前端
EndingCoder2 小时前
React 19 与 Next.js:利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
li理2 小时前
鸿蒙 Next 布局大师课:从像素级控制到多端适配的实战指南
前端