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，菜单项
- toolBar，工具栏
- statusBar，状态栏
- style，样式组件
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	控制某项功能的开启/关闭，常用于移动智能手机的应用界面

Qt

Qt

目录

Qt Quick Controls 1 开发

Qt Quick Control 简概

简概

项目创建

项目结构（书本版本）

项目结构（无错版本）

Qt Quick 窗体应用程序结构

Qt Quick 控件

简概

基本控件

高级控件

样式定制

Qt Quick 对话框

Qt Quick 导航视图

Qt 5.5（Qt Quick Controls 1.4）新增组件