Button 理论使用总结

• 一、概述
• 二、简单使用
• • 1. 界面外观使用
  • 2. 事件处理
• 三、其他属性
• 四、定制外观
• • 1. 镂空效果
  • 2. 填充效果

一、概述

这里记录一下Button 的一些理论使用，QtQuick.Controls 的 Button 表示用户可以按下或单击的按钮控件。这个控件其实就是代表一个按钮，和QPushButton 一样的功能，按钮通常用于执行一个动作，或回答一个问题。典型的按钮有 确定、应用、取消、关闭、是、否和帮助 等等 。

就像这种效果

这个Button 是继承至 AbstractButton， 那Button就可以使用他的父类的一些功能。我们就可以设置 text, 展示一个图标 icon, 以及响应 clicks 点击事件之类的。

二、简单使用

在使用这个控件的时候，需要引入对应的控件库。这里版本和Qt 版本有些区别，但是不大，只要是大版本的Controls 2 xx 就差不多，如果是 Controls 1xx 那就和 Controls 2xx 有些区别，我这里是 Qt 5.14.2 的Qt版本。

import QtQuick.Controls 2.14

import QtQuick.Controls 2.5

1. 界面外观使用

上面的例子代码如下

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World")GridLayout{columns: 5rows: 1anchors.fill: parentButton{text:"OK"Layout.column: 0Layout.alignment: Qt.AlignHCenter}Button{text:"Apply"Layout.column: 1Layout.alignment: Qt.AlignHCenter}Button{text:"Cancel"Layout.column: 2Layout.alignment: Qt.AlignHCenter}Button{icon.name: "image"icon.width: 60icon.height: 30icon.color: "transparent"icon.source: "./image/tupian.png"Layout.column: 3Layout.alignment: Qt.AlignHCenter}Button{text:"email"icon.name: "email"icon.color: "transparent"icon.source: "./image/youjian.png"Layout.column: 4Layout.alignment: Qt.AlignHCenter}}
}

2. 事件处理

Button 能够响应很多的事件，这个响应的事件很像 C# 里面的 EventHandeler 那种写法，这些事件都是继承至 AbstractButton 的事件。这些事件都是通过信号的来完成的，对应的信号就是对应的函数。

on+信号首字母大写: 单个函数
on+信号首字母大写{ 多条语句函数}

例如

• onClicked:
• onPressed:

下面的效果就是这些，

代码如下

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Button{text:"OK"Layout.column: 0Layout.alignment: Qt.AlignHCenteronClicked:console.log("Ok Btn Clicked!")}Button{text:"Apply"Layout.column: 1Layout.alignment: Qt.AlignHCenteronPressed:{console.log("Apply Btn Pressed!")}}
}

三、其他属性

• flat : bool

这个属性指示这个按钮是否是 flat 按钮，平面按钮通常不会绘制背景，除非它被按下或选中。默认值为false。
感觉就是没有背景的效果的哈。

• highlighted : bool

这个属性保存按钮是否高亮显示。按钮可以高亮显示以吸引用户的注意力。这里的高亮就是背景变黑的。它对键盘交互没有影响。默认值为false。

四、定制外观

Button 有两个 visual 子控件: background 和content item.，我们就重写这个就好啦，很简单的

1. 镂空效果

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Button {id: selfBtntext: qsTr("Button")contentItem: Text {text: selfBtn.textfont: selfBtn.fontopacity: enabled ? 1.0 : 0.3color: selfBtn.down ? "#17a81a" : "#21be2b"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterelide: Text.ElideRight}background: Rectangle {implicitWidth: 100implicitHeight: 40opacity: enabled ? 1 : 0.3border.color: selfBtn.down ? "#17a81a" : "#21be2b"border.width: 1radius: 2}}
}

2. 填充效果

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Button {id: selfBtntext: qsTr("Button")contentItem: Text {text: selfBtn.textfont: selfBtn.fontopacity: enabled ? 1.0 : 0.3color: selfBtn.down ? "white" : "#e6f6e7"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenterelide: Text.ElideRight}background: Rectangle {implicitWidth: 100implicitHeight: 40opacity: enabled ? 1 : 0.3border.color: selfBtn.down ? "#17a81a" : "#21be2b"color: selfBtn.down ? "#17a81a" : "#21be2b"border.width: 1radius: 2}}
}