当前位置: 首页 > article >正文

[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
	<Panel
	    headerText="alignItems 对齐模式"
	    class="sapUiLargeMarginBottom"
	>
	    <HBox>
	        <Panel headerText="Start">
	            <FlexBox
	                alignItems="Start"
	                class="borderStyle"
	                width="220px"
	                height="100px"
	            >
	                <Button
	                    text="1"
	                    type="Emphasized"
	                    class="sapUiTinyMarginEnd"
	                />
	                <Button
	                    text="2"
	                    type="Reject"
	                    class="sapUiTinyMarginEnd"
	                />
	                <Button
	                    text="3"
	                    type="Accept"
	                    class="sapUiTinyMarginEnd"
	                />
	            </FlexBox>
	        </Panel>
	        <Panel headerText="Center">
	            <FlexBox
	                alignItems="Center"
	                class="borderStyle"
	                width="220px"
	                height="100px"
	            >
	                <Button
	                    text="1"
	                    type="Emphasized"
	                    class="sapUiTinyMarginEnd"
	                />
	                <Button
	                    text="2"
	                    type="Reject"
	                    class="sapUiTinyMarginEnd"
	                />
	                <Button
	                    text="3"
	                    type="Accept"
	                    class="sapUiTinyMarginEnd"
	                />
	            </FlexBox>
	        </Panel>
	        <Panel headerText="End">
	            <FlexBox
	                alignItems="End"
	                class="borderStyle"
	                width="220px"
	                height="100px"
	            >
	                <Button
	                    text="1"
	                    type="Emphasized"
	                    class="sapUiTinyMarginEnd"
	                />
	                <Button
	                    text="2"
	                    type="Reject"
	                    class="sapUiTinyMarginEnd"
	                />
	                <Button
	                    text="3"
	                    type="Accept"
	                    class="sapUiTinyMarginEnd"
	                />
	            </FlexBox>
	        </Panel>
	    </HBox>
	</Panel>

1.2 justifyContent 对齐模式

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

  • View

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

1.3 Direction

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

在这里插入图片描述

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

1.4 Sort

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

1.5 Render Type

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

1.6 嵌套使用

在这里插入图片描述

  • View
  <Panel
       headerText="FlexItemData growFactor"
       class="sapUiLargeMarginBottom"
   >
       <HBox
           fitContainer="true"
           alignItems="Stretch"
           class="sapUiSmallMargin nestedFlexboxes"
       >
           <core:HTML content="&lt;h2&gt;1&lt;/h2&gt;">
               <core:layoutData>
                   <FlexItemData
                       growFactor="2"
                       styleClass="item1"
                   />
               </core:layoutData>
           </core:HTML>
           <core:HTML content="&lt;h2&gt;2&lt;/h2&gt;">
               <core:layoutData>
                   <FlexItemData
                       growFactor="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>
                       <FlexItemData
                           growFactor="5"
                           styleClass="item3"
                       />
                   </core:layoutData>
               </core:HTML>

               <HBox
                   fitContainer="true"
                   alignItems="Stretch"
               >
                   <layoutData>
                       <FlexItemData growFactor="3" />
                   </layoutData>

                   <core:HTML content="&lt;h2&gt;4&lt;/h2&gt;">
                       <core:layoutData>
                           <FlexItemData
                               growFactor="1"
                               styleClass="item4"
                           />
                       </core:layoutData>
                   </core:HTML>
                   <core:HTML content="&lt;h2&gt;5&lt;/h2&gt;">
                       <core:layoutData>
                           <FlexItemData
                               growFactor="1"
                               styleClass="item5"
                           />
                       </core:layoutData>
                   </core:HTML>
               </HBox>
           </VBox>

           <core:HTML content="&lt;h2&gt;6&lt;/h2&gt;">
               <core:layoutData>
                   <FlexItemData
                       growFactor="5"
                       styleClass="item6"
                   />
               </core:layoutData>
           </core:HTML>
       </HBox>
   </Panel>

1.7 组件等高显示

在这里插入图片描述

  • View
  <Panel
        headerText="组件等高"
        class="sapUiLargeMarginBottom"
    >
        <HBox class="sapUiLargeMarginBottom customPanel">
            <FlexBox>
                <Text
                    text="Although they have different amounts of text, both columns are of equal height."
                >
                    <layoutData>
                        <FlexItemData
                            growFactor="1"
                            baseSize="0"
                            backgroundDesign="Solid"
                            styleClass="sapUiTinyMargin"
                        />
                    </layoutData>
                </Text>
                <Text
                    text="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>
                        <FlexItemData
                            growFactor="2"
                            baseSize="0"
                            backgroundDesign="Solid"
                            styleClass="sapUiTinyMargin"
                        />
                    </layoutData>
                </Text>
            </FlexBox>
        </HBox>
    </Panel>

2. HBox,VBox

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

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

3. HorizontalLayout,VerticalLayout

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

在这里插入图片描述

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

http://www.kler.cn/a/226851.html

相关文章:

  • 使用Arcgis对欧洲雷达高分辨率降水数据重投影
  • Vue中的常用指令
  • 【讲座分享】| 复旦大学张奇教授——《自然语言发表论文如何打怪升级?NLP顶会论文发表》
  • webrtc mediasoup sctp 起什么作用? 用来传输什么数据
  • C语言——R/预处理详解
  • 【从零开始的rust web开发之路 四】rust语言tokio异步使用redis教程
  • 循环神经网络RNN专题(01/6)
  • Apache Paimon 文件布局设计
  • vue3 markdown编辑器推荐(maven-editor vditor tiptap )
  • excel中提取一串数字中的某几个数字
  • C++ 实现单例模式
  • 代码对齐自动缩进排版代码格式化美化代码快捷键ShortcutKeyHotKey
  • [Unity Sentis] Unity Sentis 详细步骤工作流程
  • 速盾:服务器接入免备案CDN节点的好处有哪些
  • Jmeter学习系列之三:测试计划详细介绍
  • mysql 正则表达式用法(一)
  • 异步编程Completablefuture使用详解----进阶篇
  • Kotlin:用源码来深入理解 ‘StateFlow和SharedFlow的区别和联系‘
  • k8s-实战——kubeadm安装v1.29.1
  • Windows 共享文件 netlogon和sysvol的作用