QML入门教程(2): QML Button用法介绍

Button是很常见的控件，Qt助手的说明如下：

Button QML Type

Push-button that can be clicked to perform a command or answer a question. More...

Import Statement: import QtQuick.Controls 2.5

Since: Qt 5.7

Inherits: AbstractButton

Inherited By: RoundButton and ToolButton

根据以上可知，在QML中要使用Buttoon，需要先导入控件库 import QtQuick.Controls 2.5, 使用其它控件也是一样，都需要导入这个库。

在界面上添加一个按钮

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Button{x:100  //设置按钮的横坐标y:100  //设置纵坐标text:"我是按钮"   //按钮标题//信号槽连接onClicked: {console.log("我被点击了")}}
}

下面说说QML按钮的其它属性及用法

一、信号槽连接

在Button的父类AbstractButton可以找到如下信号：

Signals

canceled()

clicked()

doubleClicked()

pressAndHold()

pressed()

released()

toggled()

按钮信号槽写法，on + 信号首字母大写，例如下面的代码，写了一个点击事件，代码如下：

        //信号槽连接，单击信号onClicked: {console.log("我被点击了,输出变量num = " + num)}

槽函数代码的3中写法
（1）可以调用外部js函数
（2）大括号可以不写
（3）用控件的id调用，例如给Button添加了一个属性id:myButoon

Button{id:myButoonx:100  //设置按钮的横坐标y:100  //设置纵坐标text:"我是按钮"   //按钮标题//信号槽连接，单击信号onClicked: {console.log("我被点击了,输出变量num = " + num)}function slotDouble(){console.log("我被双击了")}//双击信号
//        onDoubleClicked: {
//            slotDouble();
//        }//函数调用时大括号也可以不写//onDoubleClicked: slotDouble()//也可以根据id调用//onDoubleClicked: myButoon.slotDouble()}

二、Button添加资源

创建qrc文件后，按钮可以获取qrc文件里的资源进行显示

    Button{id:myButoon2x: 100y: 160//安妮添加图标icon.source: "qrc:/images/save.png"icon.color: "transparent"display: AbstractButton.TextUnderIcontext:"保存"//设置按钮背景颜色background: Rectangle {color: Qt.rgba(250/255,250/255,250/255,1)}}

默认的图片显示全是黑色的，需要把效果设为透明："transparent"

本demo全部代码如下：

/*Button控件的用法*/import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5Window {id:windowvisible: truewidth: 640height: 480title: qsTr("Hello World")//变量的定义property int num : 1Button{id:myButoonx:100  //设置按钮的横坐标y:100  //设置纵坐标text:"我是按钮"   //按钮标题//信号槽连接，单击信号onClicked: {console.log("我被点击了,输出变量num = " + num)}function slotDouble(){console.log("我被双击了")}//双击信号
//        onDoubleClicked: {
//            slotDouble();
//        }//函数调用时大括号也可以不写//onDoubleClicked: slotDouble()//也可以根据id调用//onDoubleClicked: myButoon.slotDouble()}Button{id:myButoon2x: 100y: 160//安妮添加图标icon.source: "qrc:/images/save.png"icon.color: "transparent"display: AbstractButton.TextUnderIcontext:"保存"//设置按钮背景颜色background: Rectangle {color: Qt.rgba(250/255,250/255,250/255,1)}}
}

运行结果：

其它用法，可以参考Qt助手。

QML入门教程(2): QML Button用法介绍相关推荐

QML入门教程(4): QML矩形框控件Rectangle用法
QML提供了矩形控件代码如下: import QtQuick 2.12 import QtQuick.Window 2.12Window {visible: truewidth: 640height ...
QML入门教程(10) : QML圆形延时按钮
QML提供了延时按钮DelayButton,我们可以对其自定义,如下图: 代码 import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuic ...
esri-leaflet入门教程（1）-leaflet介绍
esri-leaflet入门教程(1)-esri leaflet介绍 by 李远祥关于leaflet,可能很多人比较陌生,如果搭上esri几个字母,可能会有更多的人关注.如果没有留意过leaflet ...
QML入门教程(5)：Label、TextField用法介绍
Label用法代码 import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.5Window {visible: ...
QML入门教程：一、QML和QtQuick简介以及QML实例
从 Qt 4.7 开始,Qt 引入了一种声明式脚本语言,称为 QML(Qt Meta Language 或者 Qt Modeling Language),作为 C++ 语言的一种替代.而 Qt Qui ...
QML入门教程(13): 鼠标键盘事件处理
键盘事件 qml对键盘的处理,处理利用Keys,例如按键按下的处理: pressed(KeyEvent event) This signal is emitted when a key has bee ...
JavaScript 入门教程||javascript 简介||JavaScript 用法
javascript 简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScrip ...
Adaboost入门教程——最通俗易懂的原理介绍（图文实例）
写在前面说到Adaboost,公式与代码网上到处都有,<统计学习方法>里面有详细的公式原理,Github上面有很多实例,那么为什么还要写这篇文章呢?希望从一种更容易理解的角度,来为大家呈 ...
泰凌微8258入门教程基础篇④——sig_mesh_sdk架构介绍
文章目录一.前言二.SDK文件架构三.SDK Demo Project 四.vendor文件架构 4.1 common 4.2 Demo Project目录五.产品类型定义一.前言本系列的 ...

QML入门教程(2): QML Button用法介绍

一、信号槽连接

二、Button添加资源

QML入门教程(2): QML Button用法介绍相关推荐

最新文章

热门文章