Sapui5 对于具有聚合绑定的列表，如何以2列2行的形式显示数据？

在我看来，我有一个列表，该列表具有与模型属性的聚合绑定。 我希望它以两列两行的形式显示。应使用哪个控件/布局

在我的代码中，模型在控制器中设置，并具有属性问答，其中问答是一个集合。此模型正在绑定到视图中的列表

现在，我想在布局中显示这些数据，其中前两个选项位于第一列和第一行，然后在第二行显示下两个选项，即每行显示两个带有复选框的选项

目前，我的视图、控制器和输出代码如下

App.view.xml

输出：

所需内容：一行显示猫和兔子答案，下一行显示狗和仓鼠，即一行显示2个带有复选框的项目，依此类推

---

对此，应使用哪个控件？我需要一个带有聚合绑定的控件。

您需要重新构造数据。列表绑定中的每个项只能表示数据中的一个项。在使用聚合绑定时，没有简单的方法将数据中的两个对象合并到列表中的一个项目中。然后，您可以使用带有ColumnListItem的表来分隔列，也可以像我在这里所做的那样使用CustomListItem

试试这个：

视图：

---

loki，如果你想用2x2矩阵显示数据，你需要sap.m.表。你可以在这里找到很多有用的东西，我更喜欢探索和API参考部分。API引用有点难读懂，因为您无法搜索函数名，而只能搜索类。@corax228您就是教我使用聚合绑定的人。现在我可以自信地使用聚合绑定了。非常感谢。是的，理解API有点困难。我希望马特理解我的问题，让这件事过去。由于我所获得的知识，昨天我用SAPUI5问题回答了某人，这是我第一个被接受的答案。这是我希望学习的信心构建器，并在将来的某个时候开始以这种方式帮助他人。@loki，它真的帮助了我理解，API搜索只适用于类名。这些类名等同于本节提供的名称。仔细研究一下这两个问题，您就会明白SAP是如何看待开发世界的：尝试一下；谢谢你，凯尔。我看到您还在模型中重新构造了answers属性。我要试一试。这只是我想学的额外的东西。谢谢你让我知道CustomListItem的用法。

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
displayBlock="true" controllerName="opensap.examples.controller.App" height="100%">
<Page title="List Page">
    <content>
        <List headerText="{myModel>/question}" id="myList" items="{myModel>/answers}">
            <items>
                <InputListItem label="{myModel>answerText}">
                    <CheckBox/>
                </InputListItem>
            </items>
        </List>
           <Button press="load" text="Click Me"/>
    </content>
</Page>

sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel"], function(Controller, JSONModel) {

var oData = {
    "question": "Which pet do you like from the following?",
    "answers": [{
        "answerText": "Cats"
    }, {
        "answerText": "Rabbits"
    }, {
        "answerText": "Dogs"
    }, {
        "answerText": "Hamsters"
    }]
};

var oModel;

Controller.extend("opensap.examples.controller.App", {

    onInit: function() {
        oModel = new JSONModel();
        oModel.setData(oData);
        this.getView().setModel(oModel, "myModel");


    },
    load: function() {
        console.log(oModel);
    }

});
});

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="opensap.examples.controller.App" height="100%">
    <Page title="List Page">
        <content>
            <List headerText="{myModel>/question}" id="myList" items="{myModel>/answers}">
                <items>
                    <CustomListItem>
                        <FlexBox justifyContent="SpaceBetween">
                            <Text text="{myModel>answerText1}"/>
                            <CheckBox/>
                        </FlexBox>
                        <FlexBox justifyContent="SpaceBetween">
                            <Text text="{myModel>answerText2}"/>
                            <CheckBox/>
                        </FlexBox>
                    </CustomListItem>
                </items>
            </List>
            <Button press="load" text="Click Me"/>
        </content>
    </Page>
</mvc:View>

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {

    var oData = {
        "question": "Which pet do you like from the following?",
        "answers": [{
            "answerText1": "Cats",
            "answerText2": "Rabbits"
        }, {
            "answerText1": "Dogs",
            "answerText2": "Hamsters"
        }]
    };
    var oModel;
    Controller.extend("opensap.examples.controller.App", {
        onInit: function() {
            oModel = new JSONModel();
            oModel.setData(oData);
            this.getView().setModel(oModel, "myModel");
        },
        load: function() {
            console.log(oModel);
        }
    });
});