QML学习摘录 01:初识QML

QML概述

完整原文参照:https://github.com/cwc1987/QmlBook-In-Chinese
Qt Quick是Qt5用户界面技术的涵盖,包括:QML,JavaScript(动态脚本语言)和Qt C++(具有高度可移植性的C++库)。
QML是⼀种描述⽤户界⾯的声明式语⾔,Qt5中⼤量使⽤了这种声明⽤户界⾯的语⾔。它将⽤户界⾯分解成⼀些更⼩的元素,这些元素能够结合成⼀个组件。QML语⾔描述了⽤户界⾯元素的形状和⾏为。⽤户界⾯能够使⽤JavaScript来提供修饰,或者增加更加复杂的逻辑。从这个⾓度来看它遵循HTML-JavaScript模式,但QML是被设计⽤来描述⽤户界⾯的,⽽不是⽂本⽂档。

1. 基本元素

元素可以被分为可视化元素与⾮可视化元素。⼀个可视化元素(例如矩形框Rectangle)有着⼏何形状并且可以在屏幕上显⽰。⼀个⾮可视化元素(例如计时器Timer)提供了常⽤的功能,通常⽤于操作可视化元素。

1.1 基础元素对象

Item(基础元素对象)是所有可视化元素的基础对象,所有其它的可视化元素都继承⾃Item。它⾃⾝不会有任何绘制操作,但是定义了所有可视化元素共有的属性。

