如何将输入置于视图之上？

Question

我想知道是否有任何控件可以让我将输入置于视图之上。现在输入位于左上角，与视图处于同一级别。

我尝试使用 tollbar、overflowtoolbar、水平和垂直布局，但没有用。

这是我的代码

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="ariba.so.bulktransfer.controller.FirstPage"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" xmlns:semantic="sap.f.semantic" xmlns:dnd="sap.ui.core.dnd">
    <semantic:SemanticPage id="SemanticPage" preserveHeaderStateOnScroll="false" showFooter="true">
        <semantic:titleHeading>
            <Title text="Transfer Content Items"/>
        </semantic:titleHeading>
        <semantic:content>
            <HBox renderType="Bare">
                <Input id="inactiveemployee" type="Text" placeholder="Enter Inactive Employee" showValueHelp="true" valueHelpOnly="true"
                    valueHelpRequest="onInactiveEmployee"/>
                <mvc:XMLView id="availableContent" viewName="ariba.so.bulktransfer.view.AvailableContent"/>
                <VBox justifyContent="Center" class="sapUiTinyMarginBeginEnd">
                    <Button class="sapUiTinyMarginBottom" icon="sap-icon://navigation-right-arrow" tooltip="Move to selected"
                        press="moveToSelectedProductsTable"/>
                    <Button icon="sap-icon://navigation-left-arrow" tooltip="Move to available" press="moveToAvailableProductsTable"/>
                </VBox>
                <Input id="activeemployee" type="Text" placeholder="Enter active Employee" showValueHelp="true" valueHelpOnly="true"
                    valueHelpRequest="onActiveEmployee"/>
                <mvc:XMLView id="selectedContent" viewName="ariba.so.bulktransfer.view.SelectedContent"/>
            </HBox>
        </semantic:content>
        <semantic:footerCustomActions>
            <Button text="Transfer" press="onTransfer"/>
        </semantic:footerCustomActions>
    </semantic:SemanticPage>
</mvc:View>

我希望两个输入都放置在视图上方，并且视图从左到右显示，按钮位于视图之间。

Answer 1

您必须将输入和视图包装在 VBox 中，并将这些 VBox 嵌套到单个 HBox 中才能实现此顺序。

<HBox justifyContent="Center" class="sapUiTinyMarginBeginEnd">
    <VBox renderType="Bare">
        <Input id="inactiveemployee" type="Text" placeholder="Enter Inactive Employee" showValueHelp="true" valueHelpOnly="true"
        valueHelpRequest="onInactiveEmployee"/>
        <mvc:XMLView id="availableContent" viewName="ariba.so.bulktransfer.view.AvailableContent"/>
    </VBox>
    <VBox renderType="Bare">
        <Button class="sapUiTinyMarginBottom" icon="sap-icon://navigation-right-arrow" tooltip="Move to selected"
        press="moveToSelectedProductsTable"/>
        <Button icon="sap-icon://navigation-left-arrow" tooltip="Move to available" press="moveToAvailableProductsTable"/>
    </VBox>
    <VBox renderType="Bare">
        <Input id="activeemployee" type="Text" placeholder="Enter active Employee" showValueHelp="true" valueHelpOnly="true"
        valueHelpRequest="onActiveEmployee"/>
        <mvc:XMLView id="selectedContent" viewName="ariba.so.bulktransfer.view.SelectedContent"/>
    </VBox>
</HBox>

干杯

如何将输入置于视图之上？

How do I put the inputs above the views?

sapui5