anyuianyui
anyui-LIVE
anyui
反馈问题
  • English
  • 中文
anyui-LIVE
anyui
反馈问题
  • English
  • 中文
  • 介绍

    • 介绍
  • 快速开始

    • 快速开始
  • 工作区

    • 工作区
  • 编辑器

    • 概览
    • 工具栏
    • 导航器
    • 检查器
    • 状态栏
    • 设置
    • 画布
    • 预览
    • 资源管理
    • 代码查看器
    • 历史
  • 智能体
  • 桌面版
  • 主题

    • 图片
    • 字体库
    • 布局
    • 符号
    • 全局样式
    • 动态 LVGL 版本
    • 动态显示尺寸变更
    • 重置屏幕尺寸
    • 代码生成
    • 移植
    • 模拟器
    • 国际化
  • 常见问题

布局决定容器组件的子组件如何排列。本指南介绍 anyui-LIVE 提供的布局选项,以及它们在生成的 LVGL 代码中的表现。

概述

任何组件都可以作为布局容器。容器启用布局后,子组件会按布局规则自动排列,而不再固定在某个位置。anyui-LIVE 在画布上实时渲染布局,改动立即可见,预览和生成的代码也会同步体现。

布局设置位于检查器的布局分组中。

模式

模式选项用于选择容器的布局方式:

  • 无 - 子组件手动摆放,不受布局规则影响。
  • 弹性 - 子组件由弹性容器排列。

弹性流向

弹性流向设置弹性容器的方向与换行策略,决定子组件按行、按列还是按对应的换行变体排列:

  • 行 / 行反向
  • 列 / 列反向
  • 行换行 / 行换行反向
  • 列换行 / 列换行反向

对齐

弹性容器有三种对齐选项:

  • 主轴对齐 - 沿主轴(弹性流向的方向)分布子组件:起始、居中、结束、均匀分布、环绕分布或两端分布。
  • 交叉轴对齐 - 沿交叉轴(垂直于流向)对齐子组件。
  • 轨道对齐 - 流向产生多行或多列时,对齐换行后的弹性轨道。

间距

  • 行间距 - 行与行之间的间隔。
  • 列间距 - 列与列之间的间隔。

间距为非负整数,单位为像素。

相关指南

  • 图片 - 为组件分配位图资源。
  • 字体库 - 排版与文本布局。
  • 概览 - 在画布上设计界面。
  • 预览 - 在实时模拟中验证布局。
  • 代码生成 - 布局如何进入生成的 LVGL 代码。
  • 重置屏幕尺寸 - 设计时重置屏幕的显示尺寸。
  • 动态显示尺寸变更 - 适配显示尺寸的变化。
Prev
字体库
Next
符号