Question

我正在通过多个步骤在我的应用程序中使用向导对象。我希望此步骤的内容利用可用的全部宽度。我目前正在使用下面的XML，尽管这只是导致内容在左侧被捆扎在一起（参见附图）。

如何修改此内容，以便SimpleForms使用页面的整个宽度？

任何帮助将不胜感激，

谢谢

乔

  <WizardStep id="wizStep2" validated="true" title="Customer Confirm" 
    icon="sap-icon://customer" >
    <HBox width="100%" 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>

Current output

Answer 1

默认情况下，它使用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>

Answer 2

如果您使用SimpleForm元素，则Title将开始一个新列：Simple Form API Doc。您还可以使用SimpleFormLayout控制简单表单的布局。

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

SAPUI5利用WizardStep的全宽

2 个答案: