QML输入控件：ComboBox（3）

目录

示例1:  表单数据收集

要点说明

运行效果

示例2:  性能优化

要点说明

运行效果

示例3: 自定义显示文本

运行效果

示例4: 部分选项禁用

要点说明

运行效果

总结

---

接上篇，继续介绍ComboBox示例，包括：表单数据收集、性能优化（加载大量列表）、自定义文本、部分选项禁用等。

相关阅读：

QML输入控件：ComboBox（1）-优快云博客

QML输入控件：ComboBox（2）-优快云博客

---

示例1:  表单数据收集

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("表单数据收集")

    // 表单数据对象 - 使用QtObject确保属性绑定
    QtObject {
        id: formData
        property string name: ""
        property string gender: ""
        property string city: ""
        property string district: ""
    }

    Grid {
        id: formGrid
        columns: 2
        spacing: 10
        padding: 20
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        Text { text: "姓名:" }
        TextField {
            id: nameField
            width: 200
            onTextChanged: formData.name = text
        }

        Text { text: "性别:" }
        ComboBox {
            id: genderCombo
            width: 200
            model: ["男", "女"]
            onCurrentTextChanged: formData.gender = currentText
            // 初始化选择
            Component.onCompleted: currentIndex = 0
        }

        Text { text: "城市:" }
        ComboBox {
            id: cityCombo
            width: 200
            model: ListModel {
                ListElement { text: "北京" }
                ListElement { text: "上海" }
                ListElement { text: "广州" }
            }
            textRole: "text"
            onCurrentTextChanged: {
                formData.city = currentText
                formData.district = "" // 清空区县选择
                districtCombo.currentIndex = -1 // 重置区县选择
            }
            // 初始化选择
            Component.onCompleted: currentIndex = 0
        }

        Text { text: "区县:" }
        ComboBox {
            id: districtCombo
            width: 200
            enabled: cityCombo.currentIndex >= 0
            model: {
                if (cityCombo.currentIndex === 0) return ["朝阳区", "海淀区", "西城区"]
                if (cityCombo.currentIndex === 1) return ["浦东新区", "徐汇区", "静安区"]
                if (cityCombo.currentIndex === 2) return ["天河区", "越秀区", "海珠区"]
                return []
            }
            onCurrentTextChanged: formData.district = currentText
            // 初始化选择
            Component.onCompleted: if (model.length > 0) currentIndex = 0
        }
    }

    Button {
        anchors {
            bottom: resultText.top
            horizontalCenter: parent.horizontalCenter
            margins: 20
        }
        text: "提交表单"
        onClicked: {
            // 创建临时对象确保包含所有最新数据
            var dataToPrint = {
                "name": formData.name,
                "gender": formData.gender,
                "city": formData.city,
                "district": formData.district
            }

            // 打印JSON格式的表单数据
            console.log("表单数据:", JSON.stringify(dataToPrint, null, 2))

            // 显示在界面上
            resultText.text = JSON.stringify(dataToPrint, null, 2)
        }
    }

    Text {
        id: resultText
        text: "提交后将显示JSON格式数据..."
        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            margins: 20
        }
        height: 100
    }
}

这段代码用于创建一个表单数据收集窗口。它包含姓名输入框、性别下拉选择框、城市下拉选择框和区县下拉选择框，通过QtObject对象绑定数据，并在提交按钮点击时将表单数据以JSON格式打印到控制台并在界面上显示。

要点说明

• 使用QtObject定义了一个formData对象，用于存储表单数据。
• 表单布局通过Grid实现，包含姓名、性别、城市和区县的输入或选择控件。
• 城市和区县的下拉框通过model动态绑定数据，城市选择变化时会清空区县选择并更新区县选项。
• 提交按钮点击时，将表单数据收集到一个临时对象中，并以JSON格式打印到控制台和显示在界面上。

运行效果

---

示例2:  性能优化

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("性能优化 - 大型列表")

    // 大型列表
    ComboBox {
        id: largeDataCombo
        width: 250

        popup: Popup {
            y: largeDataCombo.height
            width: largeDataCombo.width
            implicitHeight: Math.min(contentHeight, 400)
            padding: 1

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: largeDataCombo.popup.visible ? largeDataCombo.delegateModel : null
                currentIndex: largeDataCombo.highlightedIndex
                snapMode: ListView.SnapToItem
                boundsBehavior: Flickable.StopAtBounds

                // 使用延迟创建提高性能
                delegate: ItemDelegate {
                    width: parent.width
                    text: modelData
                    highlighted: largeDataCombo.highlightedIndex === index
                }

                ScrollBar.vertical: ScrollBar { }
            }
        }

        // 模拟大数据集
        Component.onCompleted: {
            var hugeModel = []
            for (var i = 0; i < 10000; i++) {
                hugeModel.push("选项 " + (i + 1))
            }
            largeDataCombo.model = hugeModel
        }
    }
}

这段代码展示了一个性能优化的QML界面，包含一个处理大数据集的ComboBox，通过延迟创建和分页显示提高性能。

要点说明

• 使用ComboBox展示大数据集，通过Component.onCompleted动态生成包含10000个选项的模型。
• 在ComboBox的popup中使用ListView作为contentItem，通过设置model为largeDataCombo.delegateModel实现延迟创建，避免一次性加载所有数据。
• ListView的implicitHeight动态计算，限制最大高度为400，避免弹出窗口过大。
• 使用ItemDelegate作为ListView的delegate，通过highlighted属性高亮显示当前选中项。
• 添加了垂直滚动条ScrollBar.vertical，便于用户滚动查看大量选项。

运行效果

 

---

示例3: 自定义显示文本

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("自定义显示文本")

    ComboBox {
        anchors.centerIn: parent

        model: [
            { id: 1, name: "苹果", price: 5.8 },
            { id: 2, name: "香蕉", price: 3.2 }
        ]
        textRole: "name"

        displayText: currentText + (currentIndex >= 0 ? " - ¥" + model[currentIndex].price : "")
    }
}

这段代码创建了一个居中显示的 ComboBox，其选项包含水果名称和价格，并在选中时显示"名称 - 价格"的组合格式（如"苹果 - ¥5.8"）。 

运行效果

 

示例4: 部分选项禁用

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("部分选项禁用")

    ComboBox {
        anchors.centerIn: parent
        id: disableItemsCombo
        model: ["可用选项", "禁用选项", "另一个可用选项"]

        delegate: ItemDelegate {
            width: parent.width
            text: modelData
            enabled: modelData !== "禁用选项"
            opacity: enabled ? 1 : 0.5
        }
    }
}

这段代码实现了一个包含部分禁用选项的下拉菜单界面。

要点说明

• 使用ComboBox创建下拉菜单，包含三个选项。
• 通过delegate设置每个选项的显示样式，其中“禁用选项”被禁用且透明度降低为0.5，其他选项正常显示并可选。

运行效果

---

总结

本文主要展示了ComboBox控件如何用于表单数据收集、性能优化（加载大型列表）、自定义显示文本、部分选项禁用。

完整工程：https://gitcode.com/u011186532/qml_demo/tree/main/qml_combobox