三、QML开发之qml 语言基础

news/2023/6/9 18:20:46

QML就是用来编辑和生成Quick界面的语言,所以在开发界面之前一定要了解基础的QML语言基础知识,接下来从介绍qml语法如何编写,变量和属性 对象的简要说明,通过本节的学习能够达到简单的加载图片 和设置lable标签存放位置,简单的buton点击事件的处理等;

3.1 对象 表达式 属性

  • QML 文件就是后缀是.qml结尾的文件,下面用一个小例子来介绍具体的内容书写;

功能很简单就是把一张照片放到一个定义的界面中央

import QtQuick 2.12  //代码库的引用方式和python的方式很像 quick理解为事件处理类吧
import QtQuick.Window 2.12   //理解为控件样式类吧
import QtQuick.VirtualKeyboard 2.4Window {  //定义主窗口对象id: window    //窗口的id 一个对象唯一的 在表达式中可以直接引用id来进行处理事件调用visible: true   //是否隐藏width: 640    //界面的大小设置height: 480title: qsTr("load photo")  //head 展示字体Rectangle { //定义窗口对象width: 640    //界面的大小设置height: 480Image{  //定义图片对象source:"qrc:river.jpg"  //加载图片资源anchors.centerIn:parent //位置定位在 parent 也就是Rectangle 的屏幕中央}}}

解释:

Rectangle { //定义窗口对象 也就是控件的名称 例如table window mouse Image 等等

id :window //这几个都是对象的属性 id,后续关联信号的时候会用得到 长 宽

width: 640 //界面的大小设置

height: 480

Image{ //定义图片对象 一个对象里面可以放其他的对象 简单的说就像一个面板

source:"qrc:river.jpg" //加载图片资源

anchors.centerIn:parent //位置定位在 parent 也就是Rectangle 的屏幕中央

}

}

属性的类型:int 、real、 double、 bool、string、color、list、font、等

  • 如何在工程里面加载图片资源,首先需要创建一个resource文件

  • 点击工程名-〉add new -〉 Qt -〉Qt Resource File-〉 取名字-》完成

  • 点击 刚才新建 的photo.qrc文件 右击-》添加文件 -》选择本地的图片

  • 编译运行如下图:

3.2信号处理器

  • 信号处理器起始等同于Qt的信号槽,用来处理定义信号发射和接受的函数;

Rectangle{width :320height:480Button{id: quick;  text:"退出"anchors.left:parent.left; //anchors 可以理解为布局管理器 用来设置控件显示的位置 后续会专门讲anchors.lefMargin 4anchors.bottonMargin 4anchors.bottom:parent.bottomonClicked:{        //这个就是定义了Button 点击事件的处理函数 当点击后进入函数体中执行Qt.quit()g关闭窗口看书  Qt是全局类 用来处理 按键 布局属性设置  系统调用接口等Qt.quit()}
}
}

3.3列表属性

  • 所谓的列表属性就是多个控件的包含关系

Item{

children:[

Image{},

Text{},

Button{}

]

}

  • Item 对象有一个children对象,children对象里面包含了三个对象,访问对象可以用 []形式给list对象赋值

length 属性提供list内的元素个数,下面代码就是访问子节点的方式;

    Item{children:[Text{ id:1},Text{id:2}]}Component.onCompleted:{  //当控件加载完成之后就会触发改事件for(var i=0;i〈children.length;i++){  //遍历成员console.log(“the name is ”,i,":",children[i].text)  //打印输出每个成员的文本名字}}

3.3总结:

本节讲述了如何使用文本编辑一个对象,在对象里面设置一些属性,以及如何编写控件点击事件的函数绑定和调用。

下一节就开始对每一个对象例如Window Rectangle Button等具体的样式修改和属性介绍,敬请期待下一个 谢谢大家的阅读。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-4562096.html

如若内容造成侵权/违法违规/事实不符,请联系郑州代理记账网进行投诉反馈,一经查实,立即删除!

相关文章

不知道吃什么?来个随即点餐,点到啥吃啥!

不知道吃什么&#xff1f;来个随即点餐&#xff0c;点到啥吃啥&#xff01; 走过路过&#xff0c;千万不要错过&#xff01; <body><div><div id"box1">回家做饭</div><button id"start">开始</button><button i…

随即输入5个字符串,输出最大串

随即输入5个字符串&#xff0c;输出最大串 解题思路&#xff1a;先输入5个字符串&#xff0c;通过for循环进行长度判断&#xff0c;类似于冒泡排序&#xff0c;输出第一个位置的字符串即可 public static void main(String[] args) {Scanner sc new Scanner(System.in);Strin…

js生成随机圆,随即大小、随机位置、随机颜色

效果&#xff1a; 随即大小&#xff1a; // 随机大小 const randomSize function () {const size parseInt(Math.random()*150) 1return size px }随机位置&#xff1a; // 随机位置top const randomTop function () {const top parseInt(Math.random()*1000)return to…

linux脚本生成一个100以内的随机数,提示用户猜数字并将随即生成的数字显示

脚本生成一个100以内的随机数&#xff0c;提示用户猜数字并将随即生成的数字显示 使用read提示用户猜数字 使用if判断用户猜数字的大小关系 猜对了 猜大了 猜小了 使用while循环输入 首先&#xff1a;vi rendom 进入&#xff1a; #!/bin/bash end100 out101 while [ end−…

人工智能-八皇后爬山法(最陡上升,首项选择),随即重新启动法

#include<iostream> #include<string> #include<time h""> #include<iomanip> using namespace std;int qi[64]; int maze[64];int check(int idx) {int index idx;int row index / 8;int col index % 8;int j;int h 0;int i;for (i c

随即付|蓝牙支付模块,自制扫码付费开关

扫码付费演示视频&#xff1a;使用蓝牙支付模块&#xff0c;把空气净化器改造成共享的_哔哩哔哩_bilibili 立创开源地址&#xff1a;低成本的蓝牙扫码支付模块 - 嘉立创EDA开源硬件平台 应用领域&#xff1a; ♦ 扫码付费插座 ♦ 洗衣机扫码付费 ♦ 各种游乐车扫码付费 ♦…

第一章:随即分析中必会的基础知识

应用随机分析 主要是时间、状态都连续的随机过程。 文章目录应用随机分析引言第一章1.1随机事件及概率1.2 随机变量及分布1.3 分布函数1.4 条件概率与条件期望1.4.1 条件概率1.4.2 条件期望1.5 随机过程的定义引言 布朗运动 时间与空间的尺度问题 比如建模时&#xff0c;要…