做背景图获取网站,世界十大互联网公司排名,电脑版网页游戏,网站版块下载文章目录 前言1. FlexBox布局控件1.1 alignItems 对齐模式1.2 justifyContent 对齐模式1.3 Direction1.4 Sort1.5 Render Type1.6 嵌套使用1.7 组件等高显示 2. HBox,VBox3. HorizontalLayout#xff0c;VerticalLayout 前言
本章节记录常用控件FlexBox,VBox,HBox,Horizontal… 文章目录 前言1. FlexBox布局控件1.1 alignItems 对齐模式1.2 justifyContent 对齐模式1.3 Direction1.4 Sort1.5 Render Type1.6 嵌套使用1.7 组件等高显示 2. HBox,VBox3. HorizontalLayoutVerticalLayout 前言
本章节记录常用控件FlexBox,VBox,HBox,HorizontalLayout,VerticalLayout。 其路径分别是
sap.m.FlexBoxsap.m.VBoxsap.m.HBoxsap.ui.layout.HorizontalLayoutsap.ui.layout.VerticalLayout 1. FlexBox布局控件
FlexBox布局控件经常用在页面的布局。
1.1 alignItems 对齐模式
常用的有StartCenterEnd View PanelheaderTextalignItems 对齐模式classsapUiLargeMarginBottomHBoxPanel headerTextStartFlexBoxalignItemsStartclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextCenterFlexBoxalignItemsCenterclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextEndFlexBoxalignItemsEndclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/Panel/HBox/Panel1.2 justifyContent 对齐模式 常用的有Start,Center,End,SpaceAround,SpaceBetween View PanelheaderTextjustifyContent 对齐模式classsapUiLargeMarginBottomHBoxPanel headerTextStartFlexBoxjustifyContentStartclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextCenterFlexBoxjustifyContentCenterclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextEndFlexBoxjustifyContentEndclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextSpaceAroundFlexBoxjustifyContentSpaceAroundclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextSpaceBetweenFlexBoxjustifyContentSpaceBetweenclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/Panel/HBox/Panel1.3 Direction
常用的有Row,RowReverse,Column,ColumnReverse View PanelheaderTextDirectionclasssapUiLargeMarginBottomHBoxPanel headerTextRowFlexBoxdirectionRowclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextRowReverseFlexBoxdirectionRowReverseclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextColumnFlexBoxdirectionColumnclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/PanelPanel headerTextColumnReverseFlexBoxdirectionColumnReverseclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//FlexBox/Panel/HBox/Panel1.4 Sort
可以排序Box内的组件( layoutData-FlexItemData View PanelheaderTextSortclasssapUiLargeMarginBottomHBoxPanel headerTextOrder in RowFlexBoxdirectionRowclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEndlayoutDataFlexItemData order2 //layoutData/ButtonButtontext2typeRejectclasssapUiTinyMarginEndlayoutDataFlexItemData order3 //layoutData/ButtonButtontext3typeAcceptclasssapUiTinyMarginEndlayoutDataFlexItemData order1 //layoutData/Button/FlexBox/PanelPanel headerTextOrder in ColumnFlexBoxdirectionColumnclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEndlayoutDataFlexItemData order3 //layoutData/ButtonButtontext2typeRejectclasssapUiTinyMarginEndlayoutDataFlexItemData order1 //layoutData/ButtonButtontext3typeAcceptclasssapUiTinyMarginEndlayoutDataFlexItemData order2 //layoutData/Button/FlexBox/Panel/HBox/Panel1.5 Render Type
常用的有Div,Bare,List View PanelheaderTextRender TypeclasssapUiLargeMarginBottomHBoxPanel headerTextDivFlexBoxrenderTypeDivclassborderStylewidth320pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor3 //layoutData/ButtonButtontext2typeRejectclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor2 //layoutData/ButtonButtontext3typeAcceptclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor1 //layoutData/Button/FlexBox/PanelPanel headerTextBareFlexBoxrenderTypeBareclassborderStylewidth320pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor3 //layoutData/ButtonButtontext2typeRejectclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor2 //layoutData/ButtonButtontext3typeAcceptclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor1 //layoutData/Button/FlexBox/PanelPanel headerTextListFlexBoxrenderTypeListclassborderStylewidth320pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor3 //layoutData/ButtonButtontext2typeRejectclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor2 //layoutData/ButtonButtontext3typeAcceptclasssapUiTinyMarginEndlayoutDataFlexItemData growFactor1 //layoutData/Button/FlexBox/Panel/HBox/Panel1.6 嵌套使用 View PanelheaderTextFlexItemData growFactorclasssapUiLargeMarginBottomHBoxfitContainertruealignItemsStretchclasssapUiSmallMargin nestedFlexboxescore:HTML contentlt;h2gt;1lt;/h2gt;core:layoutDataFlexItemDatagrowFactor2styleClassitem1//core:layoutData/core:HTMLcore:HTML contentlt;h2gt;2lt;/h2gt;core:layoutDataFlexItemDatagrowFactor3styleClassitem2//core:layoutData/core:HTMLVBox fitContainertruelayoutDataFlexItemData growFactor7 //layoutDatacore:HTML contentlt;h2gt;3lt;/h2gt;core:layoutDataFlexItemDatagrowFactor5styleClassitem3//core:layoutData/core:HTMLHBoxfitContainertruealignItemsStretchlayoutDataFlexItemData growFactor3 //layoutDatacore:HTML contentlt;h2gt;4lt;/h2gt;core:layoutDataFlexItemDatagrowFactor1styleClassitem4//core:layoutData/core:HTMLcore:HTML contentlt;h2gt;5lt;/h2gt;core:layoutDataFlexItemDatagrowFactor1styleClassitem5//core:layoutData/core:HTML/HBox/VBoxcore:HTML contentlt;h2gt;6lt;/h2gt;core:layoutDataFlexItemDatagrowFactor5styleClassitem6//core:layoutData/core:HTML/HBox/Panel1.7 组件等高显示 View PanelheaderText组件等高classsapUiLargeMarginBottomHBox classsapUiLargeMarginBottom customPanelFlexBoxTexttextAlthough they have different amounts of text, both columns are of equal height.layoutDataFlexItemDatagrowFactor1baseSize0backgroundDesignSolidstyleClasssapUiTinyMargin//layoutData/TextTexttextLorem 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.layoutDataFlexItemDatagrowFactor2baseSize0backgroundDesignSolidstyleClasssapUiTinyMargin//layoutData/Text/FlexBox/HBox/Panel2. HBox,VBox
HBox,VBox是FlexBox的子类可以直接使用并实现横向布局和竖向布局
View PanelheaderTextHBox VBoxclasssapUiLargeMarginBottomHBoxPanel headerTextHBoxHBoxclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//HBox/PanelPanel headerTextVBoxVBoxclassborderStylewidth220pxheight100pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//VBox/Panel/HBox/Panel3. HorizontalLayoutVerticalLayout
这两个组件类似与HBox和VBox主要区别是HorizontalLayout无法设置宽高属性VerticalLayout无法设置高属性 View PanelheaderTextHorizontalLayout,VerticalLayoutclasssapUiLargeMarginBottomHBoxPanel headerTextHorizontalLayoutl:HorizontalLayoutclassborderStyleButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//l:HorizontalLayout/PanelPanel headerTextVerticalLayoutl:VerticalLayoutclassborderStylewidth220pxButtontext1typeEmphasizedclasssapUiTinyMarginEnd/Buttontext2typeRejectclasssapUiTinyMarginEnd/Buttontext3typeAcceptclasssapUiTinyMarginEnd//l:VerticalLayout/Panel/HBox/Panel
