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>

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

FixFlex布局是否正确？对我来说重要的是我希望在其上方有多个列表，因此它们具有相同的大小（它们在表中）

Answer 1

FixFlex用于分割两个区域之间的空间：fix一个具有固定尺寸的flex一个具有灵活性且占据剩余空间的区域。

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

对齐以SAPUI5为中心的fixContent

1 个答案: