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});
|
||
``` |