與標籤SapUi5對齊圖像在一個簡單的形式

Question

我有這樣的一個簡單的觀點：

這是我的XML代碼：

<core:View 
     xmlns   = "sap.m" 
     xmlns:com  = "sap.ui.commons" 
     xmlns:core  = "sap.ui.core" 
     xmlns:l   = "sap.ui.layout" 
     xmlns:html  = "http://www.w3.org/1999/xhtml" 
     controllerName = "InRETL.view.Cash" 
     xmlns:f   = "sap.ui.layout.form"> 
<Page 
     showNavButton  = "true" 
     title    = "Cash"> 
    <ObjectHeader 
     title    = "Cash" 
     number    = "30.000" 
     numberUnit   = "₪"> 
    </ObjectHeader> 
    <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> 

，但我想添加圖片近似的數量

而我嘗試添加圖片，但我的結果是這樣的：

我該怎麼做才能與標籤對準畫面

謝謝所有人！

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> 

而結果：