QT入门笔记(二)qml设计和引入js

QML

从 Qt 4.7 开始，Qt 引入了一种声明式脚本语言，称为 QML（Qt Meta Language 或者 Qt Modeling Language），作为 C++ 语言的一种替代。

widget

Qt4 时代的主流就是传统部件（或叫控件）编程，所用的语言一般是 C++。 Qt5 诞生之时，正是手机移动设备蓬勃发展的时候，而传统的 C++ 部件编写的界面对手机应用程序非常方便，比如手机屏幕显示随意翻转， 这在传统桌面程序里基本遇不到，谁会将 22 寸显示器翻过来转过去呢。

为了适应手机移动应用开发， Qt5 将 QML 脚本编程提到与传统 C++ 部件编程相同的高度，力推 QML 界面编程，当然 QML 主要用于手机移动应用程序。 QML 包含大量使用手机移动设备的功能模块，比如基本部件（QtQuick 模块）、GPS 定位、渲染特效、蓝牙、NFC、WebkKit 等等。

QML 类似于网页设计的 HTML，是一种标记语言，我们可以借助 CSS 对它进行美化，也可以借助 JavaScript 进行交互。有 Web 开发经验的读者学习 QML 将非常轻松。

使用 QML 开发界面主要有以下几个优点：

• QML 非常灵活，可以做出非常炫酷的效果，例如 QQ、360、迅雷等都不在话下。
• QML 是标记语言，见名知意，非常容易编写和阅读，大大提高了开发和维护效率。
• QML 界面简洁大气，有很多动画，适合移动端。
• 不同平台下的 QML 使用相同的渲染机制，界面效果一致，不会随操作系统的不同而变化。

组件和定义函数

import QtQuick 2.15    //带入模块
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
//qml非常方便的和C++交互
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //不可见的元素
    Column{
        //可视元素,实例对象
        Button {
            id: btn
            text:'btn jie'
            onClicked: showAddResult(add(10, 20))
                //console.log(add(10, 20))
                //console.log('btn click')
                //text = 'hello '

            //基本上属性的有一个属性变化的信号
            onTextChanged: {
                //console.log('new test', text)
            }

            function add(num1, num2){
                return num1 + num2
            }
            function showAddResult(result){
                console.log(result)
            }

        }
        //标签
        Label {
            text: btn.text
            color: 'red'
            font.pointSize: 20
        }
        //滑条，
        Slider {
            from: 1
            value: 25
            to: 100
        }
        //矩阵
        Rectangle{
            width: 100
            height: 100
            color: 'orange'
        }
    }
}

引入JS

demo1： 引入Js实现加法、减法

JieJs.js

/*
  这是一个js文件，它可以执行js代码，他的引擎应该是QV4。它只能支持的标准是es5
*/
//类的构造函数
function OperatorNumber(number) {
    this.number = number

    this.add = function(num){
        return number + num
    }

    this.sub = function(num){
        return number - num
    }
}

main.qml

import QtQuick 2.15    //带入模块
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie //导入js文件
//qml非常方便的和C++交互
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    //不可见的元素
    Column{
        //可视元素,实例对象
        Button {
            id: btn
            text:'btn jie'
            //槽函数
            onClicked: {
                let oper = new Jie.OperatorNumber(88)
                console.log('add', oper.add(10))
                console.log('add', oper.sub(10))
            }
            //基本上属性的有一个属性变化的信号
            onTextChanged: {
                //console.log('new test', text)
            }
        }
    }
}

demo2: 点击按钮修改颜色

ps：Qt.rgba(rgb.red / 255, rgb.green /255, rgb.blue/255, 1.0) 中传入的颜色值需要小于1

JieJs.js

/*
  这是一个js文件，它可以执行js代码，他的引擎应该是QV4。它只能支持的标准是es5
  es7
*/

//类的构造函数
function OperatorNumber(number) {
    this.number = number

    this.add = function(num){
        return number + num
    }

    this.sub = function(num){
        return number - num
    }
}

function getRangeRadom(max){
    return Math.floor(Math.random() * max)
}

function getColorRandom(){
    let red = getRangeRadom(256)
    let green = getRangeRadom(256)
    let blue = getRangeRadom(256)

    return {red:red/255, green:green/255, blue:blue/255}
}

main.qml

import QtQuick 2.15    //带入模块
import QtQuick.Window 2.15
import QtQuick.Controls 2.15  //命名空间
import './JieJs.js' as Jie //导入js文件
//qml非常方便的和C++交互
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    // Z,设置同级项的堆叠顺序。缺省情况下，堆叠顺序为0。最大的在上面
    //按钮1
    Button{
        id: btn
        x: 0
        y: 0
        z: 1
        text: 'click1'
        onClicked: {
            let rgb = Jie.getColorRandom()
            console.log(JSON.stringify(rgb))
            rect.color =Qt.rgba(rgb.red / 255, rgb.green /255, rgb.blue/255, 1.0)
        }
    }
    Rectangle {
        id: rect
        x:btn.x
        y:btn.y + btn.height
        width: 200
        height: 200
        border.width: 1
        border.color: 'orange'

    }
}

demo3: 拖拽框

import QtQuick 2.15    //带入模块
import QtQuick.Window 2.15
import QtQuick.Controls 2.15  //命名空间
import './JieJs.js' as Jie //导入js文件
//qml非常方便的和C++交互
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    // Z,设置同级项的堆叠顺序。缺省情况下，堆叠顺序为0。最大的在上面
    //按钮1
    Button{
        id: btn
        x: 0
        y: 0
        z: 1
        text: 'click1'
        onClicked: {
            let rgb = Jie.getColorRandom()
            console.log(JSON.stringify(rgb))
            rect.color =Qt.rgba(rgb.red , rgb.green , rgb.blue, 1.0)
        }
        //鼠标区域
        MouseArea{
            anchors.fill :parent //parent
            drag.target: btn //目标是btn
        }
    }
    Rectangle {
        id: rect
        x:btn.x
        y:btn.y + btn.height
        width: 200
        height: 200
        border.width: 1
        border.color: 'orange'
    }
}

color rgba(real red, real green, real blue, real alpha)

js:ECMAScript 6.0（以下简称 ES6)