對齊fixContent集中在SAPUI5

Question

這裏是一個簡約的例子：

<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佈局是否正確？ 重要，我是，我想有多個列表一個在上面，使他們具有相同的尺寸（它們在表）

Answer 1

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/