XML 视图中有 2 列的 UI5 MatrixLayout

Question

我尝试制作一个 MatrixLayout，其中 1 列包含 2 行文本，1 列包含一行文本和一个图标。

目前看起来是这样的：

问题：图标浮动到文本元素的右侧，但应该位于文本下方。这是为什么？
问题：列宽是 50% / 50%，我需要它们是 30% / 70%。我尝试为 MatrixLayout 设置属性 "widths"，但在我的 XML 视图中我无法将它们设置为 widths="[30%, 70%]" 因为控制台显示：

Uncaught Error: "[30%, 70%]" is of type object, expected sap.ui.core.CSSSize[] for property "widths" of Element sap.ui.commons.layout.MatrixLayout#__layout1

视图中的片段：

<layout:MatrixLayout 
                            layoutFixed="false"
                            columns="2"
                            width="100%"
                            widths="10%, 90%"
                            >
                            <layout:MatrixLayoutRow>                            
                            <layout:cells>
                                <layout:MatrixLayoutCell>
                                    <Text width="80%" maxLines="1" clampHeight="1" text="lululajksdhkajsdh askdahksdhahsdjkahjksdhasd kjahsdkjahsdhasjkdhasjd ">
                                    </Text>
                                    <Text width="80%" maxLines="1" clampHeight="1" text="lululajksdhkajsdh askdahksdhahsdjkahjksdhasd kjahsdkjahsdhasjkdhasjd ">
                                    </Text>
                                </layout:MatrixLayoutCell>
                                <layout:MatrixLayoutCell>
                                    <Text width="80%" maxLines="1" clampHeight="1" text="lululajksdhkajsdh askdahksdhahsdjkahjksdhasd kjahsdkjahsdhasjkdhasjd ">
                                    </Text>
                                    <core:Icon src="sap-icon://add"></core:Icon>
                                </layout:MatrixLayoutCell>
                            </layout:cells>                 
                            </layout:MatrixLayoutRow>
                         </layout:MatrixLayout>

我做错了什么？谢谢..

Answer 1

我认为您不能直接在 XMLView 中指定它 -- 因为它是一个数组，我认为您不能直接在属性中指定它

但是，如果您为 MatrixLayout 指定一个 ID，您当然可以使用控制器完美地设置它：

onAfterRendering: function() {
    this.byId("myMatrixLayout").setWidths(["30%", "70%"]);
}

编辑：我还注意到您在 MatrixLayoutCell.
中设置了多个控件虽然这可能有效，但通常最好将每个控件放在自己的单元格中，以便更好地控制布局：

<l:MatrixLayout id="myLayout">
    <l:MatrixLayoutRow>
        <l:MatrixLayoutCell><Text text="In pharetra diam pretium bibendum" /></l:MatrixLayoutCell>
        <l:MatrixLayoutCell><Text text="Sed tristique diam non imperdiet commodo" /></l:MatrixLayoutCell>
    </l:MatrixLayoutRow>
    <l:MatrixLayoutRow>
        <l:MatrixLayoutCell><Text text="At tincidunt purus finibus" /></l:MatrixLayoutCell>
        <l:MatrixLayoutCell><core:Icon src="sap-icon://add" /></l:MatrixLayoutCell>
    </l:MatrixLayoutRow>
</l:MatrixLayout>

Answer 2

可以直接在XMLView中指定

<l:MatrixLayout xmlns="sap.ui.commons"
    width="100%"
    height="100%"
    columns="3"
    widths="50%,40%,10%">
    <l:rows></l:rows>
</l:MatrixLayout>

XML 视图中有 2 列的 UI5 MatrixLayout

UI5 MatrixLayout with 2 columns in XML View

xml

layout

matrix

sapui5