QML中动态选择委托的技巧：利用Component与条件绑定

// 开发者尝试的方案（需要改进）
Repeater {
    model: elementModel

    delegate: pickDelegate() ? PeriodicTableDelegate : SomeOtherDelegate {
    height: gridview.cellHeight
    selectionModel: itemSelectionModel
    width: gridview.cellWidth
    x: (group - 1) * width
    y: (period - 1) * height
    }          
}
function pickDelegate(){
   return window.height > 60 // 示例条件
}

// 封装第一个委托
Component {
    id: periodicDelegateComponent // 使用有意义的ID
    PeriodicTableDelegate {
        // 在这里初始化PeriodicTableDelegate的通用属性
        // 这些属性将在Repeater实例化时应用
        height: gridview.cellHeight
        selectionModel: itemSelectionModel
        width: gridview.cellWidth
        x: (group - 1) * width
        y: (period - 1) * height
    }
}

// 封装第二个委托
Component {
    id: someOtherDelegateComponent // 使用有意义的ID
    SomeOtherDelegate {
        // 在这里初始化SomeOtherDelegate的通用属性
        height: gridview.cellHeight * 0.7 // 示例：不同的高度
        selectionModel: itemSelectionModel
        width: gridview.cellWidth * 0.7
        x: (group - 1) * width
        y: (period - 1) * height
    }
}

// 定义一个布尔属性来存储条件判断结果
// 例如，根据窗口高度动态改变条件
property bool usePeriodicStyle: window.height > 600

Repeater {
    model: elementModel
    // 根据usePeriodicStyle属性的值选择不同的Component
    delegate: usePeriodicStyle ? periodicDelegateComponent : someOtherDelegateComponent
}

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15 // 用于Rectangle和Text等基础组件

Window {
    width: 800
    height: 600
    visible: true
    title: "Dynamic Delegate Selection"

    // 假设这是您的数据模型
    ListModel {
        id: elementModel
        ListElement { name: "Hydrogen"; group: 1; period: 1 }
        ListElement { name: "Helium"; group: 18; period: 1 }
        ListElement { name: "Lithium"; group: 1; period: 2 }
        ListElement { name: "Beryllium"; group: 2; period: 2 }
    }

    // 假设这是您的布局容器，用于提供cellWidth/cellHeight
    // 实际应用中可能是一个GridView、ColumnLayout或其它布局容器
    Rectangle {
        id: gridview
        width: parent.width
        height: parent.height
        property real cellWidth: parent.width / 4
        property real cellHeight: parent.height / 4
        color: "lightgray"

        // 定义第一个委托 Component
        Component {
            id: periodicDelegateComponent
            Rectangle {
                // 假设PeriodicTableDelegate是一个简单的Rectangle
                // 实际应用中可以是复杂的自定义组件
                width: gridview.cellWidth
                height: gridview.cellHeight
                color: "lightblue"
                border.color: "blue"
                border.width: 1

                Text {
                    text: model.name
                    anchors.centerIn: parent
                    font.pointSize: 16
                }
                // 示例：显示一些模型数据
                Text {
                    text: "Group: " + model.group + ", Period: " + model.period
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pointSize: 10
                }
            }
        }

        // 定义第二个委托 Component (例如，更紧凑的显示)
        Component {
            id: someOtherDelegateComponent
            Rectangle {
                width: gridview.cellWidth * 0.7
                height: gridview.cellHeight * 0.7
                color: "lightgreen"
                border.color: "green"
                border.width: 1

                Text {
                    text: model.name.substring(0, 3) // 缩写名称
                    anchors.centerIn: parent
                    font.pointSize: 12
                    color: "darkgreen"
                }
            }
        }

        // 定义条件属性
        // 当窗口高度大于500时，使用periodicDelegateComponent，否则使用someOtherDelegateComponent
        property bool usePeriodicStyle: Window.height > 500

        Repeater {
            model: elementModel
            // 根据条件选择委托
            delegate: usePeriodicStyle ? periodicDelegateComponent : someOtherDelegateComponent
        }
    }
}