当前位置：首页 > news >正文

开源 C++ QT QML 开发（三）常用控件

news 2025/10/5 7:27:18

文章的目的为了记录使用QT QML开发学习的经历。开发流程和要点有些记忆模糊，赶紧记录，防止忘记。

基础控件

文本相关

Text {  // 文本显示text: "Hello World"font.pixelSize: 16
}TextInput {  // 单行文本输入text: "可编辑文本"
}TextEdit {  // 多行文本编辑text: "多行文本编辑区域"
}

按钮类

Button {text: "普通按钮"onClicked: console.log("点击")
}RoundButton {  // 圆形按钮text: "圆形"
}ToolButton {  // 工具按钮text: "工具"
}CheckBox {  // 复选框text: "选项"checked: true
}RadioButton {  // 单选框text: "单选选项"
}

输入控件

TextField {  // 文本输入框placeholderText: "请输入文本"
}TextArea {  // 多行文本区域placeholderText: "多行文本"
}SpinBox {  // 数字调节框from: 0to: 100value: 50
}Slider {  // 滑块from: 0to: 100value: 50
}

选择控件

ComboBox {  // 下拉框model: ["选项1", "选项2", "选项3"]
}Switch {  // 开关checked: true
}

布局和容器控件

布局控件

Row {  // 水平布局Button { text: "按钮1" }Button { text: "按钮2" }
}Column {  // 垂直布局Button { text: "按钮1" }Button { text: "按钮2" }
}Grid {  // 网格布局columns: 2Button { text: "按钮1" }Button { text: "按钮2" }
}

容器控件

Page {  // 页面容器header: Label { text: "标题" }// 内容
}GroupBox {  // 分组框title: "设置组"// 子控件
}ScrollView {  // 滚动视图TextArea {text: "长文本内容..."}
}TabBar {  // 标签栏TabButton { text: "标签1" }TabButton { text: "标签2" }
}SwipeView {  // 滑动视图Page { /* 页面1 */ }Page { /* 页面2 */ }
}

高级控件

对话框

Dialog {  // 对话框title: "提示"standardButtons: Dialog.Ok | Dialog.CancelonAccepted: console.log("确认")
}Menu {  // 菜单MenuItem { text: "选项1" }MenuItem { text: "选项2" }
}

进度指示

ProgressBar {  // 进度条from: 0to: 100value: 75
}BusyIndicator {  // 忙碌指示器running: true
}

其他实用控件

DelayButton {  // 延迟按钮text: "长按生效"
}RangeSlider {  // 范围滑块from: 0to: 100first.value: 25second.value: 75
}Tumbler {  // 滚轮选择器model: 10
}

二、组合代码

