QML 委托控件：ItemDelegate、CheckDelegate、RadioDelegate、SwitchDelegate

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ListView {
        id: listView
        anchors.fill: parent

        model: Qt.fontFamilies()

        delegate: ItemDelegate {
            text: modelData
            width: listView.width
            background: Rectangle {
                implicitWidth: listView.width
                implicitHeight: 30
                opacity: enabled ? 1 : 0.3
                color: (index % 2 == 0) ? "#d0d0d0" : "#ffffff"
            }
            onClicked: console.log("clicked:", modelData)

            required property string modelData
            required property int index
        }

        ScrollIndicator.vertical: ScrollIndicator { }
    }
}

这段代码创建了一个显示系统字体家族名称的可滚动列表，并且每个列表项具有交替的背景颜色，点击列表项时会在控制台输出相应的字体名称。以下是代码说明：

列表视图：

在窗口中创建一个 ListView，并将其锚点设置为填满整个父窗口。
列表的模型设置为 Qt.fontFamilies()，该模型提供系统支持的字体家族名称列表。

委托定义：

使用 ItemDelegate 定义列表中每个项目的外观和行为。
每个列表项的文本设置为模型数据（即字体家族名称）。
每个列表项的宽度设置为与列表视图的宽度相同。
背景使用一个矩形，其颜色根据索引的奇偶性交替变化（偶数索引为灰色，奇数索引为白色），并且透明度根据是否启用来变化。
定义了点击事件，当用户点击列表项时，在控制台输出被点击的字体家族名称。

滚动指示器：

为列表视图添加了一个垂直滚动指示器，方便用户在列表内容超出视图范围时进行滚动操作。

1.2 运行效果

2. CheckDelegate：带复选框的选项

CheckDelegate 在ItemDelegate基础上增加了一个复选框（✓），适用于多选场景，如设置选项列表。

核心特性：

选中状态：checked属性控制勾选状态。
互斥选中：需要加入按钮组（ButtonGroup）。
三态支持：checkState支持Checked、Unchecked和PartiallyChecked。

2.1 代码示例

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property var selectedItems: []

    ListView {
        id: listView
        anchors.fill: parent
        model: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]

        delegate: CheckDelegate {
            text: modelData
            width: listView.width

            onCheckedChanged: {
                if (checked) {
                    selectedItems.push(modelData)
                } else {
                    selectedItems = selectedItems.filter(item => item !== modelData)
                }
            }
        }
    }

    Button {
        text: "Get Selected Items"
        anchors.bottom: listView.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            console.log("Selected items:", selectedItems)
        }
    }
}

这段代码创建了一个窗口，包含一个列表视图（ListView）和一个按钮。列表视图显示了5个可选项目，用户可以通过复选框选择项目，并将选中的项目存储到selectedItems数组中；点击按钮时，会在控制台输出当前选中的项目。

2.2 运行效果

2.3 互斥选中

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ButtonGroup {
        buttons: column.children
    }

    Column {
        id: column
        anchors.centerIn: parent
        CheckDelegate {
            text: "Light Theme"
            checked: true
        }
        CheckDelegate {
            text: "Dark Theme"
        }
    }
}

这段代码创建了一个窗口，其中包含一个垂直布局的列（Column），里面有两个复选框（CheckDelegate），分别表示“Light Theme”和“Dark Theme”，并通过ButtonGroup将它们关联起来，实现单选功能。

2.4 运行效果

3. RadioDelegate：单选按钮委托

RadioDelegate 提供单选按钮（⦿），适用于互斥选择的场景，如性别选择或主题切换。

核心特性：

独占选中：同一时间仅允许一个选项被选中，不需要指定按钮组（ButtonGroup）。

3.1 代码示例

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Column {
        anchors.centerIn: parent
        RadioDelegate {
            text: "Light Theme"
            checked: true
        }
        RadioDelegate {
            text: "Dark Theme"
        }
    }
}

3.2 运行效果

4. SwitchDelegate：滑动开关委托

SwitchDelegate 包含一个滑动开关（⇄），适用于二元状态切换，如启用/禁用功能。

核心特性：

开关状态：通过checked属性控制开关位置。
视觉反馈：滑动动画增强交互体验。

4.1 代码示例

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property bool airplaneMode: false

    SwitchDelegate {
        anchors.centerIn: parent
        text: "Airplane Mode"
        onCheckedChanged: setAirplaneMode(checked)

        function setAirplaneMode(is_checked) {
            airplaneMode = is_checked;
            console.log("mode: " + airplaneMode)
        }
    }
}

这段代码展示了一个窗口，其中包含一个开关按钮（SwitchDelegate），用于切换“Airplane Mode”状态，并通过控制台输出当前状态。

4.2 运行效果

5. 委托控件与常规控件的区别

委托控件（Delegate）和常规控件的主要区别在于它们的用途和使用场景。

5.1 委托控件（Delegate）

委托控件主要用于列表控件（如ListView、TableView）或其他可重复显示数据的容器中，用于定义如何显示数据模型中的每一项。

特点：

它是动态实例化的，具体数量取决于数据模型的大小。例如，ListView中有100条数据，就会动态创建100个委托实例。
委托控件的生命周期由容器管理，当数据项滚动出视图时，委托实例可能会被销毁或复用。
委托控件通常会绑定到数据模型的字段（如modelData），用于动态显示数据。

5.2 常规控件（如Button、Switch等）

常规控件是独立的用户界面元素，用于构建用户界面的基本功能，如按钮、文本框、开关等。

特点：

它们是静态实例化的，数量和位置由开发者在QML文件中直接定义，不会动态生成。
生命周期由QML的上下文管理，不会像委托控件那样频繁销毁或复用。
通常不依赖于数据模型，而是直接用于实现用户交互功能。

总的来说，委托控件主要用于动态显示数据模型中的内容，而常规控件用于构建静态的用户界面元素。

总结

控件	适用场景	交互元素
ItemDelegate	通用可点击项	无
CheckDelegate	多选列表项	复选框（✓）
RadioDelegate	单选列表项	单选按钮⦿
SwitchDelegate	开关切换	滑动开关⇄