这是一个简单的示例:

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

10-06 10:37