QML中使用JavaScript的一些总结

最新推荐文章于 2024-07-28 23:12:46 发布
最新推荐文章于 2024-07-28 23:12:46 发布
阅读量9.6k 收藏 11
点赞数 1
分类专栏： Qt QtQuick/QML/QSS Qt开发 文章标签： QML JavaScript QtQuick createComponent createQmlObject
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010002704/article/details/40995797
版权
本文总结了QML中JavaScript的使用技巧，包括声明无状态库、导入其他脚本、启动时执行脚本、属性绑定与赋值、接收QML信号、动态创建与删除对象。详细介绍了Qt.createComponent()和Qt.createQmlObject()的区别和应用场景。
摘要由CSDN通过智能技术生成 




1、无状态的JavaScript库：
一些JavaScript文件的行为更像库文件，它们提供了一组无状态的辅助函数来提供输入和计算输出，但是从来不直接
操作QML组件实例。若每一个QML组件实例都有一个这些库的拷贝就会造成浪费，可以使用pragma来指明一个特定的文件
是一个没有状态的库：
.pragma library   //必须在所有JavaScript代码前
function factoral(a){
  
    a = parseInt(a);
    if(a <= 0){
  
        return 1;
    }else{
  
        return a * factorial(a - 1); //此处不能用arguments.callee(a - 1)
    }
}
 

2、如果一个JavaScript文件需要使用定义在其他JavaScript文件中的函数，可用Qt.include()函数来导入其他文件
 

中的所有函数到当前文件的命名空间中。
 

eg：
 

//factorial.js
 

 

import QtQuick 2.3
 

import "script.js" as MyScript
 

 

Item{
  
 

    width: 100; height: 100
 

 

    MouseArea{
  
 

 

        anchors.fill: parent
 

        onClicked: {
  
 

 

            MyScript.showCalculations(10)
 

            console.log("Call factorial() from QML: ", MyScript.factorial(10))
 

        }
 

    }
 

}
 

 

//script.js

                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  yangchuankai
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
QML | 在启动时运行JavaScript 代码、从JavaScript 动态创建QML对象

				
			

			

				

					m0_45463480的博客
				

				

					03-03
					
					153
					
				

			

		

		

			
				
QML | 在启动时运行JavaScript 代码、从JavaScript 动态创建QML对象

			
		

	



                

              
                



	

		

			

				
					
3.QML中的JavaScript（1）- JavaScript基础

				
			

			

				

					不会飞的纸飞机的博客
				

				

					07-08
					
					828
					
				

			

		

		

			
				
QML提供的JavaScript主机环境可以运行有效的标准JavaScript构造，如条件操作符、数组、变量设置、循环。除了标准的JavaScript属性之外，QML全局对象还包含许多帮助方法，这些方法可以简化构建ui并与QML环境进行交互。本篇文章将介绍一些JavaScript的基础语法。



