yoga 在排版中的具体作用是什么呢？举个简单的例子，就拿 soluna/test/layout.lua 来举例:
我们创建如下一个 hud 排版, 它是一个简单的左右结构。其中左边我们定义了宽度为 400, 右边则是填满剩下的宽度。两者都填充满高度。另外右边是上下结构，其中第一个 node 占了70%的宽度，第二个占了30%的宽度。

local hud = [[
id : screen
padding : 10
direction : row
gap : 10
left :
 width : 400
 background : 0x40000000
right :
 flex : 1
 gap : 10
 node :
  flex : 0.7
  background : 0x40ffffff
 node :
  flex : 0.3
  background : 0x40ffffff
]]

此时单单使用这个 hud 我们还做不了什么。
紧接着我们在脚本入参中，可以获得启动时窗口的宽高, 我们可以将其设置到 screen 上:

local dom = layout.load(datalist.parse_list(hud))
local screen = dom.screen

local function calc_hub()
 screen.width = args.width
 screen.height = args.height
 return layout.calc(dom)
end

上面这段代码做了三件事: 加载布局到 yoga 中, 然后为 screen 设置宽高, 接着调用 calc 计算布局。
最后，假设宽是800,高是600,那么 yoga 会根据 left 的宽，计算出 right 的宽度为 400, 两者的高度都是 600; 而在 right 中第一个 node 的高 420, 第二个则是 180.
最后我们将计算结果使用 matquad 材质构建出实体:

local function draw_hud()
 for _, obj in ipairs(draw_list) do
  args.batch:add(matquad.quad(obj.w, obj.h, obj.background), obj.x, obj.y)
 end
end

并使用 batch:add 提交绘制命令，告诉框架，我要创建一个四边形(quad), 它宽w高h, 使用背景色 background, 绘制时的坐标是 x 和 y。
最后在 frame 中调用该函数，也就是每一帧都绘制。
当窗口发生变化时，我们又更新宽高，然后重新计算 node 布局信息，这样就可以在下一帧及时更新整体布局。