Qt
大约 3 分钟
Qt
目录
Qt Quick Controls 1 开发
吐槽：用书太旧了，看得糊涂
Qt Quick Control 简概
简概
- Qt 5.1开始引用的QML模块，提供了大量类似 Qt Widgets 那样的可重用的UI组件，如按钮、菜单、对话框和视图等
- 这些组件能在不同的平台上模仿相应的本地行为
- 对比普通QML程序
- 需要导入Qt Quick Controls库
- 定义了一个标准的桌面应用程序窗口，由主应用窗口及附属组件类属性、主窗体和其他类型组件构成。用到的组件库都要import
项目创建
- 旧版本：文件 > 新建文件或项目 > 新建项目 > Application > Qt Quick Controls Application模板
- 现版本：没有了Qt Quick Controls项目模板的选项
项目结构（书本版本）
两个文件
main.qml
/* import部分 */
import QtQuick 2.7
import QtQuick.Controls // 版本1.5用不了，可以用2.12
import QtQuick.Dialogs 1.2 // 新版本会报错：QML module not found
/* 对象声明 */
ApplicationWindow{ // 【主应用窗口】
visible:true
width:640
height:480
title:qsTr("Hello World")
menuBar:MenuBar{ // 组件类属性：菜单栏
Menu{ // 菜单
title:qsTr("File")
MenuItem{ // 菜单项
text:qsTr("File")
onTriggered:console.log("Open action triggered");
}
MenuItem{
text:qsTr("Exit")
onTriggered:Qt.quit();
}
}
}
MainForm{ // 主窗体
anchors.fill:parent
button1.onClicked:messageDialog.show(qsTr("Button 1 pressed"))
button2.onClicked:messageDialog.show(qsTr("Button 2 pressed"))
}
MessageDialog{ // 其他组件：对话框
id:messageDialog
title:qsTr("May I have your attention, please?")
function show(caption){
messageDialog.text = caption;
messageDialog.open();
}
}
}
其中import版本详见官网
| Qt | QtQuick | QtQuick.Controls, QtQuick.Controls.Material, QtQuick.Controls.Universal, QtQuick.Templates | Qt.labs.calendar, Qt.labs.platform |
|---|---|---|---|
| 5.7 | 2.7 | 2.0 | 1.0 |
| 5.8 | 2.8 | 2.1 | 1.0 |
| 5.9 | 2.9 | 2.2 | 1.0 |
| 5.10 | 2.10 | 2.3 | 1.0 |
| 5.11 | 2.11 | 2.4 | 1.0 |
| 5.12 | 2.12 | 2.12 | 1.0 |
| ... | ... | ... | ... |
MainForm.ui.qml
import QtQuick 2.7
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3
Item{
width:640
height:480
/* 定义属性别名，在main.qml中引用这两个按钮控件 */
property alias button1: button1
property alias button2: button2
RowLayout{
anchors.centerIn:parent
Button{
id:button1
text:qsTr("Press Me 1")
}
Button{
id:button2
text:qsTr("Press Me 2")
}
}
}
项目结构（无错版本）
需要多import挺多的库，不知道什么库就F1一下，也不算太麻烦
Qt Quick 窗体应用程序结构
- ApplicationWinodws，主应用窗口
- 组件类属性，由ApplicationWinodws自带
- menuBar，菜单栏
- Menu，菜单
- MenuItem，菜单项
- Menu，菜单
- toolBar，工具栏
- statusBar，状态栏
- style，样式组件
- menuBar，菜单栏
- MainForm，主窗体
- 其他类型组件
- MessageDialog，消息对话框
完整界面的代码框架
Qt Quick 控件
简概
Qt Quick 控件
| 控件 | 名称 | 对应样式表 | 功能描述 |
|---|---|---|---|
| Button | 命令按钮 | ButtonStyle | 单击执行操作 |
| CheckBox | 复选框 | CheckBoxStyle | 可同时选中多个选项 |
| ComboBox | 组合框 | ComboBoxStyle | 提供下拉列表选项 |
| ExclusiveGroup | 互斥选项框 | —— | 仅能选择一个控件 |
| GroupBox | 组框 | —— | 用于定义空间组的容器 |
| Label | 标签 | —— | 界面文字提示 |
| RadioButton | 单选按钮 | RadioButtonStyle | 单击选中，通常分组使用，只能选其中一个选项 |
| TextArea | 文本区 | TextAreaStyle | 用于显示多行可编辑的格式化文本 |
| TextField | 文本框 | TextFieldStyle | 可供输入（显示）一行纯文本 |
| BusyIndicator | 忙指示器 | BusyIndicatorStyle | 用以表示程序正在执行某项操作（如载入图片），请用于耐心等待 |
| Calendar | 日历 | CalendarStyle | 提供日历功能供用户选择设定日期 |
| ProgressBar | 进度条 | ProgressBarStyle | 动态显式程序执行进度 |
| Slider | 滑动条 | SliderStyle | 提供水平或垂直方向的滑块，鼠标拖动可设置参数 |
| SpinBox | 数值旋转框 | SpinBoxStyle | 单击上下箭头可设置数值参数 |
| Switch | 开关 | SwitchStyle | 控制某项功能的开启/关闭，常用于移动智能手机的应用界面 |