SAPUI5以简单的形式将图像与标签对齐

Question

我有一个简单的观点：

这是我的 XML 代码：

<?xml version="1.0" encoding="UTF-8"?>
<core:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:com="sap.ui.commons" xmlns:f="sap.ui.layout.form" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout" controllerName="InRETL.view.Cash">
   <Page showNavButton="true" title="Cash">
      <ObjectHeader title="Cash" number="30.000" numberUnit="?" />
      <IconTabBar backgroundDesign="Transparent">
         <items>
            <IconTabFilter icon="sap-icon://sales-order-item" text="Details">
               <f:SimpleForm maxContainerCols="2" labelSpanL="3" labelSpanM="3" labelSpanS="3" emptySpanL="0" emptySpanM="0" emptySpanS="0" columnsL="2" columnsM="2" columnsS="2" editable="true" layout="ResponsiveGridLayout">
                  <f:content>
                     <core:Title level="H4" emphasized="true" text="Notes" />
                     <!--  <Image
                              src="images/200a.png"   
                              width="50px"
                              heigh="30px" >
                            </Image> -->
                     <Label text="200 ?" />
                     <Input editable="false" value="2000" />
                     <Label text="100 ?" />
                     <Input editable="false" value="2000" />
                     <Label text="50 ?" />
                     <Input editable="false" value="2000" />
                     <Label text="20 ?" />
                     <Input editable="false" value="2000" />
                     <core:Title text="Coins" level="H4" />
                     <Label text="10 ?" />
                     <Input editable="false" value="2000" />
                     <Label text="5 ?" />
                     <Input editable="false" value="2000" />
                     <Label text="1 ?" />
                     <Input editable="false" value="2000" />
                  </f:content>
               </f:SimpleForm>
            </IconTabFilter>
         </items>
      </IconTabBar>
   </Page>
</core:View>

但我想添加一个接近数量的图片：

我尝试添加图像，但我的结果是这样的：

如何将图片与标签对齐？

Answer 1

经过大量搜索，我必须制作一个网格并为所有元素设置布局，如下所示：

<Image
    src = "images/200a.png"
    width = "80px"
    heigh = "50px">
        <layoutData>
            <l:GridData
                span = "L2 M1 S1"
                linebreakL = "true"
                linebreakM = "true"
                linebreakS = "true" />
        </layoutData>
</Image>

<Label text = "200 ?">
    <layoutData>
        <l:GridData span = "L2 M2 S4" />
    </layoutData>
</Label>
<Input
    editable = "false"
    value = "2000">
        <layoutData>
            <l:GridData span="L2 M2 S4" />
        </layoutData>
</Input>

结果：