[UI5 常用控件] 05.FlexBox, VBox,HBox,HorizontalLayout,VerticalLayout

发布时间：2026/7/7 15:43:08

[UI5 常用控件] 05.FlexBox, VBox,HBox,HorizontalLayout,VerticalLayout

文章目录

  • 前言
  • 1. FlexBox布局控件
    • 1.1 alignItems 对齐模式
    • 1.2 justifyContent 对齐模式
    • 1.3 Direction
    • 1.4 Sort
    • 1.5 Render Type
    • 1.6 嵌套使用
    • 1.7 组件等高显示
  • 2. HBox,VBox
  • 3. HorizontalLayout，VerticalLayout

前言

本章节记录常用控件FlexBox,VBox,HBox,HorizontalLayout,VerticalLayout。
其路径分别是：

  • sap.m.FlexBox
  • sap.m.VBox
  • sap.m.HBox
  • sap.ui.layout.HorizontalLayout
  • sap.ui.layout.VerticalLayout

1. FlexBox布局控件

FlexBox布局控件经常用在页面的布局。

1.1 alignItems 对齐模式

  • 常用的有Start，Center，End
    在这里插入图片描述
  • View
	<PanelheaderText="alignItems 对齐模式"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Start"><FlexBoxalignItems="Start"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="Center"><FlexBoxalignItems="Center"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="End"><FlexBoxalignItems="End"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel></HBox></Panel>

1.2 justifyContent 对齐模式

  • 常用的有Start,Center,End,SpaceAround,SpaceBetween
    在这里插入图片描述

  • View

	<PanelheaderText="justifyContent 对齐模式"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Start"><FlexBoxjustifyContent="Start"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="Center"><FlexBoxjustifyContent="Center"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="End"><FlexBoxjustifyContent="End"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="SpaceAround"><FlexBoxjustifyContent="SpaceAround"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="SpaceBetween"><FlexBoxjustifyContent="SpaceBetween"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel></HBox></Panel>

1.3 Direction

  • 常用的有Row,RowReverse,Column,ColumnReverse

在这里插入图片描述

  • View
	<PanelheaderText="Direction"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Row"><FlexBoxdirection="Row"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="RowReverse"><FlexBoxdirection="RowReverse"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="Column"><FlexBoxdirection="Column"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel><Panel headerText="ColumnReverse"><FlexBoxdirection="ColumnReverse"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></FlexBox></Panel></HBox></Panel>

