SAPUI5充分利用阶梯的全宽

SAPUI5充分利用阶梯的全宽,sapui5,Sapui5,我正在我的应用程序中使用向导对象并执行多个步骤。我希望这一步的内容能够充分利用可用的宽度。我目前正在使用下面的XML,尽管这只是导致内容在左侧聚在一起(见附图) 我如何修改它以使SimpleForms使用页面的整个宽度 任何帮助都将不胜感激 谢谢 乔 默认情况下,它使用100%与。。。在你看来,你的局限性来自其他地方 此向导将占据100%的屏幕: <mvc:View controllerName="tc_v1.test.controller.Main" xmlns:html="http

我正在我的应用程序中使用向导对象并执行多个步骤。我希望这一步的内容能够充分利用可用的宽度。我目前正在使用下面的XML,尽管这只是导致内容在左侧聚在一起(见附图)

我如何修改它以使SimpleForms使用页面的整个宽度

任何帮助都将不胜感激

谢谢



默认情况下,它使用100%与。。。在你看来,你的局限性来自其他地方

此向导将占据100%的屏幕:

<mvc:View controllerName="tc_v1.test.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m" xmlns:form="sap.ui.layout.form">
    <App id="idAppControl">
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <Wizard id="wizard" complete="onPressReview" finishButtonText="Review" showNextButton="true">
                        <WizardStep id="wizStep1" validated="true" title="Customer Confirm" icon="sap-icon://customer">
                            <HBox fitContainer="true">
                                <form:SimpleForm editable="true">
                                    <Label text="Title"/>
                                    <Input value="MR"/>
                                    <Label text="Name"/>
                                    <Input value="John"/>
                                    <Input value="Smith"/>
                                    <Label text="House"/>
                                    <Input value="81"/>
                                    <Label text="Street"/>
                                    <Input value="Main Road"/>
                                    <Label text="City"/>
                                    <Input value=""/>
                                    <Label text="PostCode"/>
                                    <Input value=""/>
                                </form:SimpleForm>
                                <form:SimpleForm editable="true">
                                    <Label text="Home Tel"/>
                                    <Input value=""/>
                                    <Label text="Mobile No"/>
                                    <Input value=""/>
                                    <Label text="Email"/>
                                    <Input value=""/>
                                </form:SimpleForm>
                            </HBox>
                        </WizardStep>
                        <WizardStep id="id_wizStp2" validated="true" title="Step 2"/>
                        <WizardStep id="id_wizStp3" validated="true" title="Step 3"/>
                    </Wizard>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>


如果使用
标题
元素,则
SimpleForm
将启动一个新列:。您还可以使用
SimpleFormLayout
控制简单表单的布局


因此,基本上,您需要放置实际使用100%宽度的内容。

谢谢,这已经成功了一半,我用您的代码创建了一个新视图来检查它是否有效,但是由于某些原因,当视图最初加载时,它仍然聚集在左侧,当我刷新页面时,它会使用您的示例中所示的全宽度。同样奇怪的是,当我在第二步中添加相同的简单表单并加载页面时,第二步表单出现在左侧,没有使用全宽。请从您的视图中提供更多代码。也许我们可以找出原因。谢谢。谢谢,这已经奏效了,我实际上不想在表单中添加标题,但是添加标题元素而不添加任何指定的文本效果很好。
<mvc:View controllerName="tc_v1.test.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m" xmlns:form="sap.ui.layout.form">
    <App id="idAppControl">
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <Wizard id="wizard" complete="onPressReview" finishButtonText="Review" showNextButton="true">
                        <WizardStep id="wizStep1" validated="true" title="Customer Confirm" icon="sap-icon://customer">
                            <HBox fitContainer="true">
                                <form:SimpleForm editable="true">
                                    <Label text="Title"/>
                                    <Input value="MR"/>
                                    <Label text="Name"/>
                                    <Input value="John"/>
                                    <Input value="Smith"/>
                                    <Label text="House"/>
                                    <Input value="81"/>
                                    <Label text="Street"/>
                                    <Input value="Main Road"/>
                                    <Label text="City"/>
                                    <Input value=""/>
                                    <Label text="PostCode"/>
                                    <Input value=""/>
                                </form:SimpleForm>
                                <form:SimpleForm editable="true">
                                    <Label text="Home Tel"/>
                                    <Input value=""/>
                                    <Label text="Mobile No"/>
                                    <Input value=""/>
                                    <Label text="Email"/>
                                    <Input value=""/>
                                </form:SimpleForm>
                            </HBox>
                        </WizardStep>
                        <WizardStep id="id_wizStp2" validated="true" title="Step 2"/>
                        <WizardStep id="id_wizStp3" validated="true" title="Step 3"/>
                    </Wizard>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>