Third generation software development_ComboBox
Article directory
- Third generation software development_ComboBox
-
- Project Introduction
- ComboBox
- actual use
Keywords:
Qt、
Qml、
ComboBox、
delegate、
Connections
Project introduction
Welcome to our QML & C++ project! This project combines the power of QML (Qt Meta-Object Language) and C++ to develop excellent user interfaces and high-performance backend logic.
In the project, we leveraged QML’s declarative syntax and visual design capabilities to create a modern user interface. Through intuitive coding and reusable components, we can quickly develop rich and diverse interface effects and animation effects. At the same time, we use QML’s powerful integration capabilities to easily integrate the underlying logic and data model of C++ into the front-end interface.
On the backend side, we use C++ to write high-performance algorithms, data processing, and computational logic. C++ is a powerful programming language that offers excellent performance and scalability. Our team is committed to optimizing code and reducing resource consumption to ensure that our projects run efficiently on a variety of platforms and devices.
Whether you’re interested in QML and C++ development or need us to build complex user interfaces and backend logic for you, we’re ready to support you. Please feel free to contact us and let’s build a modern, high-performance QML & C++ project together!
Important?
?The price of this column will increase after the third generation soft development update.
ComboBox
Today we will continue to follow the development process. Today we will deal with ComboBox. As usual, let’s take a look at the description of ComboBox in Qt’s help document. We still need to pay attention to the version here. I am using the Quick 2 version here.
? 
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 is a combination of button and popup list. It provides a way to present a list of options to the user in a way that takes up minimal screen space.
ComboBox populated with data model. The data model is typically a JavaScript array, ListModel, or integer, but other types of data models are also supported.
Qt ComboBox is a control used to display drop-down lists, which is part of the Qt framework. ComboBox provides the functionality where the user can select one or more options. The user can open the drop-down list and select an option by clicking the drop-down arrow.
The features of Qt ComboBox are as follows:
Editability: Users can enter content manually rather than just selecting options provided by a drop-down list.
Auto-complete: When the user inputs, ComboBox can automatically match and complete the input content based on the existing options.
Customizable: Users can customize the options in the drop-down list, including the display of text, icons, and other elements.
Signal and slot mechanism: ComboBox can trigger signals in response to user selections, and developers can implement specific logic by connecting these signals and other functions.
Supports multiple data types: ComboBox can not only display text options, but also other types of data, such as images, colors, etc.
Actual use
In fact, ComboBox is not difficult to use, the code is very simple, as follows
ComboBox {
width: 200
model: [ "Banana", "Apple", "Coconut" ]
}
The difficulty lies in the beautification by the artist. This small control has a lot of content that needs to be implemented. I searched Baidu for a long time and found that even if Baidu copied the content, it was unusable, so in the end I still studied the help documentation. Let’s take a look at the content in the help documentation.
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
}
}
}
So, I will modify my style based on this later. Take a look at my style as follows
? 
The code is here:
ComboBox
{
id:cpmbox_userType
anchors.top: parent.top
font.pointSize: 14
font.family: "Source Han Sans CN"
width: 590
height: 80
model: ["Administrator","User","Maintenance"]
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
}
}
}
Because there is business logic in mine, let’s focus on the style part here. In fact, if we have to compare it with the official Qt version, it is just to change the color and icon.