1. JavaScript的语法
(1) 区分大小写
(2) 弱类型
(3) 断行
(4) 注释
(...

			
		

	



                


  
              

                


	

		

			

				
					
Qt Creator初识

					
最新发布

				
			

			

				

					天行健、君子以自强不息
				

				

					07-28
					
					1451
					
				

			

		

		

			
				
新建Qt项目、认识 Qt Creator 界面及项目文件解析

			
		

	





	

		

			

				
					
QML中 Webview 元素的runJavaScript() 函数的使用方法

				
			

			

				

					weixin_30505225的博客
				

				

					04-12
					
					728
					
				

			

		

		

			
				
QML 中的 WebView 的 runJavaScript() 函数

该函数能够通过函数名调用 HTML 文件中 位于标签 <script> </script> 之间的 JS 函数，能够附带参数 比如：

HTML 文件中 script 代码如下：


Qt 调用代码如下：
    WebView {
        id: webView
    ...

			
		

	



		

			
		



	

		

			

				
					
QML集成JavaScript

				
			

			

				

					qq_45303986的博客
				

				

					03-05
					
					899
					
				

			

		

		

			
				
大量的JavaScript代码需要写在一个独立的文件中。使用import 来导入到QML中。点击左上角新建文件，选择Qt中的JsFile。QML信号中的JavaScript。

			
		

	





	

		

			

				
					
QML之调用js文件

				
			

			

				

					weixin_44103773的博客
				

				

					08-27
					
					431
					
				

			

		

		

			
				
在QML文件的同一目录下建立名为factorial的js文件定义了方法datorial

在QML中以import “factorial.js” as MathFunctions引入s文件调用即可




			
		

	





	

		

			

				
					
qml 国际化中文英文转化

				
			

			

				

					03-16
				

			

		

		

			
				
接下来，我们需要创建一个`qsTr`函数的代理，以便在QML中使用翻译。在C++中，我们通常使用`tr()`函数，但在QML中，我们将使用`qqmlengine:contextObject`提供的`qsTr`。在你的主QML文件中，添加以下代码：  ```qml ...

			
		

	





	

		

			

				
					
qml要点总结（带例子），适合临阵磨枪

				
			

			

				

					exlink2012的专栏
				

				

					05-03
					
					952
					
				

			

		

		

			
				
在Qt框架中，QML（Qt Modeling Language）是一种描述性的编程语言，用于设计和构建用户界面。它允许开发者以简洁的方式定义用户界面的元素和布局，同时与C++代码进行高效的交互。：QML使用一种基于JSON的语法，定义各种用户界面组件，如按钮（Button）、标签（Label）和视图（View）等。这些元素可以嵌套，形成复杂的用户界面结构。：QML中的每个元素都有属性，如颜色、尺寸和位置等。

			
		

	





	

		

			

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

				
			

			

				

					Allen Roson
				

				

					09-04
					
					465
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
【QT教程】QML与JavaScript高级交互

				
			

			

				

					QT界面开发界面美化
				

				

					05-13
					
					1982
					
				

			

		

		

			
				
QML与JavaScript的融合QML与JavaScript高级交互QML与JavaScript的融合是Qt框架中的一个重要特性，它为开发者提供了一种高效的方式来创建富交互式的用户界面。本章将深入探讨QML与JavaScript的集成，展示如何利用这两种技术共同构建现代化的应用程序。QML与JavaScript的融合QML（Qt Meta-Language）是一种基于JavaScript的声明性语言，用于构建用户界面。它简洁、易读，并且允许开发者以声明性的方式描述用户界面元素及其行为。

			
		

	





	

		

			

				
					
QML | 集成JavaScript、JavaScript表达式

				
			

			

				

					m0_45463480的博客
				

				

					02-26
					
					265
					
				

			

		

		

			
				
QML | 集成JavaScript、JavaScript表达式

			
		

	





	

		

			

				
					
QML笔记(七)之QML调用js

				
			

			

				

					我是黄同学博客
				

				

					05-12
					
					2246
					
				

			

		

		

			
				
一.前言
在学习QML的过程中，楼主总感觉QML和JS更为洽和，有一种QML的壳，JS是内在的感觉，即是QML负责界面，js负责逻辑，于是就记录一下QML调用js的方式
二.调用举例
先构建一个测试界面，通过按钮来触发调用

1.调用当前qml中的js函数
1.1编写js函数

2.调用逻辑
 Button{
                id:btn_1
                text: "调用当前中的js函数"
                font.family: "微软雅黑"
    

			
		

	





	

		

			

				
					
QML学习之QML和JavaScript脚本

				
			

			

				

					kingzhou_的博客
				

				

					11-26
					
					597
					
				

			

		

		

			
				
qml中使用js

			
		

	





	

		

			

				
					
Qml 和外部js文件协同工作

				
			

			

				

					fduffyyg的博客
				

				

					02-24
					
					360
					
				

			

		

		

			
				
Qml 和外部js文件协同工作

			
		

	





	

		

			

				
					
QML概念及框架--继承JavaScript

				
			

			

				

					落尘飞
				

				

					05-21
					
					3585
					
				

			

		

		

			
				
QML推荐使用属性绑定和现有的QML元素来创建界面。为了允许执行更高级的行为，QML紧密集成了必要的JavaScript代码。QML中提供的JavaScript环境比在网页浏览器中的更严格。在QML中不可以添加或者修改JavaScript全局对象的成员，因为这样做可能会使一个没有经过声明的变量。在QML中会抛出一个异常，所以所有的局部变量都应该明确的声明。除了标准的JavaScript属性，在QM

			
		

	





	

		

			

				
					
qml和js相互调用实现

				
			

			

				

					quietbxj的博客
				

				

					05-11
					
					2120
					
				

			

		

		

			
				
1.qml调用js文件
a.编写js文件：
//自定义对象
function Person(){
  this.id=1;
  this.name="111";

  this.info=function(){
    console.log("id="+this.id+", name="+this.name)
  }
}

//定义方法
function info(p){
  console.log("name="+p.name);
}

b.qml进行调用：
import Q...

			
		

	





	

		

			

				
					
QML- JavaScript 表达式在 QML 中使用

				
			

			

				

					洪源兄
				

				

					03-13
					
					1602
					
				

			

		

		

			
				
QML提供的JavaScript 的运行宿主环境可以运行有效的标准JavaScript 功能，如条件运算符、数组、变量设置和循环。除了标准的JavaScript属性之外，QML Global对象还包含一些辅助方法，用于简化构建ui以及与QML环境交互的过程。QML提供的JavaScript环境比web浏览器中严格。例如，在QML中不能添加或修改JavaScript全局对象的成员。在常规的JavaScript中，有可能不小心使用了变量而没有声明它。在QML中，这将抛出异常，因此所有的局部变量都必须显式声明。

			
		

	





	

		

			

				
					
QML导入js文件

				
			

			

				

					ihatetheworld7的博客
				

				

					09-16
					
					1156
					
				

			

		

		

			
				
大致步骤如下：

（1）新建QML应用程序，项目名称为QMLloadjs。

（2）右击项目视图”资源“-》”qml.qrc"下的“/”节点，选择“添加新文件...”项，选择“Qt”下的“JSFile”模板。

（3）创建js文件

js文件代码示例如下


function getRandomNumber() {
    return Math.random()*360;
}

（4）右击项目视...

			
		

	





	

		

			

				
					
qml中tableview表格的使用

				
			

			

				

					06-28
				

			

		

		

			
				
### 回答1：
在QML中，可以使用TableView元素创建表格。使用model属性来指定表格的数据来源，其中的属性要使用TableModel类型。可以使用表头的visible属性和表头项来设置表格的表头。可以使用delegate属性和属性代理来设置表格中单元格的样式和内容。还可以使用resizeMode属性来设置表格的列宽自适应模式。最后，将TableView元素添加到适当的布局容器中来将表格放置在应用程序中。   

### 回答2：
QML是一种基于Qt框架的声明式语言，用于快速开发并实现用户界面。其中，TableView就是一种常见的控件，用于展示多行多列的数据。

TableView的用法与其他控件类似，可以在QML文件中直接创建一个TableView：

```
TableView {
    // 设置表格的宽度和高度
    width: 300
    height: 200
 
    // 设置表格的model（即数据），可以是Javascript中的数组或者ListModel等数据结构
    model: ListModel {
        ListElement { name: "Tom"; age: 20 }
        ListElement { name: "Lucy"; age: 18 }
        ListElement { name: "Kate"; age: 22 }
    }
 
    // 设置表格的行和列的数量、宽度
    TableViewColumn { role: "name"; title: "Name"; width: 100 }
    TableViewColumn { role: "age"; title: "Age"; width: 100 }
}
```

上述代码中，首先设置了TableView的宽度和高度，然后通过model属性设置了表格的数据。在这里，我们使用了ListModel，并将三个元素添加进去。接着，通过TableViewColumn设置了表格的列数以及每列进行展示的数据，例如第一列展示name，第二列展示age。

通过设置TableViewColumn还可以自定义每列的样式，例如：

```
TableViewColumn {
    role: "name"
    title: "Name"
    width: 100
    delegate: Rectangle {
        color: "lightblue"
        border.color: "black"
        width: parent.width
        height: parent.height
        Text {
            text: styleData.value
            anchors.centerIn: parent
        }
    }
}
```

上述代码中，我们添加了一个Rectangle作为每列的样式，并且使用了Text组件来实现每个单元格的内容展示。

当然，除了上述基本用法以外，TableView还支持各种事件响应、滚动条控制等功能，可根据不同的需求进一步定制。总之，QML的TableView控件在展示多行多列的数据时非常实用，方便快捷易用。   

### 回答3：
QML中的TableView有助于显示相对较大的表格数据。使用TableView时，您可以灵活地设置表格外观和排序规则。以下是如何使用TableView的一些示例。

首先，您需要导入QtQuick.Controls模块，以便可以使用TableView组件。

1. 基本用法

首先，在QML中创建一个TableView组件。然后，将表格列数据添加到model中。使用delegate设置每个单元格的外观。例如：


```
import QtQuick.Controls 1.4

TableView {
    TableViewColumn {
        role: "name"
        title: "Name"
    }
    
    TableViewColumn {
        role: "age"
        title: "Age"
    }

    model: ListModel {
        ListElement {
            name: "John"
            age: 30
        }
        
        ListElement {
            name: "Mary"
            age: 40
        }
    }
    
    delegate: Text {
        text: styleData.value
    } 
}
```

在上面的例子中，我们定义一个表格，其中包含两列数据：name和age。model中包含两个元素，每个元素都包含名称和年龄。最后，我们将每个单元格的值设置为Text实例的文本属性。

2. SortDelegate和SortIndicator

可以使用SortDelegate和SortIndicator组件来为表格添加排序功能。SortDelegate将包含在表格的表头中。SortIndicator将指示按列排序的方向。


```
import QtQuick.Controls 1.4

TableView {
    TableViewColumn {
        role: "name"
        title: "Name"
        sortIndicator: SortIndicator {
            column: 0
            ascending: true
        }
        
        sortDelegate: Item {
            width: 10
                
            Rectangle {
                anchors.fill: parent
                color: styleData.sortIndicatorColor
            }
        }
    }
    
    TableViewColumn {
        role: "age"
        title: "Age"
        sortIndicator: SortIndicator {
            column: 1
            ascending: true
        }

        sortDelegate: Item {
            width: 10
                
            Rectangle {
                anchors.fill: parent
                color: styleData.sortIndicatorColor
            }
        }
    }

    model: ListModel {
        ListElement {
            name: "John"
            age: 30
        }
        
        ListElement {
            name: "Mary"
            age: 40
        }
    }
    
    delegate: Text {
        text: styleData.value
    }
}
```

在上面的例子中，我们为每个列设置sortDelegate和sortIndicator，以便单击表头时实现升序和降序排序。

3. 带有扩展固定行的表格

也可以为表格添加一行或多行。 在这种情况下，表格将具有固定的标题行，而剩余的部分则可以滚动。


```
import QtQuick.Controls 1.4

TableView {
    TableViewColumn {
        role: "name"
        title: "Name"
    }
    
    TableViewColumn {
        role: "age"
        title: "Age"
    }

    TableViewColumn {
        role: "email"
        title: "Email"
    }    

    model: ListModel {
        ListElement {
            name: "John"
            age: 30
            email: "john@example.com"
        }
        
        ListElement {
            name: "Mary"
            age: 40
            email: "mary@example.com"
        }

        ListElement {
            name: "David"
            age: 35
            email: "david@example.com"
        }         

        ListElement {
            name: "Alice"
            age: 25
            email: "alice@example.com"
        }             
    }
    
    headerDelegate: Rectangle {
        height: 30
        color: "gray"
        Text {
            text: model ? model.roleNames()[styleData.column] : ""
            font.bold: true
            anchors.centerIn: parent
        }
    }
    
    delegate: Text {
        text: styleData.value
    } 
}
```

在此示例中，我们添加了一个headerDelegate，以显示在表格顶部的标题行。 headerDelegate设置了一个高度为30的矩形，其中包含TableColumn的标题。要添加固定行，我们将headerDelegate属性设置为Text，以便在表格顶部显示标题。

总结：

在QML中使用TableView可以轻松地显示表格数据。基本的TableView用法可以帮助您使用未排序或未分组的数据，但如果您需要更高级的功能，例如排序、固定行或多列滚动等，则可以使用SortDelegate和SortIndicator组件。最后，您还可以使用headerDelegate属性来为表格添加一个固定的标题行。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值