Question

我创建了两个自定义控件。第一个自定义控件包括另一个作为倍数。我想在我的XML视图中使用它们，如下所示：

<foo:Foo>
    <foo:FooItem>
    </foo:FooItem>
    <foo:FooItem>
    </foo:FooItem>
</foo:Foo>

我创建了我的父自定义控件Foo来创建包含我的子控件的FlexBox。

My Foo元数据：

metadata: 
{
    properties:
    {
        "title": {type : "string", group : "Misc", defaultValue : ""}
    },
    aggregations : 
    {
        content: {singularName: "content"}
    },
    defaultAggregation: "content"
}

和我的Foo渲染器：

renderer : 
{

    render : function(oRm, oControl) {
        console.log("inoart.controls.Gauge.render()");


        var layout = oControl.createLayout();//creates FlexBox
        oRm.write("<div");
        oRm.writeControlData(oControl); 
        oRm.writeClasses();
        oRm.write(">");
        oRm.renderControl(layout);

        var aChildren = oControl.getContent();
        for (var i = 0; i < aChildren.length; i++) 
        { // loop over all child Controls, 

            oRm.write("<div>");
            oRm.writeStyles();

            layout.addItem(aChildren[i]);
            // I tried to add my child controls to this layout!!!

            oRm.renderControl(aChildren[i]);
            oRm.write("</div>");

        }

        oRm.addClass('verticalAlignment');
        oRm.write("</div>");
    }
}

我的观点如下：

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
    <controls.FooItem id="__fooItem0">
        <sap.m.VBox id="__vbox0">
        <sap.m.FlexBox id="__box1">
    <controls.FooItem id="__fooItem1">
        <sap.m.VBox id="__vbox1">
        <sap.m.FlexBox id="__box2">

但我希望它是这样的：

<controls.Foo id="__Foo0">
    <sap.m.FlexBox id="__box0">
        <controls.FooItem id="__fooItem0">
            <sap.m.VBox id="__vbox0">
            <sap.m.FlexBox id="__box1">
        <controls.FooItem id="__fooItem1">
            <sap.m.VBox id="__vbox1">
            <sap.m.FlexBox id="__box2">

Answer 1

您对oRm.renderControl进行一次调用以呈现FlexBox，然后在聚合内容的循环中对oRm.renderControl进行一些调用。由于所有这些renderControl-Calls都处于同一级别，因此所有内容都在同一级别上呈现。

由于已经渲染了flexbox，因此将内容聚合中的项目添加到循环内的FlexBox内容聚合中是很晚的。在每次重新渲染时向Flexbox添加项目也不是一个好主意。

您可以从sap.m.FlexBox派生您的Foo-Control并覆盖渲染器以执行一些特殊操作。
您可以覆盖addContent，removeContent，getContent，...方法，以委托您的内部Flexbox addItem，removeItem，{{1因此，您添加到内容聚合的后缀实际上会添加到内部Flexbox的Items聚合中。
您可以在Foo控件上使用beforeRendering方法将其所有内容添加到其内部FlexBox的项目聚合中。

我希望这会给你一些帮助。

为sapui5中的自定义控件创建多个聚合的布局

1 个答案: