天天看点
返回

QML入门

1.QML基本类型

QML Language

    bool true/false

    double/real 小数

    enumeration 枚举

    int 整数

    list QML对象数组

    string 字符串

    url 资源定位

    var Javascript 中的 var

Qt QML QML TYPES

basic types

    date 日期值

    point x,y

    rect  x,y,width,height

    size width,height

object types

   Date 提供日期函数

   Number 表示一个数值

   String  表示一个字符串

   Component 定义可重用组件 使用Loader加载

   QtObject 不可见元素，只有ID属性 基础的Qml类型

   Locale 本地特别的属性和格式化数据

   LoggingCategory  日志分类

   Binding 属性绑定

   Connections  信号槽连接

   Instantiator  动态创建Objects

   Timer  定时器

   Qt  全局对象 提供了枚举和全局函数

List And Model 

   DelegateModel

             模型代理 用于封装model和delegate

             1.当model为QAbstractItemModel的子类，获取和操作modelIndex

             2.和Package一起使用，提供multiple views。

             3.和DelegateModelGroup一起使用，为delegate item 提供排序和过滤

   DelegateModelGroup 

            提供了访问DelegateModel的delegate items的方法，同时能够排序和过滤这些items

            DelegateModel和DelegateModelGroup请看博客：https://blog.csdn.net/king523103/article/details/45339181

   ListElement

         ListModel中的数据元素项

   ListModel

        ListElement的容器

   ObjectModel

       可视化Item的模型

2.QML基础语法

导入模块

    import <ModuleIdentifier> <Version.Number> [as <Qualifier>]

    import QtQuick 2.0             import "./.../.../.." as ...

 注释

   //  

对象属性

      1.id  唯一属性  不能被重定义

      2.Property  定义一些属性

         property <propertyType> <propertyName> 

         property <propertyType> <propertyName> : <value>

      3.Signal 定义信号

         signal <signalName>[([<type> <parameter name>[, ...]])]

      4 Method 定义函数

        function <functionName>([<parameterName>[, ...]]) { <body> }

3.属性绑定

        1.JavaScript expression进行绑定

height: parent.height / 2

  height: Math.min(parent.width, parent.height)

  height: parent.height > 100 ? parent.height : parent.height/2

  height: {
      if (parent.height > 100)
          return parent.height
      else
          return parent.height / 2
  }

  height: someMethodThatReturnsHeight()

         2.Qt.binding()

Rectangle {
      width: 100
      height: width * 2

      focus: true
      Keys.onSpacePressed: {
          height = Qt.binding(function() { return width * 3 })
      }
  }

 4.信号与槽函数

           1.on<Signal>    onClicked函数触发clicked信号

           2.on<Property>Changed  onCurrentItemChanged 触发currentItemChanged信号

           3.Connection

import QtQuick 2.0

  Rectangle {
      id: rect
      width: 100; height: 100

      MouseArea {
          id: mouseArea
          anchors.fill: parent
      }

      Connections {
          target: mouseArea
          onClicked: {
              rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
          }
      }
  }

          4.触发自定义信号    

Rectangle {
      id: root

      signal activated(real xPosition, real yPosition)

      property int side: 100
      width: side; height: side

      MouseArea {
          anchors.fill: parent
          onPressed: root.activated(mouse.x, mouse.y)
      }
  }

          5.自定义信号连接自定义函数

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

            6.信号连接信号

Rectangle {
      id: forwarder
      width: 100; height: 100

      signal send()
      onSend: console.log("Send clicked")

      MouseArea {
          id: mousearea
          anchors.fill: parent
          onClicked: console.log("MouseArea clicked")
      }

      Component.onCompleted: {
          mousearea.clicked.connect(send)
      }
  }
QT Quick QML
上一篇: QML之Text元素
下一篇: QtQuick学习笔记之QML文件定义组件Component

继续阅读