QT入門第一天平臺使用規則和代碼邏輯學習

• QT學習目的,崗位需求
• QT的 應用領域，發展歷史
• QT下載安裝，不同版本QT介紹
• 新建QT工程
• • 1.集成開發環境介紹
  • 2.新建QT工程
  • 3.QT工程介紹
• QT的學習方法
• • 1. 組件作用
  • 2.跳轉到ui設計師
  • 3.常用的組件
  • • (1)標簽label
    • (2) 單行輸入框 lineedit
    • (3) 普通按鈕 pushbutton
    • (4)文本瀏覽框 textBrowser
    • (5)文本編輯框 textEdit
    • (6)lcdNumber
• QT中的樣式設計,添加資源文件
• • 1.樣式設計
  • • (1)什么是樣式
    • (2)QT中常用的樣式設計語句(qss語句)
  • 2.QT工程中添加資源文件
  • • (1)什么是資源文件
    • (2)如何添加資源文件到QT工程中
• 純代碼實現登錄界面(C++基礎要扎實)
• • 1.為什么要掌握純代碼
  • 2.總結QT的api文檔規律(QT助手)
  • 3.具體步驟
  • • 第一步：創建一個標簽對象--》顯示標題
    • • (1)構造函數
    • (2)設置位置坐標,寬高
    • 第二步：創建兩個輸入框--》賬號和密碼輸入
    • • (1)構造函數
      • (2)設置默認提示字符串
      • (3)設置樣式
• 運行方法
• 本節代碼分享
• • main.c
  • MainWindow.cpp
  • MainWindow.h
  • MainWindow.ui

QT學習目的,崗位需求

上位機：用戶使用的那個小平板(帶有界面,應用程序)
下位機：底層硬件傳感器,底層的硬件電路板
1.學習目的
QT可以幫助我們開發上位機程序
QT使用C++寫代碼
2.崗位需求
QT開發工程師 --》二年左右的經驗 1.5----3w之間

QT的 應用領域，發展歷史

1.QT的特點
跨平臺：市面上主流的操作系統都能支持
window
linux
蘋果
安卓

QT下載安裝，不同版本QT介紹

1.QT下載鏈接
https://download.qt.io/archive/qt/
2.不同版本的QT安裝程序
.exe --》window版本的QT
.dmg --》蘋果電腦
.run --》linux系統

新建QT工程

1.集成開發環境介紹

QT creator --》集成開發環境

2.新建QT工程

方法一：點擊projects中new按鈕方法二：點擊文件菜單項 ，選擇新建文件/工程注意：選擇QT widgets application(QT窗口應用程序)工程名和路徑名不能有中文

3.QT工程介紹

第一個： .pro文件(工程配置文件,跟我們前面學習的Makefile有點類似)

QT += core gui //往QT工程中添加核心庫和圖形用戶界面庫greaterThan(QT_MAJOR_VERSION, 4): QT += widgets //添加窗口庫CONFIG += c++11 //選用C++11標準語法去編譯程序SOURCES += \main.cpp \mainwindow.cpp //指定要編譯的源碼HEADERS += \mainwindow.h //指定頭文件FORMS += \mainwindow.ui //界面設計文件，用來保存你在ui設計師中設計好的ui界面qnx: target.path = /tmp/$${TARGET}/binelse: unix:!android: target.path = /opt/$${TARGET}/bin!isEmpty(target.path): INSTALLS += target //指定環境變量

第二個：頭文件–》類的定義

