第三代软件开发_ComboBox
文章目录
- 第三代软件开发_ComboBox
- 项目介绍
- ComboBox
- 实际使用
关键字：
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官方的做一个比较，那就是改改颜色和图标而已。
