BlueRoseNote/07-Other/Qt/QtQuick/QtQuick基础笔记.md

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

单文件组件

单文件组件不需要加Component

使用Loader

  Item {
      Component {
          id: redSquare
          Rectangle { color: "red"; width: 10; height: 10 }
      }

      Loader { sourceComponent: redSquare }
      Loader { sourceComponent: redSquare; x: 10 }
  }

通过sourceComponent加载组件，source则可以通过url加载单文件组件。
在加载完成后(onLoaded)后可以通过Loader的item操作已经加载的组件
如果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});