Sapui5 如何使用按钮使简单表单具有响应性

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

<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>

---

据我所知，我对你的问题有两个答案

按钮彼此相邻

<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>

不同行/行中的按钮

<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>

<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>

同一行/行中的输入和按钮

<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>

<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>

对于移动设备，您需要相邻一行中的按钮，还是两个按钮都在不同的行中？如果可能，请共享UI布局（屏幕截图）以便更好地理解。如果我们在移动视图中看到它，这就是我的UI布局。我想在输入字段旁边找到搜索按钮，因此您需要在同一行中使用标签、输入和按钮？当我最小化并在移动视图中看到所有3个按钮（即输入字段和2个按钮）时，是的应该出现在同一行我尝试了你提到的，但它看起来像这样，当我在桌面上查看它和移动视图，它看起来像这样，我已经更新了代码，它将在桌面视图正常工作。根据移动视图所关注的，没有足够的空间来显示图标和文本，这就是文本被截断的原因。你只需要在手机视图中显示图标就可以了。谢谢，除了我发现的另一个问题外，我发现在iphone 6/7/8/x中查看时，按钮中的文本会被截断，就像这样，不仅文本会被截断，输入也会被截断。这是一些布局问题。请分享完整的布局进行调查。它发生在桌面视图以及您之前共享的屏幕截图中。您发送的代码只是SF代码，我们已经讨论过了。我说的是SF编写的布局，即完整的XML视图。我认为由于一些额外的填充/边距，它从SF的外部布局被截断。