Qt

目录

QML 高阶

QML集成JavaScript

js代码可以被很容易地集成进QML，来提供用户界面逻辑、必要的控制及其他用途

QML集成js有两种方式

• (1) 直接在QML代码中写JavaScript函数，然后调用
• (2) 把JavaScript代码写在外部文件中，需要使用import语句导入.qml源文件中使用

调用JavaScript函数

Rectangle{
    id:rect
    width:60
    height:60
    gradient:Gradient{          // 渐变色
        GradientStop{position:0.0; color:"yellow"}
        GradientStop{position:0.33; color:"blue"}
        GradientStop{position:1.0; color:"aqua"}
    }
    function getRandomNumber(){ // 定义JavaScript函数。注意可能会reorder，最好定义在外面
        return Math.random()*360// 随机旋转的角度
    }
    Behavior on rotation {      // 行为动画
        RotationAnimation{
            direction: RotationAnimation.Clockwise
        }
    }
    MouseArea{
        anchors.fill:parent
        onClicked: rect.rotation = getRandomNumber()
    }
}

导入JS文件

• (1) 添加js文件：资源 -> qrc文件 -> / -> 添加新文件 -> 新建文件 -> 选择Qt下的JS File模板
• (2) 导入js文件：在qml文件中 import "myscript.js" as Logic（话说这个Logic是啥意思？）
• 规模较大的QML程序中，这样可以使界面与功能分离