main.qml文件代码用于演示控件组合的效果

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14ApplicationWindow {id: windowvisible: truewidth: 800height: 600title: "Qt 5.14 QML 控件示例"color: "#f8f9fa"  // 浅灰色背景// 标签页控件// 标签页控件TabBar {id: tabBarwidth: parent.widthbackground: Rectangle {color: "#ffffff"border.color: "#dee2e6"}TabButton {text: "基础控件"background: Rectangle {color: tabBar.currentIndex === 0 ? "#007bff" : "transparent"radius: 5}contentItem: Text {text: parent.textcolor: tabBar.currentIndex === 0 ? "white" : "#007bff"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.bold: true}}TabButton {text: "输入控件"background: Rectangle {color: tabBar.currentIndex === 1 ? "#28a745" : "transparent"radius: 5}contentItem: Text {text: parent.textcolor: tabBar.currentIndex === 1 ? "white" : "#28a745"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.bold: true}}TabButton {text: "布局容器"background: Rectangle {color: tabBar.currentIndex === 2 ? "#dc3545" : "transparent"radius: 5}contentItem: Text {text: parent.textcolor: tabBar.currentIndex === 2 ? "white" : "#dc3545"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.bold: true}}TabButton {text: "高级控件"background: Rectangle {color: tabBar.currentIndex === 3 ? "#ffc107" : "transparent"radius: 5}contentItem: Text {text: parent.textcolor: tabBar.currentIndex === 3 ? "black" : "#ffc107"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterfont.bold: true}}}// 滑动视图SwipeView {id: swipeViewanchors.top: tabBar.bottomanchors.bottom: parent.bottomwidth: parent.widthcurrentIndex: tabBar.currentIndex// 第一页：基础控件ScrollView {id: page1clip: trueColumnLayout {width: parent.widthspacing: 10Text {text: "🎨 彩色文本显示"font.pixelSize: 18color: "#d32f2f"font.bold: true}// 修复：使用 Rectangle 包装 TextInput 来添加背景Rectangle {Layout.fillWidth: trueheight: 40color: "#f1f8e9"border.color: "#c5e1a5"radius: 4TextInput {anchors.fill: parentanchors.margins: 8text: "💬 单行文本输入"font.pixelSize: 14color: "#2e7d32"verticalAlignment: TextInput.AlignVCenter}}// 修复：TextEdit 使用 Rectangle 包装Rectangle {Layout.fillWidth: trueLayout.preferredHeight: 80color: "#fff3e0"border.color: "#ffcc80"radius: 4TextEdit {anchors.fill: parentanchors.margins: 8text: "📄 多行文本编辑区域...\n可以输入多行彩色文本内容..."font.pixelSize: 14color: "#5d4037"wrapMode: TextEdit.Wrap}}// 按钮控件GroupBox {title: "🔘 按钮控件"Layout.fillWidth: truebackground: Rectangle {color: "#f3e5f5"border.color: "#ce93d8"radius: 8}label: Label {text: parent.titlecolor: "#7b1fa2"font.bold: truepadding: 5}RowLayout {width: parent.widthspacing: 5Button {text: "普通按钮"onClicked: console.log("普通按钮点击")background: Rectangle {color: parent.down ? "#0056b3" : "#007bff"radius: 6}contentItem: Text {text: parent.textcolor: "white"font.bold: truehorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}RoundButton {text: "⭕"onClicked: console.log("圆形按钮点击")background: Rectangle {color: parent.down ? "#c62828" : "#f44336"radius: width / 2}contentItem: Text {text: parent.textcolor: "white"font.bold: truehorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}ToolButton {text: "🛠️"onClicked: console.log("工具按钮点击")background: Rectangle {color: parent.down ? "#388e3c" : "#4caf50"radius: 4}contentItem: Text {text: parent.textcolor: "white"font.bold: truehorizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}}}}// 选择控件GroupBox {title: "选择控件"Layout.fillWidth: trueColumnLayout {width: parent.widthspacing: 5RowLayout {CheckBox {id: checkBox1text: "选项1"checked: true}CheckBox {text: "选项2"}}ColumnLayout {RadioButton {text: "单选选项1"checked: true}RadioButton {text: "单选选项2"}RadioButton {text: "单选选项3"}}}}}}// 第二页：输入控件ScrollView {id: page2clip: trueColumnLayout {width: page2.widthspacing: 15anchors.margins: 15GroupBox {title: "⌨️ 文本输入"Layout.fillWidth: truebackground: Rectangle {color: "#e0f2f1"border.color: "#80cbc4"radius: 8}label: Label {text: parent.titlecolor: "#00796b"font.bold: truepadding: 5}ColumnLayout {width: parent.widthspacing: 10TextField {placeholderText: "👤 请输入用户名..."Layout.fillWidth: truecolor: "#00695c"background: Rectangle {color: "#ffffff"border.color: parent.activeFocus ? "#26a69a" : "#b2dfdb"radius: 6}}TextArea {placeholderText: "📝 请输入描述文本..."Layout.fillWidth: trueLayout.preferredHeight: 100color: "#004d40"background: Rectangle {color: "#ffffff"border.color: parent.activeFocus ? "#26a69a" : "#b2dfdb"radius: 6}}}}GroupBox {title: "🎚️ 数值输入"Layout.fillWidth: truebackground: Rectangle {color: "#fff3e0"border.color: "#ffcc80"radius: 8}label: Label {text: parent.titlecolor: "#ef6c00"font.bold: truepadding: 5}ColumnLayout {width: parent.widthspacing: 15SpinBox {from: 0to: 100value: 50Layout.fillWidth: truebackground: Rectangle {color: "#fff8e1"border.color: "#ffd54f"radius: 4}}Slider {id: sliderfrom: 0to: 100value: 50Layout.fillWidth: truebackground: Rectangle {color: "#ffecb3"radius: 4height: 6}handle: Rectangle {x: slider.visualPosition * (slider.width - width)y: (slider.height - height) / 2width: 20height: 20radius: 10color: slider.pressed ? "#ff6d00" : "#ff9800"border.color: "#e65100"}}Label {text: "📊 当前值: " + slider.valuecolor: "#e65100"font.bold: true}}}GroupBox {title: "⚙️ 其他输入"Layout.fillWidth: truebackground: Rectangle {color: "#fce4ec"border.color: "#f48fb1"radius: 8}label: Label {text: parent.titlecolor: "#c2185b"font.bold: truepadding: 5}ColumnLayout {width: parent.widthspacing: 15ComboBox {model: ["🎨 红色主题", "🌊 蓝色主题", "🌿 绿色主题", "🌞 黄色主题"]currentIndex: 0Layout.fillWidth: truebackground: Rectangle {color: "#ffffff"border.color: "#f48fb1"radius: 6}}RowLayout {Switch {id: switchControlchecked: truecontentItem: Text {text: "夜间模式 🌙"color: "#c2185b"font.bold: true}}Label {text: switchControl.checked ? "🌙 夜间模式开启" : "☀️ 日间模式开启"color: switchControl.checked ? "#7b1fa2" : "#f57c00"font.bold: true}}}}}}// 第三页：布局容器ScrollView {id: page3clip: trueColumnLayout {width: page3.widthspacing: 10anchors.margins:  10GroupBox {title: "布局示例"Layout.fillWidth: trueColumnLayout {width: parent.widthspacing: 10// 水平布局示例GroupBox {title: "水平布局 (Row)"Layout.fillWidth: trueRow {spacing: 5Button { text: "按钮1" }Button { text: "按钮2" }Button { text: "按钮3" }}}// 垂直布局示例GroupBox {title: "垂直布局 (Column)"Layout.fillWidth: trueColumn {spacing: 5Button { text: "按钮A" }Button { text: "按钮B" }Button { text: "按钮C" }}}// 网格布局示例GroupBox {title: "网格布局 (Grid)"Layout.fillWidth: trueGrid {columns: 3spacing: 5Button { text: "1" }Button { text: "2" }Button { text: "3" }Button { text: "4" }Button { text: "5" }Button { text: "6" }}}}}GroupBox {title: "Frame 容器"Layout.fillWidth: trueFrame {width: parent.widthheight: 60Label {anchors.centerIn: parenttext: "这是一个 Frame 容器"font.bold: true}}}}}// 第四页：高级控件ScrollView {id: page4clip: trueColumnLayout {width: page4.widthspacing: 10anchors.margins:  10GroupBox {title: "进度指示器"Layout.fillWidth: trueColumnLayout {width: parent.widthspacing: 10ProgressBar {value: 0.6Layout.fillWidth: true}BusyIndicator {running: trueLayout.alignment: Qt.AlignHCenter}}}GroupBox {title: "特殊按钮"Layout.fillWidth: trueColumnLayout {width: parent.widthspacing: 10DelayButton {text: "长按生效"delay: 1000Layout.fillWidth: true}Button {text: "打开菜单"onClicked: menu.open()Menu {id: menuy: parent.heightMenuItem {text: "菜单项1"onTriggered: console.log("菜单1点击")}MenuItem {text: "菜单项2"onTriggered: console.log("菜单2点击")}MenuSeparator {}MenuItem {text: "菜单项3"onTriggered: console.log("菜单3点击")}}}}}GroupBox {title: "范围控件"Layout.fillWidth: trueColumnLayout {width: parent.widthspacing: 10RangeSlider {id: rangeSliderfrom: 0to: 100first.value: 25second.value: 75Layout.fillWidth: true}Label {text: "范围: " + rangeSlider.first.value + " - " + rangeSlider.second.value}Tumbler {model: 10Layout.alignment: Qt.AlignHCenter}}}GroupBox {title: "对话框示例"Layout.fillWidth: trueButton {text: "打开对话框"onClicked: dialog.open()Dialog {id: dialogtitle: "提示对话框"modal: truestandardButtons: Dialog.Ok | Dialog.CancelLabel {text: "这是一个对话框示例内容"padding: 10}onAccepted: console.log("对话框确认")onRejected: console.log("对话框取消")}}}}}}// 状态栏footer: Label {text: "Qt 5.14 QML 控件演示 - 当前页面: " + (tabBar.currentIndex + 1)padding: 5horizontalAlignment: Text.AlignHCenterbackground: Rectangle {color: "#f0f0f0"}}
}

三、效果演示

控件组合的效果，按下基础控件中的按钮，应用程序输出将会打印事件。