📘 第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 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐18 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机30 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星31 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构33 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚33 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin35 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45336 分钟前
React项目(移动app)
前端
用户618482402195137 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队1 小时前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端