GroupProperties(属性)
Geometry(⼏何属性)x,y(坐标)定义了元素左上⾓的置,width,height(长和宽)定义元素的显⽰范围,z(堆叠次序)定义元素之间的重叠顺序。
Layouthandling (布局操作)anchors(锚定),包括左(left),右(right),上(top),下(bottom),⽔平与垂直居中(vertical center,horizontal center),与margins(间距)⼀起定义了元素与其它元素之间的位置关系。
Key handlikng(按键操作)附加属性key(按键)和keyNavigation(按键定位)属性来控制按键操作,处理输⼊焦点(focus)可⽤操作。
Transformation(转换)缩放(scale)和rotate(旋转)转换,通⽤的x,y,z属性列表转换(transform), 旋转基点设置(transformOrigin)
Visual(可视化)不透明度(opacity)控制透明度,visible(是否可见)控制元素是否显⽰,clip(裁剪)⽤来限制元素边界的绘制, smooth (平滑) ⽤来提⾼渲染质量。
State definition(状态定义states(状态列表属性)提供了元素当前所⽀持的状态列表,当前属性的改变也可以使⽤transitions(转变)属性列表来定义状态转变动画

Item(基本元素对象)通常被⽤来作为其它元素的容器使⽤,类似HTML语⾔中的div元素(div element)。

1.2 几个常用元素

通过示例代码了解:

  • Rectangle:矩形框元素,对Item的扩展,增加color 属性和支持边界颜色border.color
  • Image: 能够显⽰不同格式的图像(例如PNG,JPG,GIF,BMP)。source属性提供了图像⽂件的链接信息,fillMode属性能够控制元素对象的⼤⼩调整⾏为。
  • Text:显⽰⽂本需要使⽤Text元素。这个元素会使⽤给出的text(⽂本)与font(字体)来计算初始化的宽度与⾼度。可以使⽤字体属性组来(font property group)来改变当前的字体,例如font.family,font.pixelSize。
  • MouseArea:为了与不同的元素交互,你通常需要使⽤MouseArea元素。这是⼀个矩形的⾮可视化元素对象,你可以通过它来捕捉⿏标事件。当⽤户与可视化端⼝交时,mouseArea通常被⽤来与可视化元素对象⼀起执⾏命令。

示例代码:

import QtQuick 2.3
/* 基本元素 basic elements*/
Rectangle{//01 矩形框元素
    id:root
    width:800; height: 450
    color:"lightblue"
    border.color:"red"
    Image { //02 图片元素
        id: backgroundImage
        x:10;y:20
        width: root.width;height: root.height
        horizontalAlignment: Image.horizontalCenter;
        verticalAlignment: Image.verticalCenter
         /*fillMode: Image.Pad               //不拉伸
          fillMode: Image.Stretch            //拉伸
          fillMode: Image.PreserveAspectFit  //按比例缩放,不裁剪
          fillMode: Image.PreserveAspectCrop //按比例缩放,裁剪
          fillMode: Image.Tile               //图片在水平和垂直方向上平铺
          fillMode: Image.TileHorizontally   //在水平方向平铺,垂直方向拉伸
          fillMode: Image.TileVertically     //在水平方向拉伸,垂直方向平铺*/
        fillMode: Image.Pad
        source: "bg.png"
    }
    /*鼠标区域:
      Qt Quick 中输入处理和显示分开  */
    MouseArea{//04 鼠标区域元素
        id:mousearea
        width: parent.width
        height: parent.height
        onClicked: backgroundImage.visible = !backgroundImage.visible;

    }

    Text{//03 文本元素
        x:10;y:20
        width:root.width
        horizontalAlignment: Text.AlignHCenter;
        text:'Hello Qt Quick!'
    }
}

2. 组件

⼀个组件是⼀个可以重复使⽤的元素,QML提供⼏种不同的⽅法来创建组件。这里只介绍⼀种⽅法:⼀个⽂件创建一个组件。⼀个以⽂件为基础的组件在⽂件中创建了⼀个QML元素,并且将⽂件以元素类型来命名(例如Button.qml)。你可以像任何其它的QtQuick模块中使⽤元素⼀样来使⽤这个组件。下⾯的例⼦使⽤代码作⼀个Button(按钮)来使⽤。

示例代码:

import QtQuick 2.3
/*Button.qml 
组件 ComPontents 一个可以重复使用的元素,例如一个文件即为一个基础组件(Button.qml),可以像使用其他元素一样使用这个组件
*/
Rectangle{
    id:root
    //导出按钮属性
    property alias text: label.text
    signal clicked

    width:116; height: 30
    border.color: "white"
    color:"blue"
     Text{
        id:label
        anchors.centerIn: parent
        color:"red"
        text:"Start"
    }
    MouseArea{
        id:mousearea
        anchors.fill: parent
        onClicked: {
             root.clicked()
        }
    }
}

注意: 1. 我们在根级导出了⽂本和点击信号。通常我们命名根元素为root让引⽤更加⽅便。我们使⽤了QML的alias(别名)的功能,它可以将内部嵌套的QML元素的属性导出到外⾯使⽤。有⼀点很重要,只有根级目录的属性才能够被其它⽂件的组件访问。
2. 就个⼈⽽⾔,可以更进⼀步的使⽤基础元素对象(Item)作为根元素。这样可以防⽌⽤户改变我们设计的按钮的颜⾊,并且可以提供出更多相关控制的API。我们的目标是导出⼀个最⼩的API。实际上我们可以将根Rectangle替换为⼀个Item,然后将⼀个Rectangle嵌套在这个根元素(root item)就可以完成了。

3. 简单变换

转换操作改变了⼀个对象的⼏何状态。QML元素对象通常能够被平移,旋转,缩放。下⾯我们将讲解这些简单的操作。
- 位移:改变对象的x,y实现
- 旋转:改变rotation实现
- 缩放:改变scale实现

示例代码:

/*ClickableImage.qml文件
  组件:可点击的图片*/
Image{
    id:root
    signal clicked
    width: 100;height: 100
    fillMode: Image.Stretch
    MouseArea{
        anchors.fill: parent
        onClicked: {
             root.clicked()
        }
    }
}

import QtQuick 2.3
/*调用文件:
  实现简单的转换 Simple Transformation 平移,旋转,缩放*/
Item{
    id:root
    width:800; height: 450
    MouseArea{
        id:backgroundClicker
        anchors.fill: parent
        onClicked: { //点击空白区域,复位初始状态
            rocket1.x = 20
            rocket2.rotation = 0
            rocket3.rotation = 0
            rocket3.scale = 1.0
        }
    }
    ClickableImage{
        id:rocket1
        x:20;y:100
        source:"bg.png"
        onClicked: {
            x+=5//平移 
        }
    }
    ClickableImage{
        id:rocket2
        x:120;y:100
        source:"bg.png"
        onClicked: {
            rotation +=5//旋转
        }
    }
    ClickableImage{
        id:rocket3
        x:240;y:100
        source:"bg.png"
        onClicked: {//旋转+缩放
            rotation +=5
            scale -=0.05
        }
    }

}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值