如何将LayoutData应用于FlexBox中的元素？
我有一个标签，输入字段，按钮和3个链接控件，这些控件必须在桌面上显示为一行，另一个在移动屏幕上显示，如下图所示。
桌面：
预期手机：
我能够实现桌面上的预期效果。但是，当在移动设备上呈现相同内容时，它显示如下。
实际手机：
我已经使用Flexbox根据需要对齐控件，其中FlexBox中控件的LayoutData似乎不起作用。任何人都可以帮助我将LayoutData应用于控件。？
以下是使用FlexBox的代码
<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">
<App>
<pages>
<Page showHeader="false" enableScrolling="true">
<content>
<OverflowToolbar active="false" enabled="true" height="5%" design="Auto" class="bwsearchMaintainToolbar">
<content>
<ToolbarSpacer/>
<ToolbarSpacer/>
<Link text="Search Maintenance" href="http://www.sap.com" subtle="true" emphasized="false" press="onNavigateToSearchMaintenance"></Link>
<Button icon="sap-icon://action" press="onExport" tooltip="Export" type="Transparent"></Button>
</content>
</OverflowToolbar>
<IconTabBar id="iSearchIconTabBar" selectedKey="searchObjects" stretchContentHeight="false" applyContentPadding="true"
backgroundDesign="Solid" headerMode="Standard" showOverflowSelectList="false" headerBackgroundDesign="Solid" enableTabReordering="false"
select="onSearchObjects">
<items>
<IconTabFilter text="Search Objects" key="searchObjects" tooltip="{i18n>search_objects}">
<content>
<FlexBox justifyContent="Center" alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent">
<items>
<FlexBox height="" width="" displayInline="false" direction="Row" fitContainer="false" renderType="Div" justifyContent="Center"
alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent">
<items>
<Label text="Metadata Objects:" labelFor="iMetadataSearch" class="sapUiSmallMarginEnd"/>
<Input id="iMetadataSearchr" type="Text" class="sapUiSmallMarginEnd"/>
<Button text="Go" press="onSearchGo" class="sapUiSmallMarginBegin"/>
</items>
</FlexBox>
<FlexBox height="" width="" displayInline="false" direction="Row" fitContainer="false" renderType="Div" justifyContent="End"
alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent" class="bwUiLargeMarginBegin">
<items>
<Link id="iViewLogs" text="View Logs" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
press="onNavigateToViewLogs" class="bwUiLargeMarginBegin sapUiSmallMarginEnd"></Link>
<Link id="iRuntimeInfo" text="Runime Info" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
press="onRuntimeInfo" class="sapUiSmallMarginEnd"></Link>
<Link id="iAdvanceSettings" text="Advance settings" href="http://www.sap.com" subtle="true" emphasized="false"
press="onAdvancedSettings"></Link>
</items>
</FlexBox>
</items>
</FlexBox>
<FlexBox height="" width="" displayInline="false" direction="Row" fitContainer="false" renderType="Div" justifyContent="Center"
alignItems="Center" wrap="Wrap" alignContent="Stretch" backgroundDesign="Transparent">
<items>
<CheckBox id="iTechnicalNamer" selected="true" enabled="true" name="technicalName" text="Technical Name">
<layoutData>
<l:GridData span="L4 M6 S12"/>
</layoutData>
</CheckBox>
<CheckBox id="iDescriptionr" selected="true" enabled="true" name="description" text="Description">
<layoutData>
<l:GridData span="L4 M6 S12"/>
</layoutData>
</CheckBox>
<CheckBox id="iUsedObjectsr" selected="false" enabled="true" name="usedObjects" text="Used Objects">
<layoutData>
<l:GridData span="L4 M6 S12"/>
</layoutData>
</CheckBox>
</items>
</FlexBox>
</content>
</IconTabFilter>
<IconTabFilter text="Search Where Used" key="searchWhereUsed" tooltip="Search Where Used">
<content></content>
</IconTabFilter>
</items>
</IconTabBar>
</content>
</Page>
</pages>
</App>
使用Form的人就在这里，
<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">
<App>
<pages>
<Page showHeader="false" enableScrolling="true">
<content>
<OverflowToolbar active="false" enabled="true" height="5%" design="Auto" class="bwsearchMaintainToolbar">
<content>
<ToolbarSpacer/>
<ToolbarSpacer/>
<Link text="Search Maintenance" href="http://www.sap.com" subtle="true" emphasized="false" press="onNavigateToSearchMaintenance"></Link>
<Button icon="sap-icon://action" press="onExport" tooltip="Export" type="Transparent"></Button>
</content>
</OverflowToolbar>
<IconTabBar id="iSearchIconTabBar" selectedKey="searchObjects" stretchContentHeight="false" applyContentPadding="true"
backgroundDesign="Solid" headerMode="Standard" showOverflowSelectList="false" headerBackgroundDesign="Solid" enableTabReordering="false"
select="onSearchObjects">
<items>
<IconTabFilter text="Search Objects" key="searchObjects" tooltip="{i18n>search_objects}">
<content>
<f:Form id="iTLogoSearch" editable="true">
<f:layout>
<f:ResponsiveGridLayout adjustLabelSpan="true"/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement>
<f:label>
<Label text="Metadata Objects">
<layoutData>
<l:GridData span="XL4 L4 M6 S12"/>
</layoutData>
</Label>
</f:label>
<f:fields>
<Input id="iMetadataSearch" type="Text" placeholder="Search">
<layoutData>
<l:GridData span="XL2 L2 M6 S12"/>
</layoutData>
</Input>
<Button text="Go" width="50px" press="onSearchGo">
<layoutData>
<l:GridData span="XL1 L1 M1 S12"/>
</layoutData>
</Button>
<ToolbarSpacer>
<layoutData>
<l:GridData span="XL1 L1 M6 S12"/>
</layoutData>
</ToolbarSpacer>
<Link id="iViewLogsr" text="View Logs" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
press="onNavigateToViewLogs">
<layoutData>
<l:GridData span="XL1 L1 M1 S12"/>
</layoutData>
</Link>
<Link id="iRuntimeInfor" text="Runtime Info" enabled="false" href="http://www.sap.com" subtle="true" emphasized="false"
press="onRuntimeInfo">
<layoutData>
<l:GridData span="XL1 L1 M1 S12"/>
</layoutData>
</Link>
<Link id="iAdvanceSettingsr" text="Advanced Settings" href="http://www.sap.com" subtle="true" emphasized="false"
press="onAdvancedSettings">
<layoutData>
<l:GridData span="XL2 L2 M6 S12"/>
</layoutData>
</Link>
</f:fields>
</f:FormElement>
<f:FormElement>
<f:fields>
<ToolbarSpacer>
<layoutData>
<l:GridData span="XL1 L1 M6 S12"/>
</layoutData>
</ToolbarSpacer>
<CheckBox id="iTechnicalName" selected="true" enabled="true" name="technicalName" text="Technical Name">
<layoutData>
<l:GridData span="XL2 L2 M2 S12" indentXL="2" indentL="2" indentM="2"/>
</layoutData>
</CheckBox>
<CheckBox id="iDescription" selected="true" enabled="true" name="description" text="Description">
<layoutData>
<l:GridData span="XL2 L2 M2 S12"/>
</layoutData>
</CheckBox>
<CheckBox id="iUsedObjects" selected="false" enabled="true" name="usedObjects" text="Used Objects">
<layoutData>
<l:GridData span="XL2 L2 M2 S12"/>
</layoutData>
</CheckBox>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</content>
</IconTabFilter>
<IconTabFilter text="Search Where Used" key="searchWhereUsed" tooltip="Search Where Used">
<content></content>
</IconTabFilter>
</items>
</IconTabBar>
</content>
</Page>
</pages>
</App>
2 个答案:
答案 0 :(得分：0)
您可以指定使用过的单元格数量：
<l:Grid defaultSpan="L12 M12 S12">
我相信12是默认值和最大值，但有些摆弄你可能会发现不同的组合看起来更好。
您可以向ResponsiveGridLayout添加额外的属性，如下所示：
<f:ResponsiveGridLayout labelSpanL="6" labelSpanM="4" labelSpanS="12" emptySpanL="1" emptySpanM="1" emptySpanS="1" columnsL="1" columnsM="1"
breakpointL="800" breakpointM="400"/>
哪个可以让你更好地控制标签和控件。这样做具体是标签和＆amp;的可用细胞/柱的数量。下面控件的空白区域。断点可能对你来说最有用，就像大型显示器成为媒介一样等等。
如果你有12个细胞，你给4个细胞到lables，1个细胞用于emptySpan，那么你有以下7个细胞：
<layoutData>
<l:GridData span="XL2 L2 M6 S12"/>
</layoutData>
编辑 - 只是指出，虽然不久前，我知道我们在没有使用断点的情况下无法对齐较小的屏幕。也许我的知识已经过时了。
答案 1 :(得分：0)
您可以通过ResponsiveGridLayout和＆＃34; GridData＆＃34;
来实现责任感 <CheckBox text="test">
<layoutData>
<l:GridData span="L2 M3 S12" />
</layoutData>
</CheckBox>
享受
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？