Ronson讲Qt#18 在QML中使用JavaScript表达式和函数

墨蓝 2022-09-10 04:29 11阅读 0赞

**目录**

1.QML中哪些地方可以使用JavaScript表达式

2.在属性绑定时使用JavaScript

3.在信号响应时使用JavaScript

4.在独立的函数中使用JavaScript

5.在应用程序启动时使用JavaScript

--------------------

# 1.QML中哪些地方可以使用JavaScript表达式 #

*  （1）属性绑定：这些JavaScript表达式描述了QML对象属性之间的关系。当属性的任何依赖项发生变化时，也会根据指定的关系自动更新属性。
 *  （2）信号响应：只要QML对象发出相关信号，这些JavaScript语句就会自动被执行。
 *  （3）自定义函数：在QML对象体中定义的JavaScript函数成为该对象的方法，在需要的时候可以调用。
 *  （4）独立JavaScript资源(.js)文件：这些文件实际上是与QML文档分离的，但是它们可以被导入到QML文档中。在导入文件中定义的函数和变量可以在属性绑定、信号处理程序和自定义方法中使用。

# 2.在属性绑定时使用JavaScript #

如下示例通过判断pressed的值来给text属性赋值

Button{
    	x:100
    	y:200
    	width: 200
    	height: 100
    
    	//设置按钮文字
    	text: pressed ? qsTr("按钮被点击"):qsTr("按钮未被点击")
    }

![20210904230931762.gif][]

# 3.在信号响应时使用JavaScript #

响应按钮点击信号

Button{
    	id: mybtn
    	x:100
    	y:200
    	width: 200
    	height: 100
    
    	onClicked: {
    		mybtn.text = qsTr("onClicked");
    		console.log("按钮被点击")
    		}
    }

点击前

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16][]

点击后

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_14_color_FFFFFF_t_70_g_se_x_16][]

# 4.在独立的函数中使用JavaScript #

function getText(str) {
                if("ok" === str)
                {
                    return "hello";
                }
                else
                {
                    return "world";
                }
            }
    
    
        Button{
            id: mybtn
            x:100
            y:200
            width: 200
            height: 100
    
            text: getText("no")
          }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_11_color_FFFFFF_t_70_g_se_x_16][]

# 5.在应用程序启动时使用JavaScript #

有时需要在应用程序(或组件实例)启动时运行一些命令式代码。虽然很容易将启动脚本作为全局代码包含在外部脚本文件中，但这可能会有严重的限制，因为QML环境可能还没有完全建立起来。例如，有些对象可能还没有创建，有些属性绑定可能还没有建立。有关全局脚本代码的确切限制，请参阅JavaScript环境限制。

当实例化完成时，QML对象将发出Component.completed附加信号。响应Component.onCompleted的JavaScript代码在对象实例化之后将会运行。因此，编写应用程序启动代码的最佳位置是在顶级对象的Component.onCompleted处理程序中，因为当QML环境完全建立时，该对象会发出Component.completed。

ApplicationWindow {
        title: qsTr("Hello World")
        width: 640
        height: 480
        visible: true
    
        Component.onCompleted: {
            myLabel.text = qsTr("onCompleted");
            myBtn.text = qsTr("onCompleted");
        }
    
        Label{
            id:myLabel
            x:100
            y:50
            width: 50
            height: 50
        }
    
        Button{
            id: myBtn
            x:100
            y:200
            width: 200
            height: 100
        }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_12_color_FFFFFF_t_70_g_se_x_16][]

[20210904230931762.gif]: /images/20220829/95fda9e8b17542ab88faba661cbdaded.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3c8a14f1c0004040a13145be32be4778.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/2152dbc464f04df48990ddd280fbe661.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a221d9057f0a470e8a1a81051e728f91.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0ee926a79a07426d95d0fd6cc21c933d.png