Qt學習第二篇（基本小元件的使用）

ivanlee717發表於2024-05-18
QT元件

Qt_2

小部件是 GUI 的基本元素。 它也稱為UI 控制元件。 它接受來自底層平臺的不同使用者事件，如滑鼠和鍵盤事件(以及其他事件)。 我們使用不同的小部件建立 UI。 曾經有一段時間，所有的 GUI 控制元件都是從頭開始編寫的。 Qt 小部件透過開發具有現成的 GUI 控制元件的桌面 GUI 來縮短時間，並且 Qt 廣泛使用繼承的概念。 所有小工具都繼承自QObject。 QWidget是一個基本小部件，是所有 UI 小部件的基類。 它包含描述小部件所需的大多數屬性，以及幾何圖形、顏色、滑鼠、鍵盤行為、工具提示等屬性。 讓我們看看下圖中的QWidget繼承層次結構：

image-20240506212733775

大多數 Qt 小部件名稱都是不言而喻的，因為它們以q開頭，所以很容易識別。 下面列出了其中的一些內容：

  • QPushButton是用於命令應用執行某個操作。
  • QCheckBox允許使用者做出二元選擇。
  • QRadioButton允許使用者從一組互斥選項中僅選擇一個。
  • QFrame顯示幀。
  • QLabel用於顯示文字或影像。
  • QLineEdit允許使用者輸入和編輯單行純文字。
  • QTabWidget用於顯示與選項卡式小部件堆疊中的每個選項卡相關的頁面。

使用 Qt 小部件的優勢之一是它的育兒系統。 從QObject繼承的任何物件都具有父子關係。 這種關係給開發人員帶來了很多便利，例如：

  • 當小部件被銷燬時，由於父子層次結構，它的所有子部件也會被銷燬。 這避免了記憶體洩漏。
  • 您可以使用findChild()和findChildren()查詢給定QWidget類的子類。
  • Qwidget中的子構件自動出現在父構件內部。

典型的 C++ 程式在 Main 返回時終止，但在 GUI 應用中我們不能這樣做，否則應用將無法使用。 因此，我們需要 GUI 一直存在，直到使用者關閉視窗。 要實現這一點，程式應該迴圈執行，直到發生這種情況。 GUI 應用等待使用者輸入事件。

#include "mainwindow.h"

#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QLabel myLabel;
    myLabel.setText("I love regina");
    //MainWindow w;
    myLabel.show();
    return a.exec();
}

image-20240506213446849

接下來挨個實現一下前面的基礎模組的使用方式：

QPushButton

#include "mainwindow.h"

#include <QApplication>
#include <QLabel>
#include <QPushButton>

void mySlot() {
    qDebug() << "regina kissed!";
    /*qDebug() 是 Qt 框架中用於除錯輸出的函式，它用於將除錯資訊輸出到控制檯。在你的示例中，mySlot() 是一個槽函式，用於處理按鈕點選事件。在槽函式中呼叫 qDebug() 是一種常見的做法，可以在控制檯輸出一些除錯資訊，以便於開發人員除錯和排查問題。*/
}
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QPushButton *mybutton = new QPushButton("click my sister regina");
    // 將按鈕的點選事件連線到槽函式
    QObject::connect(mybutton,&QPushButton::clicked,&mySlot);
    /*mybutton 是發出訊號的物件，也就是 QPushButton 物件。
    &QPushButton::clicked 是要連線的訊號，表示當按鈕被點選時發出的訊號。
    &mySlot 是槽函式的地址，表示當按鈕被點選時要呼叫的函式。*/
    mybutton->show();
    return a.exec();
}

image-20240506214739368

QCheckBox

#include "mainwindow.h"

#include <QApplication>
#include <QLabel>
#include <QPushButton>
#include <QCheckBox>
#include <QVBoxLayout>
void mySlot() {
    qDebug() << "regina kissed!";
}
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    /*QLabel myLabel;
    myLabel.setText("I love regina");
    //MainWindow w;
    myLabel.show();*/
    QPushButton *mybutton = new QPushButton("click my sister regina");
    // 將按鈕的點選事件連線到槽函式
    QObject::connect(mybutton,&QPushButton::clicked,&mySlot);
    /*mybutton 是發出訊號的物件，也就是 QPushButton 物件。
    &QPushButton::clicked 是要連線的訊號，表示當按鈕被點選時發出的訊號。
    &mySlot 是槽函式的地址，表示當按鈕被點選時要呼叫的函式。*/
    QWidget *widget = new QWidget;
    QVBoxLayout *layout = new QVBoxLayout(widget); //建立垂直佈局管理器
    QCheckBox *checkBox = new QCheckBox("kiss regina", widget);
    checkBox->setChecked(false);//預設為不選
    layout->addWidget(checkBox);
    layout->addWidget(mybutton);
    widget->setLayout(layout);
    widget->show();
    //mybutton->show();
    return a.exec();
}

image-20240513223406067

QRadioButton

QRadioButton *radioButton = new QRadioButton("Radio Button Text", widget);
//獲取和設定選中狀態
bool ischecked = radioButton->isChecked();
radioButton->setChecked(true);

image-20240514221632736

QFrame

  • 建立幀：QFrame *frame = new QFrame(parent);
  • 設定幀的樣式和屬性：frame->setFrameShape(QFrame::Box);, frame->setFrameShadow(QFrame::Sunken);

