[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.rhkb.cn/news/250893.html

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

相关文章

虹科技术丨一文详解IO-Link Wireless技术如何影响工业无线自动化

虹科技术丨一文详解IO-Link Wireless技术如何影响工业无线自动化

来源&#xff1a;虹科工业智能互联 虹科技术丨一文详解IO-Link Wireless技术如何影响工业无线自动化 原文链接&#xff1a;https://mp.weixin.qq.com/s/qVIkdeI5zzzagPd0UEkfDg 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #工业自动化 #IO-Link Wireless #工业无…
阅读更多...
vue3学习——自定义插件，注册组件（引入vue文件报红线）

vue3学习——自定义插件，注册组件（引入vue文件报红线）

在src/components文件夹目录下创建一个index.ts文件 import { App, Component } from Vue import SvgIcon from /components/SvgIcon/index.vue import Pagination from /components/Pagination/index.vue const globalComponents: { [name: string]: Component } { SvgIcon,…
阅读更多...
微信小程序实现吸顶、网格、瀑布流布局

微信小程序实现吸顶、网格、瀑布流布局

微信小程序开发通常是在webview模式下编写&#xff0c;但是对小程序的渲染性能有一定的追求&#xff0c;就需要使用Skyline模式进行渲染&#xff0c;同时在这种模式下有也有一些特殊的组件&#xff0c;可以轻松的实现想要的效果&#xff0c;本文将介绍在Skyline模式下如何实现吸…
阅读更多...
正则表达式可视化工具regex-vis

正则表达式可视化工具regex-vis

什么是正则表达式 &#xff1f; 正则表达式是对字符串操作的一种逻辑公式&#xff0c;就是用事先定义好的一些特定字符、及这些特定字符的组合&#xff0c;组成一个“规则字符串”&#xff0c;这个“规则字符串”用来表达对字符串的一种过滤逻辑。【百度百科】 正则表达式用简短…
阅读更多...
前端入门第三天

前端入门第三天

目录 一、CSS定义 二、CSS引入方式 三、基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.画盒子 四、文字控制属性 1.字体大小 2.字体粗细 3.字体倾斜 4.行高 1.行高-垂直居中 5.字体族 6.font复合属性 7.文本缩进 8.文本对齐方式 1.水平对…
阅读更多...
Autoxjs从配置环境到打包脚本成apk（细致）

Autoxjs从配置环境到打包脚本成apk（细致）

环境配置 手机/模拟器上安装autox.js&#xff0c;官方文档和下载地址在文末 vscode安装Auto.js-Autox.js-VSCodeExt插件 手机与电脑连接 在vscode开启autoxjs服务 快捷键CtrlShiftP打开命令搜索窗口&#xff0c;输入autoxjs&#xff0c;选择开启服务 出现IP和端口号即为开启…
阅读更多...
HiveSQL题——collect_set()/collect_list()聚合函数

HiveSQL题——collect_set()/collect_list()聚合函数

一、collect_set() /collect_list()介绍 collect_set()函数与collect_list()函数属于高级聚合函数&#xff08;行转列&#xff09;&#xff0c;将分组中的某列转换成一个数组返回&#xff0c;常与concat_ws()函数连用实现字段拼接效果。 collect_list&#xff1a;收集并形成lis…
阅读更多...
2021-10-12 51蛋骗鸡数码管前7位显示1-7第8位显示0-9

2021-10-12 51蛋骗鸡数码管前7位显示1-7第8位显示0-9

缘由 51单片机数码管问题-编程语言-CSDN问答 #include "REG52.h" sbit K1 P3^0; sbit K2 P3^1; sbit K3 P3^2; sbit K4 P3^3; bit k1,wk0; unsigned char code SmZiFu[]{63,6,91,79,102,109,125,7,127,111,128,255,64};//0-9.消隐- unsigned char Js0,miao0,fen…
阅读更多...
奠定基础：用于机器学习的微积分、数学和线性代数

奠定基础：用于机器学习的微积分、数学和线性代数

一、说明 机器学习是一个引人入胜的领域&#xff0c;它使计算机能够从数据中学习并做出预测或决策&#xff0c;而无需明确编程。然而&#xff0c;在幕后&#xff0c;有一个坚实的数学和线性代数基础&#xff0c;构成了机器学习算法的支柱。在本文中&#xff0c;我们将探讨在深入…
阅读更多...
Spring-mvc、Spring-boot中如何在调用同类方法时触发AOP

Spring-mvc、Spring-boot中如何在调用同类方法时触发AOP

1. 问题描述 Spring-mvc和Spring-boot中aop可以实现代理的功能&#xff0c;我们可以借此实现事务和日志记录或者限流等多种操作。但是&#xff0c;如果你在一个方法中调用其同类下的其他方法的时候不会触发AOP。本文主要说明其原因及解决办法和实现原理。 2. 原因 AIOP的本质是…
阅读更多...
【七】【C++】模版初阶

【七】【C++】模版初阶

泛型编程 C中的泛型编程是一种编程范式&#xff0c;它强调代码的重用性和类型独立性。通过泛型编程&#xff0c;你可以编写与特定数据类型无关的代码&#xff0c;使得相同的代码可以用于多种数据类型。 利用重载实现泛型编程 /*利用重载实现泛型编程*/ #include<iostream&…
阅读更多...
四、Redis之配置文件

四、Redis之配置文件

redis配置文件的名称 redis.conf 通过命令 find / -name redis.confvim redis.conf通过 : set nu 设置行号: set nonu 取消行号/关键字 搜索关键字: set noh 取消高亮选择4.1 Units 配置大小单位&#xff0c;开头定义了一些基本的度量单位&#xff0c;只支持 bytes&#…
阅读更多...
第六十一天 服务攻防-中间件安全CVE复现K8SDockerJettyWebsphere

第六十一天 服务攻防-中间件安全CVE复现K8SDockerJettyWebsphere

第61天 服务攻防-中间件安全&CVE复现&K8S&Docker&Jetty&Websphere 知识点&#xff1a; 中间件及框架列表&#xff1a; lIS,Apache,Nginx,Tomcat,Docker,Weblogic,JBoos,WebSphere,Jenkins, GlassFish,Jira,Struts2,Laravel,Solr,Shiro,Thinkphp,Sprng,Fl…
阅读更多...
代码随想录 Leetcode131. 分割回文串

代码随想录 Leetcode131. 分割回文串

题目&#xff1a; 代码(首刷看解析 2024年2月3日&#xff09;&#xff1a; class Solution { public:vector<vector<string>> res;vector<string> path;bool isPalindrome(const string& s, int start, int end) {for (int i start, j end; i < j;…
阅读更多...
获取真实 IP 地址（二）：绕过 CDN（附链接）

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

一、DNS历史解析记录 DNS 历史解析记录指的是一个域名在过去的某个时间点上的DNS解析信息记录。这些记录包含了该域名过去使用的IP地址、MX记录&#xff08;邮件服务器&#xff09;、CNAME记录&#xff08;别名记录&#xff09;等 DNS 信息。DNS 历史记录对于网络管理员、安全研…
阅读更多...
单臂路由实验（华为）

单臂路由实验（华为）

思科设备参考&#xff1a; 单臂路由实验&#xff08;思科&#xff09; 一&#xff0c;实验目的 在路由器的一个接口上通过配置子接口的方式&#xff0c;实现相互隔离的不同vlan之间互通。 ​ 二&#xff0c;设备配置 Switch1 <Huawei>sys [Huawei]vlan batch 10 20…
阅读更多...
《计算机网络简易速速上手小册》第6章：网络性能优化（2024 最新版）

《计算机网络简易速速上手小册》第6章：网络性能优化（2024 最新版）

文章目录 6.1 带宽管理与 QoS - 让你的网络不再拥堵6.1.1 基础知识6.1.2 重点案例&#xff1a;提高远程办公的视频会议质量实现步骤环境准备Python 脚本示例注意事项 6.1.3 拓展案例1&#xff1a;智能家居系统的网络优化实现思路Python 脚本示例 6.1.4 拓展案例2&#xff1a;提…
阅读更多...
STM32CAN2进入bus off 模式

STM32CAN2进入bus off 模式

工作遇到的问题记录 无人机CAN2整个进不了中断&#xff0c;通过查看寄存器判定出CAN节点进入了bus off mode 为何进入bus off &#xff0c;最后通过示波器看到整个CAN2总线波形就不对&#xff0c;总线出现了错误 Busoff的产生是一定是因为节点自身识别到自己发送错误&#xff…
阅读更多...
Latex学习记录

Latex学习记录

目录 1.Latex各种箭头符号总结 2.[Latex]公式编辑&#xff0c;编号、对齐 3.Latex公式编号: 多行公式多编号&#xff0c;多行公式单编号 4.LaTex中输入空格以及换行 1.Latex各种箭头符号总结 箭头符号 - ➚ (piliapp.com)https://cn.piliapp.com/symbol/arrow/Latex各种箭头…
阅读更多...
面试150 二进制求和 位运算

面试150 二进制求和 位运算

Problem: 67. 二进制求和 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 参考 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) Code class Solution {public String addBinary(String a, String b){StringBuilder ans new Stri…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023