QT 插槽实现

方法 1：使用 default property 实现标签插入

通过定义 default property，可以使组件直接嵌套在目标组件中，类似于插槽机制。

CustomSlotExample.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

// 定义一个支持插槽的自定义组件
Rectangle {
    id: customSlot
    width: 200
    height: 100
    color: "lightgray"
    border.color: "black"
    border.width: 2

    // 定义 default property，用于接收插入的内容
    default property alias content: contentItem.data

    // 内容容器
    Item {
        id: contentItem
        anchors.fill: parent
    }
}

Main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    CustomSlotExample {
        anchors.centerIn: parent

        // 在插槽中直接插入标签
        Text {
            text: "Hello, QML Slot!"
            anchors.centerIn: parent
            font.pixelSize: 18
            color: "blue"
        }
    }
}

说明

1. default property：

   • 通过 default property alias 将插入内容绑定到 Item 容器中。
   • 在使用时，可以直接嵌套子组件。

2. 动态插入内容：

   • 在 Main.qml 中，直接将 Text 标签插入到 CustomSlotExample 中。

_________________________________________________________________

方法 2：使用 property alias 和明确的内容插入

如果希望在插槽定义中显式地使用属性名称，可以使用 property alias 实现。

CustomSlotWithAlias.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

// 定义一个支持插槽的自定义组件
Rectangle {
    id: customSlot
    width: 200
    height: 100
    color: "lightgray"
    border.color: "black"
    border.width: 2

    // 定义 property alias，用于接收插入的内容
    property alias slotContent: contentItem.data

    // 内容容器
    Item {
        id: contentItem
        anchors.fill: parent
    }
}

Main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    CustomSlotWithAlias {
        anchors.centerIn: parent

        // 使用 slotContent 属性插入标签
        slotContent: Text {
            text: "Explicit Slot Example"
            anchors.centerIn: parent
            font.pixelSize: 18
            color: "green"
        }
    }
}

说明

1. property alias：

   • 明确指定插槽属性 slotContent，用于插入内容。
   • 更加清晰，但需要在使用时显式指定属性。

2. 动态插入：

   • 通过 slotContent 属性，将 Text 标签插入到 CustomSlotWithAlias 的插槽中。

_______________________________________________________________

方法 3：通过动态组件管理实现插槽

如果需要更加动态的插槽管理，可以结合 Component 和 Loader 实现。

CustomSlotWithLoader.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

// 定义一个支持插槽的自定义组件
Rectangle {
    id: customSlot
    width: 200
    height: 100
    color: "lightgray"
    border.color: "black"
    border.width: 2

    // 定义动态加载的 Loader 插槽
    property Component slotComponent
    Loader {
        id: loader
        anchors.fill: parent
        sourceComponent: slotComponent
    }
}

Main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    CustomSlotWithLoader {
        anchors.centerIn: parent

        // 动态插入组件
        slotComponent: Component {
            Text {
                text: "Dynamic Component Slot"
                anchors.centerIn: parent
                font.pixelSize: 16
                color: "red"
            }
        }
    }
}

说明

1. 动态加载：

   • 使用 Loader 动态加载 slotComponent 的内容。

2. 灵活性：

   • slotComponent 可以动态设置为不同的 Component，实现更灵活的插槽管理。

_____________________________________________________________________

方法 4：多插槽支持

如果需要支持多个插槽，可以通过多个属性实现。

CustomMultiSlot.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

// 定义一个支持多插槽的自定义组件
Rectangle {
    id: customSlot
    width: 300
    height: 150
    color: "lightgray"
    border.color: "black"
    border.width: 2

    // 定义多个插槽
    property alias header: headerItem.data
    property alias footer: footerItem.data

    // 头部插槽
    Item {
        id: headerItem
        width: parent.width
        height: 50
        anchors.top: parent.top
    }

    // 底部插槽
    Item {
        id: footerItem
        width: parent.width
        height: 50
        anchors.bottom: parent.bottom
    }
}

Main.qml

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    CustomMultiSlot {
        anchors.centerIn: parent

        // 填充头部插槽
        header: Text {
            text: "Header Content"
            anchors.centerIn: parent
            font.pixelSize: 16
            color: "blue"
        }

        // 填充底部插槽
        footer: Text {
            text: "Footer Content"
            anchors.centerIn: parent
            font.pixelSize: 16
            color: "green"
        }
    }
}

说明

1. 多插槽：

   • 使用多个 property alias 定义多个插槽，例如 header 和 footer。

2. 插槽内容：

   • 在使用时，可以分别填充头部和底部插槽内容。

__________________________________________________________________

总结