QML自定义组件如何将子项自动放置到指定位置？

要实现这个需求，你只需要给自定义组件添加默认属性别名，把传入的子项自动绑定到中间的mid_item_TEXT_OR_IMAGE容器里即可，具体修改如下：

修改后的MyCustomItem.qml #

RowLayout{
    spacing: 0
    // 核心：定义默认属性，将组件的子项自动导入中间容器
    default property alias content: mid_item_TEXT_OR_IMAGE.children

    Image{
        id: divider
        source: "qrc:/screen_header/vertical_divider_screen_header.png"
    }

    Item{ // 子项会自动放入此处
        id:mid_item_TEXT_OR_IMAGE
        Layout.alignment: Qt.AlignHCenter
    }

    Image{
        id: divider2
        source: "qrc:/screen_header/vertical_divider_screen_header.png"
    }
}

说明 #

• default property是QML的特性，当你在组件标签下直接编写子元素时，这些元素会自动赋值给这个默认属性。这里我们把默认属性content关联到mid_item_TEXT_OR_IMAGE的children属性，所以所有传入的子项都会自动成为中间容器的子节点。
• 中间容器的Layout.alignment: Qt.AlignHCenter会自动作用于内部子项，完美保留你需要的居中对齐效果。

使用示例（和你预期的完全一致） #

放入图片：

MyCustomItem{
    Image{
        source: "qrc:/test.png"
    }  
}

放入文本：

MyCustomItem{
    Text{
        text: "AUTO"
    }  
}

内容的提问来源于stack exchange，提问作者Vaio