[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://www.mzph.cn/news/665481.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

快速理解复杂系统组成学习内容整合

快速理解复杂系统组成学习内容整合

目录 一、复杂系统组成 二、接入系统 (Access System) 三、应用系统 (Application System) 四、基础平台 (Foundation Platform) 五、中间件 (Abundant External Middleware) 六、支撑系统 (Supporting System) 参考文章 一、复杂系统组成 复杂系统是由多个相互关联、相…
阅读更多...
React中的事件处理逻辑

React中的事件处理逻辑

在React中&#xff0c;事件处理逻辑是通过在组件上添加事件监听器来实现的。事件监听器是一个函数&#xff0c;它会在特定的事件发生时被调用。可以通过以下几个步骤来处理事件逻辑: 在组件类中定义事件处理函数。例如&#xff0c;可以在组件类中定义一个叫做handleClick的事件…
阅读更多...
比瓴科技入围软件供应链安全赛道！为关键信息基础设施安全建设注入新动力

比瓴科技入围软件供应链安全赛道！为关键信息基础设施安全建设注入新动力

1月20日&#xff0c;中关村华安关键信息基础设施安全保护联盟会员大会暨关键信息基础设施安全保护论坛在北京成功举办&#xff0c;比瓴科技作为会员单位受邀出席。 本次论坛发布了《关键信息基础设施安全保护支撑能力白皮书&#xff08;2023&#xff09;》&#xff0c;比瓴科技…
阅读更多...
蓝桥杯客观题练习笔记

蓝桥杯客观题练习笔记

1、蓝桥杯单片机开发板供电为几V&#xff1f; 5V DS18B20是单工通讯&#xff0c;还是半双工通讯&#xff1f;为什么&#xff1f; 将时钟线&#xff0c;数据线&#xff0c;控制线和电源线合并为一根线&#xff0c;只要符合单总线协议的器件都能以从机的身份挂接到单总线上与主…
阅读更多...
【开源】SpringBoot框架开发大学计算机课程管理平台

【开源】SpringBoot框架开发大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…
阅读更多...
许昌路280号3号办公楼室内精装修项目

许昌路280号3号办公楼室内精装修项目

许昌路280号3号办公楼室内精装修项目 (招标编号:2024-上水管线-201) 项目所在地区:上海市 一、招标条件 本许昌路280号3号办公楼室内精装修项目已由项目审批/核准/备案机关批准&#xff0c;项目资金来源为国有资金0万元:私有资金0万元;境外资金0万元;自筹资金480万元;外国政府及…
阅读更多...
获取真实 IP 地址（二）：绕过 CDN（附链接）

获取真实 IP 地址（二）：绕过 CDN（附链接）

一、DNS历史解析记录 DNS 历史解析记录指的是一个域名在过去的某个时间点上的DNS解析信息记录。这些记录包含了该域名过去使用的IP地址、MX记录&#xff08;邮件服务器&#xff09;、CNAME记录&#xff08;别名记录&#xff09;等 DNS 信息。DNS 历史记录对于网络管理员、安全研…
阅读更多...
架构师为什么要写文档？又该如何写文档呢？

架构师为什么要写文档？又该如何写文档呢？

大家好&#xff0c;我是冰河~~ 最近有很多小伙伴&#xff0c;也不乏身边的一些同事问我&#xff1a;哎&#xff0c;架构师为什么要写这么多文档啊&#xff1f;有啥用呢&#xff1f;不能跟开发一样多写写代码吗&#xff1f;天天写文档&#xff0c;又感觉自己的文档写不好&#…
阅读更多...
2023年12月CCF-GESP编程能力等级认证Python编程五级真题解析

2023年12月CCF-GESP编程能力等级认证Python编程五级真题解析

Python等级认证GESP（1~6级）全部真题・点这里 一、单选题（共15题，共30分） 第1题 通讯卫星在通信网络系统中主要起到（ ）的作用。 A：信息过滤 B：信号中继 C：避免攻击 D：数据加密 答案：B 第2题 小杨想编写一个判断任意输入的整数N是否为素数的程序，下面哪个方法…
阅读更多...
怪物联萌小游戏

怪物联萌小游戏

欢迎来到程序小院 怪物联萌 玩法&#xff1a;将怪物连体&#xff0c;怪物只能直线上下左右移动&#xff0c;躲过障碍物&#xff0c;共16关卡&#xff0c; 不同关卡不同界面&#xff0c;遇到金币记得吃掉金币哦&#xff0c;会获得更高分数&#xff0c;快去闯关吧^^。开始游戏ht…
阅读更多...
纯血鸿蒙来了，鸿蒙App开发该如何提速

纯血鸿蒙来了，鸿蒙App开发该如何提速

“全世界做产品挣钱的公司很多&#xff0c;但有能力打造操作系统的公司没有几家&#xff0c;最后世界上的操作系统就只有三套&#xff1a;鸿蒙、iOS和安卓。” --- 360集团创始人、董事长周鸿祎 “HarmonyOS实现了AI框架、大模型、设计系统、编程框架、编程语言、编译器等全栈…
阅读更多...
git的分支操作

git的分支操作

目录 简介&#xff1a; 操作&#xff1a;查看 操作&#xff1a;创建 操作&#xff1a;切换​编辑 操作&#xff1a;本地分支推送到远程 操作&#xff1a;git merge [name]合并分支​编辑 简介&#xff1a; 在Git中&#xff0c;可以通过分支来管理和处理不同的版本和功能。分…
阅读更多...
一文读懂C++的类和对象以及多态的原理

一文读懂C++的类和对象以及多态的原理

现实生活中&#xff0c;关于类和对象最好的例子是自然界的动物类&#xff0c;本文将以此为场景逐步引入C的概念&#xff0c;达到学习的目的。因为C这门语言本身有很多繁杂的内容&#xff0c;而网上的资源也是参差不齐&#xff0c;有的人见山谈山遇水聊水&#xff0c;有多人故弄…
阅读更多...
已解决！AttributeError: ‘Sequential‘ object has no attribute ‘session‘ 问题

已解决！AttributeError: ‘Sequential‘ object has no attribute ‘session‘ 问题

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…
阅读更多...
事件在状态流程图中的工作方式

事件在状态流程图中的工作方式

什么是事件&#xff1f; 事件是一个Stateflow对象&#xff0c;它可以触发以下对象中一个动作&#xff1a; Simulink触发子系统 Simulink函数调用子系统 状态流程图 何时使用事件 当你想&#xff1a; 激活Simulink触发的子系统 激活Simulink函数调用子系统 在状态流程图…
阅读更多...
MySQL进阶之触发器

MySQL进阶之触发器

触发器 触发器是与表有关的数据库对象&#xff0c;指在insert/update/delete之前(BEFORE)或之后(AFTER)&#xff0c;触 发并执行触发器中定义的SQL语句集合。触发器的这种特性可以协助应用在数据库端确保数据的完整性 , 日志记录 , 数据校验等操作 。 使用别名OLD和NEW来引用…
阅读更多...
EtherCAT转ModbusTCP网关

EtherCAT转ModbusTCP网关

一、功能概述 1.1设备简介 本产品是EtherCAT和Modbus TCP网关&#xff0c;使用数据映射方式工作。 本产品在EtherCAT侧作为EtherCAT从站&#xff0c;接TwinCAT、CodeSYS、PLC等&#xff1b;在ModbusTCP侧做为ModbusTCP主站&#xff08;Client&#xff09;或从站&#xff08;…
阅读更多...
openstack

openstack

在虚拟机上安装完openstack之后&#xff0c;根据你想提供的服务&#xff0c;再去安装一些组件(服务)&#xff0c;比如说 (Nova)&#xff1a;用于虚拟机的管理、调度和协调。 (Neutron)&#xff1a;用于管理虚拟网络和网络服务。 (Cinder)&#xff1a;提供块级存储服务&#…
阅读更多...
c语言---操作符（详解）

c语言---操作符（详解）

目录 一、操作符的分类二、算术操作符三、 移位操作符3.1<<左移操作符3.1.1移位规则3.1.2直接上代码以及解释 3.2>> 右移操作符3.2.1移位规则3.2.2画图解释 3.3注意 四、位操作符&#xff1a;&、|、^、~4.1&按位与4.1.1按位与的计算逻辑4.1.2代码4.1.3运行…
阅读更多...
2024程序员就业咋办？

2024程序员就业咋办？

国际研究机构Gartner会在每年10月份左右发布下一年度的战略发展趋势预测&#xff0c;并在次年3月左右发布和网络安全相关的趋势预测。绿盟科技通过将近3年的趋势预测进行分组对比分析后发现&#xff0c;除了众人皆知的AI技术应用外&#xff0c;数据模块化、身份优先安全、行业云…
阅读更多...
最新文章

Copyright @ 2022~2023