Init
This commit is contained in:
163
07-Other/Qt/QtQuick/QtQuick基础笔记.md
Normal file
163
07-Other/Qt/QtQuick/QtQuick基础笔记.md
Normal file
@@ -0,0 +1,163 @@
|
||||
## color属性
|
||||
可以使用"blue"、"#RRGGBB"、Qt.rgba()来赋值。具体可以参考QML Basic Type:color
|
||||
|
||||
## 手机的横屏模式与竖屏模式
|
||||
需要修改AndroidManifest.xml中的activity元素的android:screenOrientation属性为"landscape"或"portrait"
|
||||
## Item组件
|
||||
1. Item是所有可视元素的基类。
|
||||
2. 其中一个用处就是可以分组其他可见图元。
|
||||
3. clip属性如果为true可以裁剪子组件。
|
||||
4. 通过附加属性Keys来处理按键。详情：Keys QML Type
|
||||
|
||||
## Text
|
||||
可以使用HTML修饰过的文本
|
||||
|
||||
## Image
|
||||
1. 如何设置了width与height，图片可能会被拉伸，此时fillMode属性就可以设置填充模式了。
|
||||
2. Image默认是阻塞式加载，可以通过把asynchronous设为true开启异步模式。可以先显示一个加载图标，当status的值为Image.Ready时再显示。
|
||||
3. source属性是url，网络模式会默认开启异步加载，此时Image的Progress（0。0~1.0）、status都会实时更新。
|
||||
```
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.2
|
||||
import QtQuick.Controls.Styles 1.4
|
||||
|
||||
ApplicationWindow {
|
||||
visible: true
|
||||
width: 640
|
||||
height: 480
|
||||
title: qsTr("App")
|
||||
|
||||
BusyIndicator{
|
||||
id:busy;
|
||||
running: true;
|
||||
anchors.centerIn: parent;
|
||||
z:2
|
||||
}
|
||||
|
||||
Text{
|
||||
id:stateLabel;
|
||||
visible:false;
|
||||
anchors.centerIn: parent;
|
||||
z:3
|
||||
}
|
||||
|
||||
Image{
|
||||
id:imageViewer;
|
||||
asynchronous: true;
|
||||
cache:false;
|
||||
anchors.fill: parent;
|
||||
fillMode: Image.PreserveAspectFit;
|
||||
onStatusChanged: {
|
||||
if(imageViewer.status===Image.Loading){
|
||||
busy.running=true;
|
||||
stateLabel.visible=false;
|
||||
}else if (imageViewer.status===Image.Ready){
|
||||
busy.running=false;
|
||||
}else if(imageViewer.status===Image.Error){
|
||||
busy.running=false;
|
||||
stateLabel.visible=true;
|
||||
stateLabel.text="error";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
imageViewer.source="http://img.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Object类是所有ECMAScript类的基类，它具有以下属性：
|
||||
1. constructor：指向创建对象的函数，对于Object类，它指向object()函数。
|
||||
2. prototype：对该对象原型类型的引用，可以在运行时改变原型。
|
||||
3. hasOwnPropety：是否拥有某个属性
|
||||
4. isPrototypeOf：判断对象是否为另一个对象的原型。
|
||||
5. ptopertyIsEnumerable：判断给定的杏树是否可以用for in进行枚举。
|
||||
6. toString()
|
||||
7. valueOf()，返回最适合该对象的原始值。
|
||||
|
||||
## Qt对象
|
||||
Qt是QML提供的一个全局宿主对象，整合了常用的属性、方法与枚举类型。
|
||||
Qt.application 应用的全局状态
|
||||
## Connections
|
||||
适用对象：
|
||||
1. 你需要将多个对象连接到同一个QML信号上。
|
||||
2. 你需要在发出信号的对象的作用域之外来建立连接
|
||||
3. c++导出对象
|
||||
```
|
||||
Connections{
|
||||
target:area;//目标控件（它的信号触发）
|
||||
on<Signal>:function or code block;//执行代码
|
||||
}
|
||||
```
|
||||
|
||||
## 连接信号的方式
|
||||
```
|
||||
Rectangle {
|
||||
id: relay
|
||||
|
||||
signal messageReceived(string person, string notice)
|
||||
|
||||
//可以连接信号或者函数
|
||||
Component.onCompleted: {
|
||||
relay.messageReceived.connect(sendToPost)
|
||||
relay.messageReceived.connect(sendToTelegraph)
|
||||
relay.messageReceived.connect(sendToEmail)
|
||||
relay.messageReceived("Tom", "Happy Birthday")
|
||||
}
|
||||
|
||||
function sendToPost(person, notice) {
|
||||
console.log("Sending to post: " + person + ", " + notice)
|
||||
}
|
||||
function sendToTelegraph(person, notice) {
|
||||
console.log("Sending to telegraph: " + person + ", " + notice)
|
||||
}
|
||||
function sendToEmail(person, notice) {
|
||||
console.log("Sending to email: " + person + ", " + notice)
|
||||
}
|
||||
}
|
||||
```
|
||||
## component
|
||||
### 嵌入式组件：
|
||||
```
|
||||
Component {
|
||||
id: redSquare
|
||||
|
||||
Rectangle {
|
||||
color: "red"
|
||||
width: 10
|
||||
height: 10
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
只能包含一个顶层item与id<br>
|
||||
### 单文件组件
|
||||
单文件组件不需要加Component
|
||||
#### 使用Loader
|
||||
```
|
||||
Item {
|
||||
Component {
|
||||
id: redSquare
|
||||
Rectangle { color: "red"; width: 10; height: 10 }
|
||||
}
|
||||
|
||||
Loader { sourceComponent: redSquare }
|
||||
Loader { sourceComponent: redSquare; x: 10 }
|
||||
}
|
||||
```
|
||||
通过sourceComponent加载组件，source则可以通过url加载单文件组件。<br>
|
||||
在加载完成后(onLoaded)后可以通过Loader的item操作已经加载的组件<br>
|
||||
如果Loader加载的Item想要处理按键事件，那么久必须将Loader对象的focus属性设置为true，同时也需要对它加载的Item的accepted属性设置为true，以免已经被吃掉的事件再传递给Loader。
|
||||
### ECMAScript中动态创建对象
|
||||
```
|
||||
var newObject = Qt.createQmlObject('import QtQuick 2.0; Rectangle {color: "red"; width: 20; height: 20}',
|
||||
parentItem,
|
||||
"dynamicSnippet1");
|
||||
```
|
||||
或者
|
||||
```
|
||||
var component = Qt.createComponent("Button.qml");
|
||||
if (component.status == Component.Ready)
|
||||
component.createObject(parent, {"x": 100, "y": 100});
|
||||
```
|
||||
Reference in New Issue
Block a user