这是一个简单的示例:
<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/