javascript - 以SAPUI5为中心对齐fixContent

这是一个简单的示例：

<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>

我希望按钮在中心对齐，而不在框/布局的顶部对齐。

FixFlex布局正确吗？
对我来说重要的是，我想在上方有多个列表，以便它们具有相同的大小（它们在表中）

最佳答案

FixFlex用于在两个区域之间划分空间：fix区域具有固定的尺寸，而flex区域具有弹性，并会占用其余空间。

如果您的目标是让列表填充屏幕上的剩余空间，并使按钮具有固定的宽度，则可以使用它。为了使按钮在中间（垂直）对齐，我认为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/