QML Repeater 动态Delegate选择教程：实现条件逻辑切换

Repeater {
    model: elementModel
    delegate: pickDelegate() ? PeriodicTableDelegate : SomeOtherDelegate {
        // ... delegate properties ...
    }
}

function pickDelegate(){
   return window.height > 60
}

// 示例：定义第一个Delegate组件
Component {
    id: periodicDelegateComponent // 为Delegate组件指定一个ID
    PeriodicTableDelegate { // 这是一个自定义的QML组件，例如PeriodicTableDelegate.qml
        // 在这里初始化或绑定PeriodicTableDelegate的属性
        // 例如，这些属性可以来自Repeater的model数据
        height: gridview.cellHeight
        selectionModel: itemSelectionModel
        width: gridview.cellWidth
        x: (group - 1) * width // group, period 是来自model的数据
        y: (period - 1) * height
    }
}

// 示例：定义第二个Delegate组件
Component {
    id: otherDelegateComponent // 为另一个Delegate组件指定ID
    SomeOtherDelegate { // 这是另一个自定义的QML组件，例如SomeOtherDelegate.qml
        // 在这里初始化或绑定SomeOtherDelegate的属性
        height: gridview.cellHeight
        selectionModel: itemSelectionModel
        width: gridview.cellWidth
        x: (group - 1) * width
        y: (period - 1) * height
    }
}

// 在Repeater所在的父QML文件中定义
property bool usePeriodicDelegate: window.height > 60 // 示例条件：根据窗口高度

Repeater {
    model: elementModel
    delegate: usePeriodicDelegate ? periodicDelegateComponent : otherDelegateComponent
}

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Dynamic Repeater Delegate")

    // 假设PeriodicTableDelegate.qml和SomeOtherDelegate.qml已定义
    // PeriodicTableDelegate.qml 内容示例:
    // import QtQuick 2.0
    // Rectangle {
    //     color: "lightblue"
    //     border.color: "blue"
    //     border.width: 1
    //     Text { text: modelData.name; anchors.centerIn: parent }
    // }

    // SomeOtherDelegate.qml 内容示例:
    // import QtQuick 2.0
    // Rectangle {
    //     color: "lightgreen"
    //     border.color: "green"
    //     border.width: 1
    //     Text { text: modelData.symbol; anchors.centerIn: parent }
    // }

    // 定义第一个Delegate组件
    Component {
        id: periodicDelegateComponent
        PeriodicTableDelegate {
            // 假设PeriodicTableDelegate接受name和symbol属性，并显示在Delegate内部
            name: modelData.name
            symbol: modelData.symbol
            height: 50
            width: 50
            // 如果model包含group和period数据，可以这样绑定
            // x: (modelData.group - 1) * width
            // y: (modelData.period - 1) * height
        }
    }

    // 定义第二个Delegate组件
    Component {
        id: otherDelegateComponent
        SomeOtherDelegate {
            name: modelData.name
            symbol: modelData.symbol
            height: 60
            width: 60
        }
    }

    // 定义条件属性：当窗口高度大于400时使用PeriodicTableDelegate
    property bool usePeriodicDelegate: window.height > 400

    Rectangle {
        anchors.fill: parent
        color: "lightgray"

        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            y: 10
            text: "当前Delegate: " + (usePeriodicDelegate ? "PeriodicTableDelegate" : "SomeOtherDelegate")
            font.pixelSize: 20
        }

        GridView { // 也可以是ListView
            id: gridview
            anchors.fill: parent
            anchors.topMargin: 50
            // 根据当前Delegate调整单元格大小，以适应不同的Delegate尺寸
            cellWidth: usePeriodicDelegate ? 60 : 70
            cellHeight: usePeriodicDelegate ? 60 : 70

            // 示例模型数据
            model: [
                { name: "Hydrogen", symbol: "H", group: 1, period: 1 },
                { name: "Helium", symbol: "He", group: 18, period: 1 },
                { name: "Lithium", symbol: "Li", group: 1, period: 2 }
            ]

            // 根据条件选择Delegate
            delegate: usePeriodicDelegate ? periodicDelegateComponent : otherDelegateComponent
        }
    }
}