前言
? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
🎬 個人主頁:@ChenPi
🐻推薦專欄1: 《C++_@ChenPi的博客-CSDN博客》????
🔥 推薦專欄2: 《Linux C應用編程(概念類)_@ChenPi的博客-CSDN博客》???
🌺本篇簡介 ?:這一章我們學一下Qt中經常使用控件——按鈕
主要用來開發圖形用戶界面(Graphical User Interface,簡 稱 GUI)程序
Qt 雖然經常被當做一個 GUI 庫,用來開發圖形界面應用程序,但這并不是 Qt 的全部
Qt 除了可以繪制漂亮的界面(包括控件、布局、交互),還包含很多其它功能
比如多線程、 訪問數據庫、圖像處理、音頻視頻處理、網絡通信、文件操作等
所以如果學嵌入式,那么Qt就是其中一個大方向了
本專欄的使用的
- Linux操作系統是Ubuntu18.4?
- Qt的版本是Qt5.12.9
01 控件介紹
pushButton就是一個正常的按鈕,我們點擊,松開,懸停這些Qt都有對應的信號可以觸發,我們只要把信號和槽連接起來就可以使用了
02用法介紹
pushButton按鈕控制窗口換膚,通過單擊不同的按鈕,改變窗口的顏色。
就像這樣三個按鈕,控制窗口背景顏色?
我們先新建一個Qt的項目,如果還不會的話可以看上一章
P2 Qt Creator創建第一個Qt程序-CSDN博客
?
我們來看下代碼如何實現
我們先看下頭文件
還有個箭頭忘記標的slots就是槽函數的意思了
定義了三個槽函數
看完頭文件,我們來看下mainwindow.cpp的類構造函數吧
?我們開分析一下我們的代碼
?
沒按下按鈕前的樣子?
第6行:setGeometry就是設置窗口的位置及大小
第8-10:實例化對象,這些就是C++的內容了
12-15行:這個是設置按鈕顏色,可以稍微記一下setStyleSheet這個函數
這個函數是設置樣式的,就是想要各種花里胡哨的,就可以通過它設置
?
然后我們設置顏色的方式也有很多,圖中就有三種不同的方式
如果想要設置更好看的,可以參考一下
QPushButton {
background-color: rgb(0, 150, 0);
color: rgb(255, 255, 255);
color: white; /* 文字顏色 */
background-color: #473C8B; /* 背景色 */
border-style: outset; /* 邊框風格 */
border-width: 2px; /* 邊框寬度 */
border-radius: 5px; /* 邊框圓角 */
border-color: #8B7355; /* 邊框顏色 */
font: bold 14px; /* 字體 */
min-width: 2em; /* 控件最小寬度 */
min-height: 2px; /* 控件最小高度 */
font-family: 華文新魏; /* 字庫 */
padding: 5px; /* 內邊距 */
padding-left:6px; /* 文字橫向偏移 */
padding-top:6px; /* 文字縱向偏移 */
}
那么顏色的RGB值這些這么知道呢??
?RGB顏色查詢對照表|RGB顏色|三原色配色表 (sojson.com)
瀏覽器搜一下RGB對照表就有
17-19行:就是設置按鍵的位置及大小了
22-24行:這個是信號槽連接了
我們看到這里有一個connet函數,就是連接的意思
有四個參數,第一個參數是pushbutton就是我們前面定義的按鍵對象 ,也就是信號的發出者
那誰接收信號?那就是第三參數this,this是一個關鍵字,就是當前代表類,C++的知識,我的C++
專欄有
參數2和參數4就是信號和槽了
簡單來說,就是參數1按鍵被按下后,觸發了點擊clicked信號,然后返送給this,最后就執行槽函數了
那我們槽函數到底干了什么呢?
?我們剛不是說了嘛?當按鍵按下后,發出信號,最后槽函數執行
我們看下槽函數的內容,是不是很熟啊,setStylesheet啊,剛見過
所以槽函數就是我們設置窗口顏色的地方了
只要對應顏色對應按鍵按下后,我們窗口就變為對應顏色
我們接著看
03效果運行
為了看清我們那個按鍵按下,我們加個打印
在qt中我們打印需要頭文件
?我們加一下打印,我們跑一下是不是這樣
Ctrl + R運行
大概就是這樣?
如果有什么不對的,歡迎指正
有哪里不理解的,歡迎請教
mainwindow.c代碼,需要源碼也可以找我,太多了,就不貼了
#include "mainwindow.h"
#include <QDebug>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent)
{this->setGeometry(0,0,800,480); //800.480設置窗口的大小 0 0為窗口左上角的坐標pushbutton1 = new QPushButton("紅色",this); //實例化對象pushbutton2 = new QPushButton("綠色",this);pushbutton3 = new QPushButton("藍色",this);pushbutton1->setStyleSheet("QPushButton{background-color:red;}"); //設置樣式pushbutton2->setStyleSheet("QPushButton{background-color:#00EE00;}");pushbutton3->setStyleSheet("QPushButton{background-color:rgb(0,0,255);}");pushbutton1->setGeometry(200,200,80,50); //設置按鍵的位置即大小pushbutton2->setGeometry(300,200,80,50);pushbutton3->setGeometry(400,200,80,50);connect(pushbutton1,SIGNAL(clicked()),this,SLOT(pushButton1_Clicked())); //信號槽連接connect(pushbutton2,SIGNAL(clicked()),this,SLOT(pushButton2_Clicked()));connect(pushbutton3,SIGNAL(clicked()),this,SLOT(pushButton3_Clicked()));
}MainWindow::~MainWindow()
{
}//槽函數,設置窗口顏色的變化
void MainWindow::pushButton1_Clicked()
{this->setStyleSheet("MainWindow{background-color:red}");qDebug()<<"按鍵1按下"<<endl;
}void MainWindow::pushButton2_Clicked()
{this->setStyleSheet("MainWindow{background-color:green}");qDebug()<<"按鍵2按下"<<endl;}void MainWindow::pushButton3_Clicked()
{this->setStyleSheet("MainWindow{background-color:blue}");qDebug()<<"按鍵3按下"<<endl;}