QML基础

最新推荐文章于 2024-07-12 16:03:46 发布
最新推荐文章于 2024-07-12 16:03:46 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： QML 文章标签： qml qt5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/styyzxjq2009/article/details/41598375
版权


QML 基本的属性类型


1.  QML 基本可视元素
Item
     QML中所有的可视项目都集成自Item
     默认属性children和resource
     属性opacity： 用来设置透明度，
     属性z： 表示兄弟项目的显示层次
     定位子项目和坐标映射： childAt( real x, real y ) 返回在点(x,y)处的子项目，如果没有项目则返回null
          mapFromItem( Item item, real x, real y ) 函数会将item坐标体系中的点（x,y )映射到该项目的坐标系统中，返回一个包含映射后的x和y属性的对象
          mapToItem( Item item, real x, real y ) 用法类似

Rectangle
      矩形框，类似窗口的概念

Text
     一个Text项目可以显示纯文本和富文本
  
TextEdit 文本编辑区或者叫输入框
     
TextInput 多行文本输入框
  

基本数据类型   
  * int、real、bool、string和color
  * action、date、enumeration、font
  * point、time、variant、vector3d


2. 属性更改通知
     当一个属性更改值时，会发送一个信号通知更改。要获取这个信号，就需要创建一个信号处理器
     格式："on<Property>Changed"
     如:
     Rectangle {
          width: 100; height: 100
          onWidthChanged: console.log("Width has changed to:",width)
          onColorChanged: console.log("Color has changed to:",color)
     }