1.4 Sort

  • 可以排序Box内的组件( layoutData->FlexItemData ）
    在这里插入图片描述
  • View
   <PanelheaderText="Sort"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Order in Row"><FlexBoxdirection="Row"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="2" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="3" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="1" /></layoutData></Button></FlexBox></Panel><Panel headerText="Order in Column"><FlexBoxdirection="Column"class="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="1" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData order="2" /></layoutData></Button></FlexBox></Panel></HBox></Panel>

1.5 Render Type

  • 常用的有Div,Bare,List
    在这里插入图片描述
  • View
  <PanelheaderText="Render Type"class="sapUiLargeMarginBottom"><HBox><Panel headerText="Div"><FlexBoxrenderType="Div"class="borderStyle"width="320px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="2" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="1" /></layoutData></Button></FlexBox></Panel><Panel headerText="Bare"><FlexBoxrenderType="Bare"class="borderStyle"width="320px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="2" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="1" /></layoutData></Button></FlexBox></Panel><Panel headerText="List"><FlexBoxrenderType="List"class="borderStyle"width="320px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="3" /></layoutData></Button><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="2" /></layoutData></Button><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"><layoutData><FlexItemData growFactor="1" /></layoutData></Button></FlexBox></Panel></HBox></Panel>

1.6 嵌套使用

在这里插入图片描述

  • View
  <PanelheaderText="FlexItemData growFactor"class="sapUiLargeMarginBottom"><HBoxfitContainer="true"alignItems="Stretch"class="sapUiSmallMargin nestedFlexboxes"><core:HTML content="&lt;h2&gt;1&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="2"styleClass="item1"/></core:layoutData></core:HTML><core:HTML content="&lt;h2&gt;2&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="3"styleClass="item2"/></core:layoutData></core:HTML><VBox fitContainer="true"><layoutData><FlexItemData growFactor="7" /></layoutData><core:HTML content="&lt;h2&gt;3&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="5"styleClass="item3"/></core:layoutData></core:HTML><HBoxfitContainer="true"alignItems="Stretch"><layoutData><FlexItemData growFactor="3" /></layoutData><core:HTML content="&lt;h2&gt;4&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="1"styleClass="item4"/></core:layoutData></core:HTML><core:HTML content="&lt;h2&gt;5&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="1"styleClass="item5"/></core:layoutData></core:HTML></HBox></VBox><core:HTML content="&lt;h2&gt;6&lt;/h2&gt;"><core:layoutData><FlexItemDatagrowFactor="5"styleClass="item6"/></core:layoutData></core:HTML></HBox></Panel>

1.7 组件等高显示

在这里插入图片描述

  • View
  <PanelheaderText="组件等高"class="sapUiLargeMarginBottom"><HBox class="sapUiLargeMarginBottom customPanel"><FlexBox><Texttext="Although they have different amounts of text, both columns are of equal height."><layoutData><FlexItemDatagrowFactor="1"baseSize="0"backgroundDesign="Solid"styleClass="sapUiTinyMargin"/></layoutData></Text><Texttext="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo hey nonny no duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."><layoutData><FlexItemDatagrowFactor="2"baseSize="0"backgroundDesign="Solid"styleClass="sapUiTinyMargin"/></layoutData></Text></FlexBox></HBox></Panel>

2. HBox,VBox

HBox,VBox是FlexBox的子类，可以直接使用并实现横向布局和竖向布局
在这里插入图片描述

  • View
   <PanelheaderText="HBox  VBox"class="sapUiLargeMarginBottom"><HBox><Panel headerText="HBox"><HBoxclass="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></HBox></Panel><Panel headerText="VBox"><VBoxclass="borderStyle"width="220px"height="100px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></VBox></Panel></HBox></Panel>

3. HorizontalLayout，VerticalLayout

这两个组件类似与HBox和VBox，主要区别是HorizontalLayout无法设置宽高属性，VerticalLayout无法设置高属性

在这里插入图片描述

  • View
	<PanelheaderText="HorizontalLayout,VerticalLayout"class="sapUiLargeMarginBottom"><HBox><Panel headerText="HorizontalLayout"><l:HorizontalLayoutclass="borderStyle"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></l:HorizontalLayout></Panel><Panel headerText="VerticalLayout"><l:VerticalLayoutclass="borderStyle"width="220px"><Buttontext="1"type="Emphasized"class="sapUiTinyMarginEnd"/><Buttontext="2"type="Reject"class="sapUiTinyMarginEnd"/><Buttontext="3"type="Accept"class="sapUiTinyMarginEnd"/></l:VerticalLayout></Panel></HBox></Panel>

相关新闻

HTTP MIME 类型

HTTP MIME 类型

MIME - Multipurpose Internet Mail Extension, 多用途因特网邮件扩展&#xff0c;起初是为了解决不同的电子邮件系统之间搬移报文时存在的问题。MIME 在电子邮件系统中工作得非常好&#xff0c;因此 HTTP 也采纳了它&#xff0c;用它来描述并标记多媒体内容。 MIME 类…

2026/7/3 19:50:24
C的文件操作

C的文件操作

1.栈区上的空间运行效率很高 堆区分配的空间一般由程序员主动释放 静态区的话程序运行结束后由系统释放 2.根据数据的组织形式&#xff0c;数据文件被称为文本文件或者二进制文件 数据在内存中以二进制的形式存储&#xff0c;如果不加转换的输出到外存的文件中&#xff0c;…

2026/7/6 14:44:30
Compose | UI组件(十三) | Navigation - 页面导航

Compose | UI组件(十三) | Navigation - 页面导航

文章目录 前言Navaigation 的核心概念和组件的更详细说明真实案例带你一步一步了解 Navaigation第一步&#xff0c;新建多个页面第二步&#xff0c;新建一个Activity第三步&#xff0c;新建一个Screen类&#xff0c;用于统一管理导航的常量第四步&#xff0c;新建一个Graph 统一…

2026/7/6 2:26:44

最新新闻

PIC32微控制器驱动蜂鸣器实现声音反馈方案

PIC32微控制器驱动蜂鸣器实现声音反馈方案

1. 项目概述&#xff1a;为DIY项目添加互动声音的硬件方案在创客和嵌入式开发领域&#xff0c;为项目添加声音反馈一直是个有趣且实用的需求。无论是简单的按键提示音、报警信号&#xff0c;还是复杂的交互音效&#xff0c;合适的声音元素能显著提升用户体验。这个方案采用PIC3…

2026/7/7 15:43:04
IIM-20670运动传感器与MKV46F256VLH16微控制器的工业应用解析

IIM-20670运动传感器与MKV46F256VLH16微控制器的工业应用解析

1. IIM-20670运动传感器深度解析IIM-20670是TDK InvenSense推出的一款6轴工业级运动跟踪MEMS器件&#xff0c;集成了3轴陀螺仪和3轴加速度计。这款传感器在运动跟踪领域具有显著优势&#xff0c;其陀螺仪量程范围从41dps到1966dps可调&#xff0c;加速度计量程可达16g。1.1 核心…

2026/7/7 15:43:04
计算机毕业设计之基于SSM的网上家居商城系统的设计与实现

计算机毕业设计之基于SSM的网上家居商城系统的设计与实现

随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样。尤其在人们生活节奏不断加快的当下&#xff0c;人们更趋向于足不出户解决各种问题&#xff0c;网上家居商城系统展现了其蓬勃生命力和广阔的前景。与此同时&#xff0c;为解决用户…

2026/7/7 15:43:04
参考文献找不到原文？标题、DOI、谷歌学术三步反查英文文献

参考文献找不到原文？标题、DOI、谷歌学术三步反查英文文献

写论文时&#xff0c;经常会遇到一种情况&#xff1a;手里只有一条参考文献&#xff0c;想找到原文、DOI、摘要、引用格式&#xff0c;结果在不同网站来回搜还是找不到。这里整理一个比较实用的文献反查流程。 一、先判断你手里的参考文献属于哪种情况 常见有三种&#xff1a;…

2026/7/7 15:43:04
2026实测：抖音在线解析去水印操作方法，正规渠道与风险提醒

2026实测：抖音在线解析去水印操作方法，正规渠道与风险提醒

在日常浏览抖音的过程中&#xff0c;很多用户会有保存优质视频、素材备份的需求&#xff0c;但平台默认保存的视频都会带有专属水印&#xff0c;影响素材整理与个人收藏使用。2026年当下&#xff0c;抖音未开放普通用户无限制无水印保存全网视频的权限&#xff0c;想要获取干净…

2026/7/7 15:43:04
kneed 0.8.0 实战：4种曲线类型（凹凸/增减）拐点检测与S参数调优

kneed 0.8.0 实战：4种曲线类型（凹凸/增减）拐点检测与S参数调优

kneed 0.8.0 实战&#xff1a;4种曲线类型&#xff08;凹凸/增减&#xff09;拐点检测与S参数调优拐点检测在数据分析中扮演着关键角色&#xff0c;无论是评估机器学习模型的性能曲线&#xff0c;还是分析业务指标的变化趋势&#xff0c;找到"肘点"或"膝点"…

2026/7/7 15:42:13

日新闻

免费文件夹加密软件全攻略：从VeraCrypt到7-Zip，构建个人数字保险柜

免费文件夹加密软件全攻略：从VeraCrypt到7-Zip，构建个人数字保险柜

1. 项目概述&#xff1a;为什么我们需要文件夹加密&#xff1f; 在数字生活和工作场景中&#xff0c;我们每个人的电脑里都或多或少存放着一些“敏感”文件。这些文件可能是尚未公开的个人财务记录、工作项目的核心设计方案、私密的家庭照片&#xff0c;或者是一些重要的账号密…

2026/7/7 0:00:29
WMIC命令失效排查：Windows 11 22H2后获取ProcessorID等信息的3种替代方案

WMIC命令失效排查：Windows 11 22H2后获取ProcessorID等信息的3种替代方案

Windows 11 22H2后获取硬件标识的现代方案&#xff1a;告别WMIC的全面指南当你在Windows 11 22H2或更新版本中尝试使用熟悉的WMIC命令获取ProcessorID或MachineGUID时&#xff0c;突然弹出的"不是内部或外部命令"错误提示是否让你措手不及&#xff1f;微软已正式将WM…

2026/7/7 0:00:29
Oracle数据库安全漏洞修复与主动防范实战指南

Oracle数据库安全漏洞修复与主动防范实战指南

1. 项目概述&#xff1a;为什么Oracle数据库安全是运维的“必修课” 最近在梳理团队内部的数据库运维规范&#xff0c;发现一个老生常谈但又极易被忽视的问题&#xff1a;Oracle数据库的安全漏洞修复。这话题听起来有点“硬核”&#xff0c;但只要你手头有Oracle数据库在跑&…

2026/7/7 0:00:29

周新闻

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题&#xff1a;ContextMenuManager使用全攻略 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单中那些…

2026/7/7 3:16:03
GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

如果你正在用 GXDE OS 或者任何基于 Deepin 的发行版&#xff0c;并且遇到了“检测到窗口系统采用 Wayland 协议&#xff0c;程序即将退出”这类弹窗&#xff0c;或者发现 VMware Tools 在 Ubuntu 24.04 这类默认 Wayland 的系统上启动失败&#xff0c;那这篇文章就是为你准备的…

2026/7/7 3:36:13
企业AI落地困境与AgenticOps实践指南

企业AI落地困境与AgenticOps实践指南

1. 企业AI落地的现实困境与破局之道过去两年&#xff0c;大模型技术呈现爆发式增长&#xff0c;从GPT-3到GPT-4&#xff0c;从LLaMA到DeepSeek&#xff0c;模型参数规模从百亿级跃升至万亿级&#xff0c;多模态能力从单一文本扩展到图文音视频的综合处理。然而在企业应用层面&a…

2026/7/7 7:05:11

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/6 23:28:09
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/6 16:00:00
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/6 21:42:32