对齐fixContent集中在SAPUI5

问题描述：

<mvc:View 
controllerName="sap.ui.demo.wt.controller.App" 
xmlns="sap.m" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns:l="sap.ui.layout" 
displayBlock="true"> 
<App> 
    <pages> 
     <Page title="Home" 
     width="100%" height="100%"> 
      <content> 
       <l:FixFlex 
        class="sapUiTinyMarginTopBottom" 
        vertical="false" 
        minFlexSize="1" 
        fixFirst="false"> 
        <l:flexContent> 
         <List 
          width="100%" 
          showSeparators="Inner"> 
          <items> 
           <StandardListItem text="Row 1"/> 
           <StandardListItem text="Row 2"/> 
           <StandardListItem text="Row 3"/> 
          </items> 
         </List> 
        </l:flexContent> 
        <l:fixContent 
         class="sapUiTinyMarginTopBottom" 
         height="100%"> 

         <Button icon="sap-icon://add" press="onPress"> 
          <layoutData> 
           <FlexItemData alignSelf="Center"></FlexItemData> 
          </layoutData> 
         </Button> 

         </l:fixContent> 
       </l:FixFlex> 
      </content> 
     </Page> 
    </pages> 
</App>

我想在该中心，而不是在顶部AUF盒/布局排列的按钮。

FixFlex布局是否正确？重要，我是，我想有多个列表一个在上面，使他们具有相同的尺寸（它们在表）

答

FixFlex用于在两个区域之间分裂的空间：fix一个具有固定的尺寸和灵活的并将占据空间的其余部分的一个。

如果您的目标是让列表填充屏幕上的剩余空间并使按钮具有固定宽度，则可以使用它。为了对齐中心的按钮（垂直），我不认为FixFlex会为你提供很大的帮助。一个想法是围绕在Flexbox的按钮：

<HBox height="100%" alignItems="Center"> 
    <Button icon="sap-icon://add" press="onPress" /> 
</HBox>

您可以在这里看到的这一个工作版本：https://jsfiddle.net/amnswh85/1/

另一种选择是完全沟FixFlex和只使用一个Flexbox的和游戏围绕每个项目的growFactor：

<HBox width="100%" alignItems="Stretch"> 
    <List width="100%" showSeparators="Inner"> 
     <items> 
     <StandardListItem title="Row 1" /> 
     <StandardListItem title="Row 2" /> 
     <StandardListItem title="Row 3" /> 
     </items> 
     <layoutData> 
     <FlexItemData growFactor="1"/> 
     </layoutData> 
    </List> 
    <Button icon="sap-icon://add" press="onPress"> 
     <layoutData> 
     <FlexItemData alignSelf="Center"/> 
     </layoutData> 
    </Button> 
</HBox>

你可以在这里找到相关的工作版本：https://jsfiddle.net/amnswh85/

的秒一个人在桌子上为我工作。非常感谢！ – wckrt

对齐fixContent集中在SAPUI5

相关推荐