3. 列表属性
     列表属性格式：
     Item {
          children: [
               Image { id: child1 },
               Text { id: child3 }
          ]
     
          Component.onCompleted: {
               console.log( "Width of child rectangle:", children[1].width )
     }
     Component.onCompleted会在组建创建完成时执行

4. 默认属性
     如：
     State {
          changes: [
          PropertyChanges { },
          PropertyChanges { }
          ]
     }
     由于changes是State类型的默认属性
     State {
          PropertyChanges { }
          PropertyChanges { }
     }


5. 分组属性
     Text {
          font.pixelSize: 12
          font.bold: true
     }
     也可以写成
     Text {
          font { pixelSize: 12; bold: true }
     }
     
6. 附加属性
     一些对象附加属性到其他的对象上。
     Component {
          id: myDelegate
          Text {
               text: "Hello"
               color: ListView.isCurrentItem ? "red" : "blue"
          }
     }
     ListView {
          delegate: myDelegate
     }
     ListView元素会附加ListView.isCurrentItem属性到它的每个delegate(委托)上

    另一个例子就是Keys元素附加属性到任何可见的Item上来处理键盘按下：
     Item {
          focus：true
          Keys.onSelectPressed: console.log("Selected")
     }


QML在组建中添加属性

[default] property <type> <name>[: defaultValue]
例子：
     import QtQuick 1.0
     Item {
          id: item
     
          property string currentImage: "default-image.png"
          width: 200; height: 200
          Image { source: item.currentImage }

     }

支持的属性类型： int、bool、double、real、string、url、color、date、variant

属性别名： 
例子：
     import QtQuick 1.0
     Item {
          id: item
     
          property alias currentImage: image
          width: 200; height: 200
          Image {  id: image }

     }

//application.qml
     import QtQuick 1.0
     ImageViewer {
          id: viewer
     
          currentImage.source: ".../logo.png"
          currentImage.width: width
          currentImage.height: height
          currentImage。fileMode: Image.Tile
     
           Text { text: currentImage.source }
     }


在组建中添加函数和信号

1. 添加函数
     function <name>([<parameter name>[,...]]) { <body> }
ex:
     Rectangle {
          id: rect
     
          width: 100; height:100

          function say(text) {
               console.log("You said: "+text);
          }

          MouseArea {
               anchors.fill: parent
               onClicked: rect.say("Mouse clicked")
          }
     }

2. 添加信号
     Item {
          signal clicked
          signal hovered()
          signal performAction(string action,variant actionArgument)
     }

     对应信号处理器
          onClicked     
          onHovered
          onPerformAction

ex:
   
//Button.qml 

import QtQuick 1.0

Rectangle {
     id: rect

     signal buttonClicked
     width: 100;height 100
     
     MouseArea {
          anchors.fill:parent
          onClicked: rect.buttonClicked()
     }
}



     
//application.qml 

import QtQuick 1.0

Button {
     width: 100; height: 100
     onButtonClicked: console.log("Mouse was clicked")
}



风之水2003
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML基础类型之enumeration
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-27 673
1.命名枚举值。 枚举类型引用命名的枚举值。 每个命名的值都可以称为。。 例如，Text类型具有AlignRight枚举值： Text { horizontalAlignment: Text.AlignRight } 2.枚举类型是C ++枚举类型的表示。 在QML本身中不可能引用枚举类型。 相反，当从QML代码引用枚举值时，可以使用int或var类型。 For example: import QtQuick 2.0 Item { property int enumValue: te
qt qml使用高德地图的WebAPI获取静态地图
08-03
qt qml使用高德地图的WebAPI获取静态地图，见博客 http://blog.csdn.net/d759378563/article/details/76576550
QML中map的用法
u013351233的博客
08-23 6940
var keys = []; for(var p in dect){ if(dect.hasOwnProperty(p)) keys.push(p); } // console.log(keys); ...
使用Qt的QML开发一个简单的地图应用
最新发布
sssfasla的博客
07-12 1356
最近的QT项目中需要做一个简单的地图应用，功能不太复杂只需要通过鼠标点击获取点击位置的经纬度，查找了很多资料和方案，本着简单方便才是硬道理的原则，最后决定使用qml来实现。QML是Qt提供的一种声明性语言，用于快速创建用户界面。是QML中的一个地图插件，它支持离线地图的加载，干好满足我的要求。下面是我在使用这个工具开发简单地图应用的过程的一些问题。
PyQt (PySide) 各种查找 QML 子对象 (children) 方法大全
Likianta 的博客
04-30 2137
对 Grid 对象获取 children """e.g. qml snippet: Grid { objectName: "my_grid" Button { text: "Button 1" } Button { text: "Button 2" } Button { text: "Button 3" } } """ # engine = QQmlApplica...
QML键值对（类似QMap）
风斜夜的博客
12-17 4555
需要在qml里使用像QMap这样的容器，本来想用js里的Map对象，发现qml没有这个类型。 后面使用了下面的方式来实现： //初始化 var taskMap = {} // var taskMap = {0:'a',1:'b'} //添加键值对 taskMap[1] = 1 taskMap[2] = 'b' taskMap['c'] = 3 //删除 delete taskMap[1]...
QML 中的默认属性
qyvlik的专栏
04-17 3311
QML 中的默认属性
QML 语言基础
jfdfhh的博客
11-05 223
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
QML入门
Y03977211367Y的博客
12-31 494
QML是一种用户界面标记语言，文件格式以.qml结尾。语法类似CSS，同时支持JavaScript逻辑控制，并且可以与C++进行交互。 import 在QML文件中可能存在一个或多个导入。导入可以是以下任一项： 已注册并具有版本号和命名空间的类型。 一个包含类型定义的相对目录。 一个JavaScript文件。 导入JavaScript文件时必须对其进行限定，以便可以访问它提供的属性和方法。 各种导入的通用形式如下： import Namespace VersionMajor.VersionMin
qml基础内容以及相关源码
11-15
**qml基础内容以及相关源码** Qt Quick (简称QML)是Qt框架的一部分，它提供了一种声明式语言，用于创建美观且响应迅速的用户界面。QML通过使用JSON风格的语法来描述UI元素和它们的交互，使得开发人员可以专注于界面...
课题-QML基础-QML国际化(中文示例).pdf
11-27
例如，`lupdate qml/displayChinese/main.qml -ts qml.ts`会生成一个`qml.ts`文件，包含QML文件中的待翻译字符串。再使用`lupdate displayChinese.pro -ts app.ts`生成应用程序级别的`app.ts`文件。 接下来，使用Qt...
qml基础知识（对话框、checkbox、下拉框）
06-27
本篇文章将深入探讨QML中的基础元素，包括对话框（Dialogs）、复选框（CheckBox）以及下拉框（ComboBox），帮助你更好地理解和应用这些组件。 首先，我们来谈谈对话框（Dialogs）。对话框是QML中一种常见的用户交互...
Qml 子元素列表
baidu_41388533的博客
05-26 928
Qml 子元素列表 Itme 类 属性 children : list<Item> resources : list<Object> children属性包含此项的可视子元素列表。resources属性包含希望按名称引用的非可视资源。 在添加子项目或资源时，通常没有必要引用这些属性，因为默认的数据属性会自动将子对象分配给适当的子项目和资源属性。 【注】list QML Basic Type 列表类型引用QML对象列表。 访问列表值的方式类似于访问JavaScri
qml-子元素对象
LIJIWEI0611的博客
03-20 516
Item 属性 children 属性包含此项的可视子项列表。 resources 属性包含要按名称引用的非可视资源。 添加子项或资源时，通常不需要引用这些属性，因为默认数据属性会根据需要自动将子对象分配给子项和资源属性。 有关详细信息，请参阅数据文档。 注意：获取的是可视直接子项，非递归 import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.12 .
QML中的default默认属性
龚建波
10-04 2011
1.认识default属性 QML的default属性是我们一直在用，但一开始却没注意的机制（我理解为语法糖）。先看文档说明： An object definition can have a single default property. A default property is the property to which a value is assigned if an object is declared within another object's definition without
Qt C++中 Map 和 List 转换到 QML 中使用
hw5230的博客
03-10 858
C++中的 list 和 map 使用非常方便， 对应到 Qt 中的类型为 QList 和 QMap，在和 QML 交互的时候，可能也想用到这两个类型，或者说将 C++中的参数和 QML 中的参数进行相互转换使用，在 QML 中用到的是 JavaScript 语法，那么，今天来看一下如何在 C++和 QML 之前来对这两个类型进行相互转换使用。
扩展QML-默认属性示例
aggs1990的专栏
05-29 203
Extending QML - Default Property Example 扩展QML-默认属性示例 Default Property. 默认属性。 This example builds on: 此示例基于： Extending QML - Inheritance and Coercion Example Extending QML - Object and List Property Types Example Extending QML - Adding Types Exampl
QML中类似QMap的用法
luoyayun361的专栏
06-25 4225
示例：property var delegateComponentMap: { "ItemDelegate": itemDelegateComponent, "SwipeDelegate": swipeDelegateComponent， "CheckDelegate": checkDelegateComponent, "RadioDelegat
QML.关于子控件访问父控件函数的作用域问题
m0_59770307的博客
07-05 298
证明了无论在多少层级下，子对象永远能访问父对象的function，或者说是父对象的function全局可用。在之前，我们已经发现了父控件无法访问到子控件的属性。那么子控件是否能访问到父控件的函数呢？然后将child对象实例在main.qml，child2实例在child中。在main.qml中，我们定义了一个函数function用来打印。
QML基础入门：元素与功能详解
QML中的`Rectangle`是一个基础可视化项，它代表一个具有特定宽度和高度、填充特定颜色的矩形。例如，`import Qt4.7 Rectangle { width: 200; height: 200; color: "blue"; }`这段代码定义了一个200x200像素的蓝色...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值