第三代软件开发_ComboBox

[toc]

关键字： Qt、Qml、ComboBox、delegate、Connections

项目介绍

欢迎来到我们的 QML & C++ 项目！这个项目结合了 QML（Qt Meta-Object Language）和 C++ 的强大功能，旨在开发出色的用户界面和高性能的后端逻辑。

在项目中，我们利用 QML 的声明式语法和可视化设计能力创建出现代化的用户界面。通过直观的编码和可重用的组件，我们能够迅速开发出丰富多样的界面效果和动画效果。同时，我们利用 QML 强大的集成能力，轻松将 C++ 的底层逻辑和数据模型集成到前端界面中。

在后端方面，我们使用 C++ 编写高性能的算法、数据处理和计算逻辑。C++ 是一种强大的编程语言，能够提供卓越的性能和可扩展性。我们的团队致力于优化代码，减少资源消耗，以确保我们的项目在各种平台和设备上都能够高效运行。

无论您是对 QML 和 C++ 开发感兴趣，还是需要我们为您构建复杂的用户界面和后端逻辑，我们都随时准备为您提供支持。请随时联系我们，让我们一同打造现代化、高性能的 QML & C++ 项目！

重要说明☝

☀该专栏在第三代软开发更新完将涨价

ComboBox

今天咱接着跟着开发流程走，今天整ComboBox，老规矩，咱还是看看Qt的帮助文档对ComboBox的描述,这里还是要注意版本啊，我这里用的是Quick 2的版本

​

ComboBox is a combined button and popup list. It provides a means of presenting a list of options to the user in a way that takes up the minimum amount of screen space.
ComboBox is populated with a data model. The data model is commonly a JavaScript array, a ListModel or an integer, but other types of data models are also supported.

ComboBox 是按钮和弹出列表的组合。 它提供了一种以占用最小屏幕空间的方式向用户呈现选项列表的方法。
ComboBox 填充有数据模型。 数据模型通常是 JavaScript 数组、ListModel 或整数，但也支持其他类型的数据模型。

Qt ComboBox是一个用于显示下拉列表的控件，它是Qt框架中的一部分。ComboBox提供了用户可以选择一个或多个选项的功能。用户可以通过点击下拉箭头，打开下拉列表并选择其中的一个选项。

Qt ComboBox的特点如下：

可编辑性：用户可以手动输入内容，而不仅仅是选择下拉列表提供的选项。

自动完成：当用户输入时，ComboBox可以根据已有的选项自动匹配并补全输入内容。

可自定义：用户可以自定义下拉列表中的选项，包括文本、图标和其他元素的显示。

信号槽机制：ComboBox可以触发信号来响应用户的选择，开发者可以通过连接这些信号和其他功能实现特定的逻辑。

支持多种数据类型：ComboBox不仅可以显示文本选项，还可以显示其他类型的数据，例如图像、颜色等。

实际使用

其实ComboBox使用不难，代码很简单，如下

 ComboBox {
     width: 200
     model: [ "Banana", "Apple", "Coconut" ]
 }

难点在于美工小姐姐的美化，这一个小小的控件，有很多内容需要实现，我百度了好久，发现吧百度到内容复制进去，都是没法用的，所以最终我还是研究帮助文档。我们看看帮助文档中的内容够

 import QtQuick 2.12
 import QtQuick.Controls 2.12

 ComboBox {
     id: control
     model: ["First", "Second", "Third"]

     delegate: ItemDelegate {
         width: control.width
         contentItem: Text {
             text: modelData
             color: "#21be2b"
             font: control.font
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
         }
         highlighted: control.highlightedIndex === index
     }

     indicator: Canvas {
         id: canvas
         x: control.width - width - control.rightPadding
         y: control.topPadding + (control.availableHeight - height) / 2
         width: 12
         height: 8
         contextType: "2d"

         Connections {
             target: control
             function onPressedChanged() { canvas.requestPaint(); }
         }

         onPaint: {
             context.reset();
             context.moveTo(0, 0);
             context.lineTo(width, 0);
             context.lineTo(width / 2, height);
             context.closePath();
             context.fillStyle = control.pressed ? "#17a81a" : "#21be2b";
             context.fill();
         }
     }

     contentItem: Text {
         leftPadding: 0
         rightPadding: control.indicator.width + control.spacing

         text: control.displayText
         font: control.font
         color: control.pressed ? "#17a81a" : "#21be2b"
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }

     background: Rectangle {
         implicitWidth: 120
         implicitHeight: 40
         border.color: control.pressed ? "#17a81a" : "#21be2b"
         border.width: control.visualFocus ? 2 : 1
         radius: 2
     }

     popup: Popup {
         y: control.height - 1
         width: control.width
         implicitHeight: contentItem.implicitHeight
         padding: 1

         contentItem: ListView {
             clip: true
             implicitHeight: contentHeight
             model: control.popup.visible ? control.delegateModel : null
             currentIndex: control.highlightedIndex

             ScrollIndicator.vertical: ScrollIndicator { }
         }

         background: Rectangle {
             border.color: "#21be2b"
             radius: 2
         }
     }
 }

所以，我后面就是根据这个来修改我样式的，看看我的样式如下

​

代码在这里：

ComboBox
{
    id:cpmbox_userType
    anchors.top: parent.top
    font.pointSize: 14
    font.family: "Source Han Sans CN"
    width: 590
    height: 80
    model: ["管理员","用户","维护"]
    currentIndex: UserManagement.userNumber > 2 ? 1 : 0
    delegate: ItemDelegate {
        width: cpmbox_userType.width
        contentItem: Text {
            text: modelData
            color: cpmbox_userType.highlightedIndex === index ? "#
            font.pixelSize: 33
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            color: "#00000000"
        }
        highlighted: cpmbox_userType.highlightedIndex === index
    }
    background: Rectangle
    {
        color:"#00FFFFFF"
        border.width:1
        border.color:"#666666"
        radius:8
    }
    indicator: Rectangle
    {
        color:"#00FF0000"
        anchors.right:parent.right
        width:parent.height
        height:parent.height
        Image {
            width: 22
            height: 12
            anchors.centerIn: parent
            source: "qrc:/Login/T_Resource/T_Image/Login/drop_down
        }
    }
    contentItem: Text {
        anchors.left: parent.left
        anchors.leftMargin: 20
        text: parent.currentText
        color: "#FFFFFF"
        font.pixelSize: 33
        font.family: "Source Han Sans CN"
        elide: Text.ElideRight
        verticalAlignment: Text.AlignVCenter
    }
    popup: Popup {
        y: cpmbox_userType.height - 1
        width: cpmbox_userType.width
        implicitHeight: listview.contentHeight
        padding: 1
        contentItem: ListView {
            id: listview
            clip: true
            spacing: 20
            model: cpmbox_userType.popup.visible ? cpmbox_userType
            currentIndex: cpmbox_userType.highlightedIndex
        }
        background: Rectangle {
            anchors.fill: parent
            color: "#161616"
            border.color: "#36ABDE"
            border.width: 2
            radius: 8
        }
    }
}

因为我的里面有业务逻辑，所以这里咱们重点看样式部分就好了，其实如果非要和Qt官方的做一个比较，那就是改改颜色和图标而已。