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>

但我想在附近添加一张图片

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

如何将图片与标签对齐

感谢everyBody !!

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>   

结果：