QFrame 類用於建立框架，可以在介面中用作容器或用於裝飾其他小部件。setFrameShape() 和 setFrameShadow() 是 QFrame 類的兩個方法，分別用於設定框架的形狀和陰影效果。除了這兩個方法之外，QFrame 類還有其他一些屬性可以設定，例如：

  1. setLineWidth(int width)：設定框架的線寬度。
  2. setMidLineWidth(int width)：設定框架中間線的寬度（當框架形狀為 QFrame::StyledPanel 時可見）。
  3. setFrameStyle(int style)：設定框架的風格，可以使用 QFrame:: 字首的常量來指定不同的風格。
  4. setFrameRect(const QRect &rect)：設定框架的矩形區域。
  5. setAutoFillBackground(bool enabled)：設定是否自動填充背景。
  6. setSizePolicy(QSizePolicy::Policy horizontal, QSizePolicy::Policy vertical)：設定框架的大小策略。
  7. setContentsMargins(int left, int top, int right, int bottom)：設定框架內部內容的邊距。
QFrame *frame = new QFrame(widget);
frame->setFrameShape(QFrame::Panel);
frame->setFrameShadow(QFrame::Raised);
frame->setLayout(layout);

image-20240514230415185

QLabel

    QLabel *label = new QLabel("label text",widget);
    label->setText("regina label");
    label->setPixmap(QPixmap("D:\\廈門Day2\\IMG_0958.JPG"));
    layout->addWidget(label);

QLineEdit

QLineEdit 是 Qt 框架中提供的一個用於輸入和編輯單行文字的小部件（widget）。它允許使用者在一個單行的文字框中輸入、編輯和獲取文字內容。

使用 QLineEdit，你可以建立一個單行編輯框，使用者可以在其中輸入文字。可以透過呼叫 setText() 方法來設定初始文字內容，並透過呼叫 text() 方法來獲取當前文字內容。

// 建立單行編輯框
QLineEdit *lineEdit = new QLineEdit(widget);


// 獲取和設定文字內容
QString text = lineEdit->text(); // 獲取文字內容
lineEdit->setText("regina linetext"); // 設定文字內容
//layout->addWidget(frame);
layout->addWidget(lineEdit);

image-20240518160547019

以下是 QLineEdit 的幾個常用方法：

  • setText(const QString &text): 設定文字內容。
  • text() const: 獲取當前文字內容。
  • setPlaceholderText(const QString &text): 設定佔位文字，顯示在使用者未輸入任何內容時的灰色提示文字。
  • setReadOnly(bool readOnly): 設定是否為只讀模式，如果設定為 true，則使用者無法編輯文字。
  • clear(): 清除文字內容。

此外，你還可以透過訊號和槽機制來處理文字的變化和編輯事件，以及使用樣式表來自定義 QLineEdit 的外觀。

以下是一個用例：

#include <QApplication>
#include <QLineEdit>
#include <QDebug>
#include <QVBoxLayout>
int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 建立一個視窗
    QWidget window;  //QWidget *widget = new QWidget;
    window.setWindowTitle("qLINE"); //widget->setWindowTitle("qLINE");
    // 建立一個單行編輯框
    QLineEdit *lineEdit = new QLineEdit(&window);//這裡必須是引用
    //QLineEdit *lineEdit = new QLineEdit(widget);
    lineEdit->setPlaceholderText("請輸入內容");
    // 設定只讀模式
    lineEdit->setReadOnly(false);// 設定為 true，則使用者無法編輯文字

    // 設定初始文字內容
    lineEdit->setText("初始文字");

    // 清除文字內容
    // lineEdit->clear();

    // 連線訊號與槽函式，當文字發生變化時觸發
    QObject::connect(lineEdit,&QLineEdit::textChanged,[&](){
        QString text = lineEdit->text();
        qDebug() << "文字已改變：" << text;
    });

    // 將單行編輯框新增到視窗中
        window.setLayout(new QVBoxLayout);
    window.layout()->addWidget(lineEdit);
    //QVBoxLayout layout;
    //layout.addWidget(lineEdit);
    //widget.setLayout(layout);
    // 顯示視窗
    window.show();

    // 執行應用程式
    return app.exec();
}

image-20240518165902894

image-20240518165931928

image-20240518165956547

QTabWidget

QTabWidget 是 Qt 框架中的一個部件（widget），用於建立具有選項卡（tab）介面的容器。它提供了一種將多個頁面組織在一起並以選項卡的形式進行切換的方式。

QTabWidget *tabWidget = new QTabWidget(widget);// 建立選項卡小部件
// 建立選項卡頁面 1
QWidget *page1 = new QWidget();
QVBoxLayout *page1Layout = new QVBoxLayout(page1);
page1Layout->addWidget(new QPushButton("Button 1"));
page1Layout->addWidget(new QPushButton("Button 2"));

// 建立選項卡頁面 2
QWidget *page2 = new QWidget();
QVBoxLayout *page2Layout = new QVBoxLayout(page2);
page2Layout->addWidget(new QPushButton("Button 3"));
page2Layout->addWidget(new QPushButton("Button 4"));
// 將選項卡頁面新增到 QTabWidget
tabWidget->addTab(page1, "Tab 1");
tabWidget->addTab(page2, "Tab 2");
layout->addWidget(tabWidget);

image-20240518171131811

image-20240518171140247

基本的元件使用就講到這裡，剩下的遇到了再積累。之後介紹深層次的自定義部件，訊號槽函式使用的原理等內容。

相關文章