Qt Quick快速入门笔记

Qt Quick快速入门笔记

• 基本的程序结构

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endifQGuiApplication app(argc, argv);QQmlApplicationEngine engine;const QUrl url(QStringLiteral("qrc:/main.qml"));QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,&app, [url](QObject *obj, const QUrl &objUrl) {if (!obj && url == objUrl)QCoreApplication::exit(-1);}, Qt::QueuedConnection);// 引擎加载qmlengine.load(url);return app.exec();
}

import QtQuick 2.12
import QtQuick.Window 2.12Window {width: 640height: 480visible: truetitle: qsTr("Hello World")
}

• Window

查看qml渲染效果

选中对应qml-> 顶部工具 ->外部-> Qt Quick -> Qt Qucik Preview

基础组件体验

Item

Item是Qt Quick所有可视元素的基类，定义了大部分属性，包括。x,y,z,width,height,anchors,按键响应等。可以将多个Item嵌套在一起形成复杂界面布局.z数值越大，越在图层上面

Item {focus: true// 回车按键响应Keys.onReturnPressed: console.log("Pressed return");
}

Rectangle

矩形区域,提供颜色、边框、圆角属性等

Rectangle {width: 100height: 100color: "red"// color: Qt.rgba(0.4,0.5,0.8,1)border.color: "black"border.width: 5radius: 10anchors.centerIn: parentComponent.onCompleted:{console.log("Rectangle Completed!")}}

anchors 锚布局

指定控件与其他控件之间的位置关系centerIn、left、right、top、bottom、horizontalCenter、verticalCenter等

Rectangle {id: testwidth: 100height: 100color: Qt.rgba(0.4,0.5,0.8,1)border.color: "black"border.width: 5radius: 10anchors.centerIn: parent}Button {// Button 左边靠着Rectangle 间隔20，顶部y持平anchors.left: test.rightanchors.leftMargin: 20anchors.top: test.toptext: "Ok"onClicked: console.log("click button")
}

Text

Text支持多种文本格式html、markdown

Text {text: "Hello World!"font.family: "Helvetica"color: "red"// 字体自适应fontSizeMode: Text.Fitfont.pixelSize:  50 // 字体最大尺寸minimumPixelSize: 12 // 字体最小尺寸
}

Label

Label
{id: usernamefont.pixelSize: 22font.italic: truecolor: "steelblue"text: "账号:"
}

TextField

TextField
{placeholderText: "请输入用户名"x: 10y: 10background: Rectangle{implicitHeight: 40implicitWidth: 200color: "red"border.color: "black"}// 密码样式echoMode: TextInput.Password
}

TextInput

TextInput与TextField类似

TextInput没有背景是透明的

TextField有背景色

MouseArea {anchors.fill: parentonClicked: () => {// 获取验证结果console.log("result = ", testValidator.acceptableInput)}
}TextInput
{id: testValidatorx: 10y: 10width: 100height: 30// 验证输入validator: IntValidator{ bottom: 100; top: 999}
}

TextEdit

MouseArea {anchors.fill: parentonClicked: () => {console.log("selectionStart = ", edit.selectionStart)console.log("selectionEnd = ", edit.selectionEnd)console.log("selectedText = ", edit.selectedText)// 搜索文本var tex = edit.getText(0, edit.text.length)console.log("tex = ", tex)let index = tex.indexOf("el")console.log("index = ", index)}
}TextEdit {id: editwidth: 240text: "<b>Hello</b> <i>World!</i>"font.family: "Helvetica"font.pointSize: 20color: "blue"focus: true// persistentSelection: true
}

TextArea

TextArea
{x: 10y: 20background: Rectangle{implicitWidth: 100implicitHeight: 80border.color: "blue"border.width: 2}placeholderText: "请输入多行文本"font.pixelSize: 18color: "red"
}// 滚动条
ScrollView {width: 100height: 200TextArea{x: 10y: 20background: Rectangle{implicitWidth: 100implicitHeight: 80border.color: "blue"border.width: 2}placeholderText: "请输入多行文本"font.pixelSize: 18color: "red"}
}

Button

Button系列包括：CheckBox(勾选框)、DelayButton(延时按钮)、RadioButton(单选框)、RoundButton(圆形按钮)、Switch(开关)、ToolButton

Button {anchors.centerIn: parenttext: "Ok"onClicked: console.log("click button")
}// buttonStyle案例
Component {id: mystyle// 自定义按钮外观ButtonStyle {background: Rectangle {implicitHeight: 45implicitWidth: 150radius: 10border.width: 2border.color: "red"//color: "blue"}}Button {text: "测试数据"style: mystyle}
}

CheckBox

// CheckBox 示例
Rectangle
{width: 150height: 100color: "yellow"border.color: "orange"border.width: 2CheckBox {x: 0y: 0text: "JavaScript"onCheckedChanged:{console.log("status = ", checked)}}CheckBox {x: 0y: 40text: "java"}
}// 互斥单选box
ButtonGroup
{id: testButtonGroupexclusive: true
}
CheckBox {ButtonGroup.group: testButtonGroupx: 0y: 0text: "JavaScript"
}CheckBox {ButtonGroup.group: testButtonGroupx: 0y: 40text: "java"
}

Repeater

Column
{spacing: 10width: 100height: 400anchors.centerIn: parentRepeater{id: testRepeatermodel: 5property var titles: ["ID:", "姓名", "班级"]property var values: ["02220455", "张三", "6班"]Row{spacing: 3Text {text: testRepeater.titles[index]color: "black"font: {bold: truepointSize: 16}}Text {text: testRepeater.values[index]color: "red"font: {bold: truepointSize: 16}}}}
}

GroupBox

GroupBox用于组织和分组其他控件的容器

Item {width: 300height: 200anchors.centerIn: parentGroupBox{title: "groupbox"anchors.centerIn: parentwidth: 250height: 180CheckBox {x: 0y: 0text: "JavaScript"}CheckBox {x: 0y: 40text: "java"}}
}

RadioButton

Item {width: 300height: 200anchors.centerIn: parentGroupBox{title: "groupbox"anchors.centerIn: parentwidth: 250height: 180RadioButton {x: 0y: 0text: "JavaScript"}RadioButton {x: 0y: 40text: "java"}}
}

Slider

Rectangle {width: 100height: 500Slider {id: sliderfrom: 1value: 25to: 100}MouseArea{anchors.fill: parentonClicked: () => {console.log("value = " , slider.value.toFixed(2))// position 范围是0-1console.log("position = " , slider.position)}}
}

Image

// 加载本地图片
Image {asynchronous: truesource: "qrc:/03.png"  // qrc中的图片资源
}// 充满父视图的背景
Image {anchors.fill: parentsource: ":/test/333.jpg"  // qrc中的图片资源}// 网络图片
Image {id: imageViewwidth: 100height: 40asynchronous: truesource: "http://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png"//fillMode: Image.PreserveAspectCroponStatusChanged:{console.log("imageView statu = ", imageView.status)}
}

BusyIndicator

// 加载器
// 图片还在加载的时候显示加载器
BusyIndicator {running: imageView.status === Image.Loadinganchors.centerIn: parent}Image {id: imageViewwidth: 100height: 40asynchronous: truesource: "http://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png"//fillMode: Image.PreserveAspectCroponStatusChanged:{console.log("imageView statu = ", imageView.status)}
}

FileDialog

FileDialog {id: fileDialogtitle: "Please choose a file"folder: shortcuts.homeonAccepted: {console.log("You chose: " + fileDialog.fileUrls)}onRejected: {console.log("Canceled")}
}Button
{text: "打开"onClicked: fileDialog.visible = true
}

ComboBox

ComboBox {// 默认选择currentIndex: 2displayText: "语言: " + currentTextmodel: ["java", "javaScript", "C++"]
}ComboBox {id: boxanchors.centerIn: parenttextRole: "key"valueRole: "value"model: ListModel{id: modelDataListElement {key: "first"; value: 1}ListElement {key: "second"; value: 2}ListElement {key: "third"; value: 3}}onActivated: (index) => {print("onActivated ", index)print("currentIndex ", currentIndex)print("currentValue ", currentValue)print("currentText ", currentText)}
}Button
{text: "删除"anchors.top: box.bottomanchors.topMargin: 10anchors.horizontalCenter: parent.horizontalCenteronClicked:{modelData.remove(box.currentIndex, 1)}
}

ListView

Rectangle {id: topViewwidth: 400height: 300color: "red"ScrollView{// 滚动条anchors.fill: parentListView{id: listViewanchors.fill: parentmodel:  ListModel{id: listDataListElement{name: "first"number: "123"}ListElement{name: "second"