163 lines
5.1 KiB
Markdown
163 lines
5.1 KiB
Markdown
|
## 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});
|
|||
|
|
```
|