class MainWindow : public QMainWindow{Q_OBJECT //宏定義,暫時不理會(信息與曹)public:MainWindow(QWidget *parent = nullptr); ~MainWindow();private:Ui::MainWindow *ui;};

第三個：主函數–》

int main(int argc, char *argv[]){QApplication a(argc, argv); //QApplication類，用來管理你的QT工程,用來支持信號與槽，用來管理事件的觸發MainWindow w;w.show(); //顯示主窗口return a.exec(); //進入事件循環(不斷地幫你刷新主窗口)}

QT的學習方法

============================================================
1.QT中的內容非常多
組件的屬性有很多： 掌握主要的屬性設置，其他的屬性遇到了上網查詢

UI設計師界面的使用–》傻瓜式操作(所見即所得)

1. 組件作用

組件(控件)：按鈕 滑動條 進度條......提供了大量的組件幫助我們設計ui界面

2.跳轉到ui設計師

雙擊工程中ui文件，自動跳轉組件如何使用： 鼠標左鍵直接拖動即可復制組件：ctrl按住不松開，鼠標拖動組件即可復制

3.常用的組件

注意：任何一個組件，你需要查看修改它的屬性，都要先用鼠標選中該組件，再去查看修改屬性

(1)標簽label

作用一：用來顯示文字作用二：用來顯示圖片void setPixmap(const QPixmap &)參數：:QPixmap(const QString &fileName)fileName --》你要顯示的圖片路徑名標簽顯示圖片有兩種優化方式方式一：讓圖片去自動適應標簽的大小(標簽的大小是固定的，讓圖片自動改變大小去適應標簽)QPixmap mymap(piclist.at(n)); //創建了繪圖設備mymap.scaled(ui->label->width(),ui->label->height()); //調整圖片的寬高，讓其跟標簽一致ui->label->setScaledContents(true); //讓圖片可以適應標簽ui->label->setPixmap(mymap);方式二：讓標簽去自動適應圖片的大小QPixmap mymap(piclist.at(n)); //創建了繪圖設備ui->label->resize(mymap.width(),mymap.height());ui->label->setPixmap(mymap);常用屬性geometry --》定位坐標，長寬大小font --》設置字體

(2) 單行輸入框 lineedit

作用：輸入一行字符串信息，不能換行常用屬性geometry --》定位坐標，長寬大小font --》設置字體placeholdertext --》設置默認的提示信息echomode --》設置輸入內容是否隱藏normal --》不隱藏password --》隱藏maxlength --》設置輸入框的最大字符個數(英文字母一個算一個)中文一個算一個

(3) 普通按鈕 pushbutton

作用：添加一些可以點擊的按鈕常用屬性geometry --》定位坐標，長寬大小font --》設置字體

(4)文本瀏覽框 textBrowser

作用：顯示文本內容，只能顯示，不能編輯修改方法：setText(你要顯示的內容)

(5)文本編輯框 textEdit

作用：可以顯示文本，也可以編輯方法：setText(你要顯示的內容)QString QTextEdit::toPlainText() const //返回文本編輯框中所有的內容

(6)lcdNumber

作用：顯示數字方法：display() //可以顯示整數,小數屬性：digitcount --》設置最大多少位數字

QT中的樣式設計,添加資源文件

===================================

1.樣式設計

(1)什么是樣式

為了讓你的ui界面更加的美觀好看如何彈出QT的樣式表方法一： 點擊屬性中的stylesheet方法二： 右鍵點擊組件，選擇改變樣式表

(2)QT中常用的樣式設計語句(qss語句)

background-color: rgb(85, 255, 255); //設置背景顏色background-image: url(:/new/prefix1/pic/3.jpg); //設置背景圖片background-image: url(你需要的圖片的絕對路徑);border-image: url(:/new/prefix1/pic/2.jpg); //設置邊框圖片(邊框圖片跟組件的大小保持一致)border-image: url(你需要的圖片的絕對路徑); border-radius:15px; //把倒角設置為15個像素倒角的大小不能超過組件高度的一半border:2px solid#ff0000; //把邊框的寬度設置為2個像素，顏色設置成ff0000QPushButton:pressed{ 設置按鈕按下的時候背景圖片 用于主窗口的樣式設計background-image: url(:/button_down.png);}QPushButton:pressed#regBt{ 設置指定按鈕regBt按鈕按下時候背景圖片 用于主窗口的樣式設計background-image: url(:/button_down.png);}QPushButton:hover{ 用于主窗口的樣式設計background-color:#ff00ff; 鼠標進入控件設置背景顏色}QMainWindow{border-image: url(:/new/prefix1/pic/3.jpg);} //讓圖片只作用于主窗口 用于主窗口的樣式設計注意：QT中的路徑的寫法跟window的路徑寫法是不同比如： window路徑是： C:\note\temp\1.cQT代碼中這個路徑改成：C:/note/temp/1.c

2.QT工程中添加資源文件

(1)什么是資源文件

只要是你從外界拿過來的文件都叫資源文件,比如： 圖片,音頻文件,視頻文件

(2)如何添加資源文件到QT工程中

第一步：準備好你要添加的資源文件，拷貝一份到你的工程目錄下(新建文件夾保存)第二步：右鍵點擊工程名,選擇QT，選擇QT resource file --》點擊add prefix，點擊add file--》自動彈出對話框,你選擇之前要添加的圖片文件最后ctrl+s保存即可

純代碼實現登錄界面(C++基礎要扎實)

===================================

1.為什么要掌握純代碼

第一：學習面向對象編程思想--》查詢類和方法，學會自動思考閱讀QT中api文檔第二：代碼實現的功能，肯定比ui設計師強大

2.總結QT的api文檔規律(QT助手)

規律一：組件的類名有統一的命名規則pushButton --》QPushButtonlabel --》QLabel規律二：頭文件跟類名一樣#include <QPushButton>規律三：ui設計師中所有的屬性都有對應的接口函數去設置屬性這些函數都有統一的命名規則 setxxxxx() //xxxxx就是你見到的屬性的英文單詞名字比如：屬性名 geometry --》函數名setGeometry()font --》函數名setFont()

3.具體步驟

第一步：創建一個標簽對象–》顯示標題

(1)構造函數

QLabel(const QString &text, QWidget *parent = nullptr, Qt::WindowFlags f = Qt::WindowFlags())參數: text --》你要顯示在標簽上的文字信息QString類似于C++中的stringparent --》表示標簽的父窗口(標簽在哪個窗口顯示,那個窗口就是它的父窗口)

(2)設置位置坐標,寬高

void QWidget::setGeometry(int x, int y, int w, int h)參數：x y --》坐標位置w h --》寬和高設置字體void setFont(const QFont &)參數: QFont --》QT中封裝好專門表示各種字體的類名QFont::QFont(const QString &family, int pointSize = -1)參數：family --》字體的名字pointSize --》字體大小

第二步：創建兩個輸入框–》賬號和密碼輸入

(1)構造函數

QLineEdit(QWidget *parent = nullptr)參數：parent --》表示單行輸入框的父窗口

(2)設置默認提示字符串

void setPlaceholderText(const QString &)參數：你要顯示的提醒信息設置密碼隱藏void setEchoMode(QLineEdit::EchoMode)參數：QLineEdit::Normal --》不隱藏QLineEdit::Password --》隱藏設置最大長度void setMaxLength(int)參數：最大字符數量

(3)設置樣式

void setStyleSheet(const QString &styleSheet)參數：styleSheet --》你要設置的樣式語句QString str="輸入賬號"; setPlaceholderText(str);第三步：創建兩個按鈕(1)構造函數QPushButton(const QString &text, QWidget *parent = nullptr)參數：text --》按鈕的字面信息parent --》按鈕的父窗口

運行方法

日常使用基本都是MinGW 64-bit，因為另外一個需要第三方庫

下一個知識：前奏分享

本節代碼分享

main.c

#include "mainwindow.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);MainWindow w;w.show();return a.exec(); }

MainWindow.cpp

#include "mainwindow.h" #include "ui_mainwindow.h" MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this); }MainWindow::~MainWindow() {delete ui; }

MainWindow.h

#ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui; }; #endif // MAINWINDOW_H

MainWindow.ui

<?xml version="1.0" encoding="UTF-8"?> MainWindow 0 0 800 600 75 true MainWindow QMainWindow{border-image: url(:/new/prefix1/pic/1.jpg);} 160 20 541 91 楷體 34 75 true 歡迎使用粵嵌自動販賣機 200 120 361 51 楷體 20 50 false 8 請輸入賬號 200 230 371 51 楷體 20 50 false border-radius:15px; border:5px solid#ff0000; 8 QLineEdit::Password 請輸入密碼 130 360 161 81 楷體 20 50 false background-color: rgb(0, 255, 0); color: rgb(255, 0, 0); border-radius:40px; border:2px solid#ff0000; 登錄 450 370 161 81 楷體 20 50 false color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(255, 0, 0, 255), stop:0.166 rgba(255, 255, 0, 255), stop:0.333 rgba(0, 255, 0, 255), stop:0.5 rgba(0, 255, 255, 255), stop:0.666 rgba(0, 0, 255, 255), stop:0.833 rgba(255, 0, 255, 255), stop:1 rgba(255, 0, 0, 255)); border-image: url(:/new/prefix1/pic/2.jpg); 注冊 0 0 800 22

源碼分享@：

hi，這是我用百度網盤分享的內容~復制這段內容打開「百度網盤」APP即可獲取?鏈接:https://pan.baidu.com/s/1sNUS0ArNHTGOer70Juab8w?pwd=t82n?提取碼:t82n

總結

以上是生活随笔為你收集整理的QT入门第一天平台使用规则和代码逻辑学习(初学者)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。