如何使用按钮使简单的表单响应

Question

我制作了一个简单的表单，其中包含一个输入字段和两个按钮，定义如下：

<core:FragmentDefinition
        xmlns="sap.m"
        xmlns:l="sap.ui.layout"
        xmlns:f="sap.ui.layout.form"
        controllerName="com.techmo.controller.Table"
        xmlns:core="sap.ui.core">
        <Page
            class="employePageBackGroundColor"
            showHeader="false">
            <f:SimpleForm
                    id="EmployeeSimpleForm"
                    editable="true"
                    layout="ResponsiveGridLayout"
                    labelSpanL="4"
                    labelSpanM="4"
                    labelSpanS="6"
                    adjustLabelSpan="True"
                    emptySpanL="0"
                    emptySpanM="0"
                    emptySpanS="6"
                    columnsL="1"
                    columnsM="1"
                    singleContainerFullSize="false" >
                <f:content>
                        <Label text="Employee Name" reqiured="true">
                                    <layoutData>
                                        <l:GridData span="L2 M3 S6"/>
                                    </layoutData>
                                </Label>
                                <Input id="empname">
                                    <layoutData>
                                        <l:GridData span="L2 M3 S6"/>
                                    </layoutData>
                                </Input>

如果我在这里添加按钮，它在移动视图中没有响应按钮被截断并进入下一行。我是 ui5 的新手，谁能帮我解决这个问题提前谢谢

 <Button class="search" type="Emphasized" text="Search" press="onSearch" icon="sap-icon://search">
                          <layoutData>
                            <l:GridData span="L2 M2 S2"/>
                          </layoutData>
             </Button>

     <Button class="userAddButton" text="ADD" press="onAddCustomer" icon="sap-icon://add-employee">
                <layoutData>
                   <l:GridData span="L5 M2 S12"/>
                 </layoutData>
      </Button>
</f:content>
</f:SimpleForm>

Answer 1

根据我的理解，我对你的问题有两个答案

按钮彼此相邻

<Button class="search" type="Emphasized" text="Search" press="onSearch" icon="sap-icon://search">
  <layoutData> <l:GridData span="L2 M2 S6"/> </layoutData>
</Button>
<Button class="userAddButton" text="ADD" press="onAddCustomer" icon="sap-icon://add-employee">
  <layoutData> <l:GridData span="L5 M2 S6"/> </layoutData>
</Button>

不同的按钮line/rows

<Button class="search" type="Emphasized" text="Search" press="onSearch" icon="sap-icon://search">
  <layoutData> <l:GridData span="L2 M2 S12"/> </layoutData>
</Button>
<Button class="userAddButton" text="ADD" press="onAddCustomer" icon="sap-icon://add-employee">
  <layoutData> <l:GridData span="L5 M2 S12"/> </layoutData>
</Button>

输入和按钮相同line/rows

<Label text="Employee Name">
  <layoutData> <l:GridData span="L2 M2 S12"/> </layoutData>
</Label>                 
<Input id="empname">
  <layoutData> <l:GridData span="L6 M6 S4"/> </layoutData>
</Input>
<Button class="search" type="Emphasized" text="Search" press="onSearch" icon="sap-icon://search" >
  <layoutData> <l:GridData span="L2 M2 S4"/> </layoutData>
</Button>
<Button class="userAddButton" text="ADD" press="onAddCustomer" icon="sap-icon://add-employee">
  <layoutData> <l:GridData span="L2 M2 S4"/> </layoutData>
</Button>

注意：具有最小屏幕分辨率的手机，如 iPhone 5/SE，按钮文本将被截断。解决方案是只显示没有文字的图标。

完整代码

<mvc:View
    controllerName="com.techmo.controller.ManageEmployee"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:fb="sap.ui.comp.filterbar"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <Page
        class="employePageBackGroundColor"
        showHeader="false">
        <f:SimpleForm
            id="EmployeeSimpleForm"
            editable="true"
            layout="ResponsiveGridLayout"
            labelSpanL="4"
            labelSpanM="4"
            labelSpanS="6"
            adjustLabelSpan="True"
            emptySpanL="0"
            emptySpanM="0"
            emptySpanS="0"
            columnsL="1"
            columnsM="1"
            singleContainerFullSize="false" >
            <f:content>
                <Label text="Employee Name">
                    <layoutData>
                        <l:GridData span="L2 M2 S12"/>
                    </layoutData>
                </Label>
                <Input id="empname" >
                    <layoutData>
                        <l:GridData span="L6 M6 S4"/>
                    </layoutData>
                </Input>
                <Button  class="search" type="Emphasized" text="Search" press="onSearch" icon="sap-icon://search" >
                    <layoutData>
                        <l:GridData span="L2 M2 S4"/>
                    </layoutData>
                </Button>
                <Button class="userAddButton" text="ADD" press="onAddCustomer" icon="sap-icon://add-employee">
                    <layoutData>
                        <l:GridData span="L2 M2 S4"/>
                    </layoutData>
                </Button>
            </f:content>
        </f:SimpleForm>         
    </Page>
</mvc:View>

如何使用按钮使简单的表单响应

How to make simple form responsive using buttons

sapui5