布局 (Layouts)
布局概览 (Layouts Overview)
布局 (Layouts) 让你能够在 Rive 中构建响应式 UI 组件。你可以根据可用空间让设计适应 (Fit)、填充 (Fill) 或重排 (Reflow) 内容。
为什么使用布局？
传统的固定尺寸设计在不同屏幕或容器大小下可能会出现问题。通过布局，你可以创建：
- 能够自适应窗口大小的响应式界面。
- 当内容变化时（如文本长度改变）自动调整的组件。
- 类似 Web 开发中 Flexbox 的流式排版效果。
布局类型
布局容器有几种类型，主要决定了子元素的排列方向：
- Row (行)：子元素水平排列。
- Column (列)：子元素垂直排列。
- Stack (堆叠)：子元素在同一位置叠加（类似绝对定位）。
快速开始
- 选中你想要放入布局的对象。
- 在检查器 (Inspector) 中点击 Layout 按钮，将其转换为布局容器。
- 调整布局属性，如方向 (Direction)、间距 (Gap)、对齐 (Alignment) 等。
布局可以嵌套（布局内含布局），以创建复杂的响应式结构。
核心概念
- Fit 内容 (Hug)：布局容器的尺寸收缩以包裹其子元素。
- Fill 空间：子元素扩展以填满布局容器的可用空间。
- Reflow 重排：当容器尺寸改变时，子元素自动重新定位。
高级特性
布局还支持：
- N轴切片 (N-Slicing)：让位图或矢量设计可伸缩而不失真。
- 滚动 (Scrolling)：为溢出内容提供触摸滚动功能。
- 布局动画 (Animation)：定义内容重排时的过渡插值。