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

    • 介绍
  • 快速开始

    • 快速开始
  • 工作区

    • 工作区
  • 编辑器

    • 概览
    • 工具栏
    • 导航器
    • 检查器
    • 状态栏
    • 设置
    • 画布
    • 预览
  • 主题

    • 图片
    • 字体
    • 布局
    • 动态 LVGL 版本
    • 覆盖屏幕尺寸
    • 代码生成
    • 移植

布局控制容器组件的子项如何排列。本指南介绍 anyui-LIVE 中可用的布局选项,以及它们在生成的 LVGL 输出中的表现。

概述

任何组件都可以作为布局容器。当容器使用布局时,其子项会按照布局规则自动放置,而不是固定在某个位置。anyui-LIVE 会在画布上实时渲染布局,因此改动立即可见,并会在预览与生成的代码中体现。

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

模式

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

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

弹性流向

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

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

对齐

弹性容器提供三种对齐选项:

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

间距

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

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

相关指南

  • 图片 - 为组件分配位图资源。
  • 字体 - 排版与文本布局。
  • 概览 - 在画布上设计界面。
  • 预览 - 在实时模拟中验证布局。
  • 代码生成 - 布局如何成为生成的 LVGL 代码。
  • 覆盖屏幕尺寸 - 在运行时更改显示分辨率。
Prev
字体
Next
动态 LVGL 版本