CSDN話題挑戰賽第2期
參賽話題：Qt應用程序開發

文章目錄

• • 8 常用控件
  • • 8.1 QLabel 控件使用
    • 8.2 QLineEdit
    • 8.3 其他控件
    • 8.4 自定義控件

8 常用控件

Qt為我們應用程序界面開發提供的一系列的控件，下面我們介紹兩種最常用一些控件，所有控件的使用方法我們都可以通過幫助文檔獲取。

8.1 QLabel 控件使用

QLabel是我們最常用的控件之一，其功能很強大，我們可以用來顯示文本，圖片和動畫等。

1、顯示文字（普通文本、html）

通過QLabel類的setText函數設置顯示的內容:

void setText(const QString &)

• 可以顯示普通文本字符串

QLable *label = new QLable;

label->setText(“Hello, World!”);

• 可以顯示HTML格式的字符串

  比如顯示一個鏈接：

QLabel * label = new QLabel(this);

label ->setText(“Hello, World”);

label ->setText(“

<a href=“https://www.baidu.com”>百度一下

”);

label ->setOpenExternalLinks(true);

其中setOpenExternalLinks()函數是用來設置用戶點擊鏈接之后是否自動打開鏈接，如果參數指定為true則會自動打開。

2、顯示動畫

可以使用QLabel 的成員函數setMovie加載動畫，可以播放gif格式的文件

void setMovie(QMovie * movie)

首先定義QMovied對象，并初始化:

QMovie *movie = new QMovie(“:/Mario.gif”);

播放加載的動畫：

movie->start();

將動畫設置到QLabel中：

QLabel *label = new QLabel；

label->setMovie(movie);

8.2 QLineEdit

Qt提供的單行文本編輯框。

1、設置/獲取內容

• 獲取編輯框內容使用text（），函數聲明如下：

QString text() const

• 設置編輯框內容

void setText(const QString &)

2、設置顯示模式

使用QLineEdit類的setEchoMode () 函數設置文本的顯示模式,函數聲明:

void setEchoMode(EchoMode mode)

EchoMode是一個枚舉類型,一共定義了四種顯示模式:

• QLineEdit::Normal 模式顯示方式，按照輸入的內容顯示。

• QLineEdit::NoEcho 不顯示任何內容，此模式下無法看到用戶的輸入。

• QLineEdit::Password 密碼模式，輸入的字符會根據平臺轉換為特殊字符。

• QLineEdit::PasswordEchoOnEdit 編輯時顯示字符否則顯示字符作為密碼。

另外，我們再使用QLineEdit顯示文本的時候，希望在左側留出一段空白的區域，那么，就可以使用QLineEdit給我們提供的setTextMargins函數：

void setTextMargins(int left, int top, int right, int bottom)

用此函數可以指定顯示的文本與輸入框上下左右邊界的間隔的像素數。

8.3 其他控件

Qt中控件的使用方法可參考Qt提供的幫助文檔。

項目名稱：08_OtherControl

widget.cpp

#include "widget.h" #include "ui_widget.h" #include<QMovie>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//設置默認值//棧控件使用//scrollArea按鍵connect(ui->btn_scrollArea,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(2);});//toolBox按鈕connect(ui->btn_ToolBox,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(1);});//TabWidget按鈕connect(ui->btn_GroupBox,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(0);});//下拉框ui->comboBox->addItem("奔馳");ui->comboBox->addItem("寶馬");ui->comboBox->addItem("特斯拉");//選中特斯拉connect(ui->btn_select,&QPushButton::clicked,[=](){ui->comboBox->setCurrentIndex(2);});//利用QLabel顯示圖片ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"));//利用QLabel顯示，GIF動態圖片QMovie *movie = new QMovie(":/Image/mario.gif");ui->lbl_movie->setMovie(movie);//播放動圖movie->start(); }Widget::~Widget() {delete ui; }

運行效果圖

8.4 自定義控件

在搭建Qt窗口界面的時候，在一個項目中很多窗口，或者是窗口中的某個模塊會被經常性的重復使用。一般遇到這種情況我們都會將這個窗口或者模塊拿出來做成一個獨立的窗口類，以備以后重復使用。

在使用Qt的ui文件搭建界面的時候，工具欄欄中只為我們提供了標準的窗口控件，如果我們想使用自定義控件怎么辦？

例如：我們從QWidget派生出一個類SmallWidget，實現了一個自定窗口，

// smallwidget.h class SmallWidget : public QWidget {Q_OBJECT public:explicit SmallWidget(QWidget *parent = 0);signals:public slots: private:QSpinBox* spin;QSlider* slider; };// smallwidget.cpp SmallWidget::SmallWidget(QWidget *parent) : QWidget(parent) {spin = new QSpinBox(this);slider = new QSlider(Qt::Horizontal, this);// 創建布局對象QHBoxLayout* layout = new QHBoxLayout;// 將控件添加到布局中layout->addWidget(spin);layout->addWidget(slider);// 將布局設置到窗口中setLayout(layout);// 添加消息響應connect(spin, static_cast<void (QSpinBox::*)(int)>(&QSpinBox::valueChanged),slider, &QSlider::setValue);connect(slider, &QSlider::valueChanged, spin, &QSpinBox::setValue); }

那么這個SmallWidget可以作為獨立的窗口顯示,也可以作為一個控件來使用：

打開Qt的.ui文件,因為SmallWidget是派生自Qwidget類,所以需要在ui文件中先放入一個QWidget控件, 然后再上邊鼠標右鍵

彈出提升窗口部件對話框

添加要提升的類的名字,然后選擇 添加

添加之后,類名會顯示到上邊的列表框中,然后單擊提升按鈕,完成操作.

我們可以看到, 這個窗口對應的類從原來的QWidget變成了SmallWidget

再次運行程序,這個widget_3中就能顯示出我們自定義的窗口了.

項目名稱：05_Qt_Contral

mainwindow.cpp

#include "mainwindow.h" #include "ui_mainwindow.h" #include<QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);//設置單選按鈕 默認選中男ui->rBtnMan->setChecked(true);//選中女后 打印信息connect(ui->rBtnWoman,&QRadioButton::clicked,[=](){qDebug()<<"選中女了";});//多選按鈕 選中老板人好后 打印一句話//選中返回2 未選中返回0connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){ // qDebug()<<"老板人好";qDebug()<<state;}); }MainWindow::~MainWindow() {delete ui; }

運行效果圖：

2、再添加listWidget組件后

mainwindow.cpp

#include "mainwindow.h" #include "ui_mainwindow.h" #include<QDebug>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);//設置單選按鈕 默認選中男ui->rBtnMan->setChecked(true);//選中女后 打印信息connect(ui->rBtnWoman,&QRadioButton::clicked,[=](){qDebug()<<"選中女了";});//多選按鈕 選中老板人好后 打印一句話//選中返回2 未選中返回0connect(ui->cBox,&QCheckBox::stateChanged,[=](int state){ // qDebug()<<"老板人好";qDebug()<<state;});//利用listWidget 寫詩 // QListWidgetItem * item = new QListWidgetItem("鋤禾日當午"); // //將一行詩放入到listWidget控件中 // ui->listWidget->addItem(item); // //設置為水平居中 // item->setTextAlignment(Qt::AlignHCenter);//QStringList QList<QString>QStringList list;list<<"鋤禾日當午"<<"汗滴禾下土"<<"誰知盤中餐"<<"粒粒皆辛苦";ui->listWidget->addItems(list); }MainWindow::~MainWindow() {delete ui; }

運行效果圖：

項目名稱：06_TreeWidget

widget.cpp

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//treeWidget樹控件使用//設置水平頭ui->treeWidget->setHeaderLabels(QStringList()<<"英雄"<<"英雄介紹");QTreeWidgetItem * LiItem = new QTreeWidgetItem(QStringList()<<"力量");QTreeWidgetItem * MinItem = new QTreeWidgetItem(QStringList()<<"敏捷");QTreeWidgetItem * ZhiItem = new QTreeWidgetItem(QStringList()<<"智力");//加載頂層的節點ui->treeWidget->addTopLevelItem(LiItem);ui->treeWidget->addTopLevelItem(MinItem);ui->treeWidget->addTopLevelItem(ZhiItem);//追加子節點QStringList heroL1,heroL2;heroL1<<"剛被豬"<<"前排坦克，能在吸收傷害的同時造成可觀的范圍輸出";heroL2<<"船長"<<"前排坦克，能肉能輸出能控場的全能英雄";QTreeWidgetItem * l1 = new QTreeWidgetItem(heroL1);QTreeWidgetItem * l2 = new QTreeWidgetItem(heroL2);LiItem->addChild(l1);LiItem->addChild(l2);QStringList heroM1,heroM2;heroM1<<"月騎"<<"中排物理輸出，可以使用分裂利刃攻擊多個目標";heroM2<<"小魚人"<<"前排戰士，擅長偷取敵人的屬性來增強自身戰力";QTreeWidgetItem * m1 = new QTreeWidgetItem(heroM1);QTreeWidgetItem * m2 = new QTreeWidgetItem(heroM2);MinItem->addChild(m1);MinItem->addChild(m2);QStringList heroZ1,heroZ2;heroZ1<<"死靈法師"<<"前排法師坦克，魔法抗性較高，擁有治療技能";heroZ2<<"巫醫"<<"后排輔助法師，可以使用奇特的巫術詛咒敵人與治療隊友";QTreeWidgetItem * z1 = new QTreeWidgetItem(heroZ1);QTreeWidgetItem * z2 = new QTreeWidgetItem(heroZ2);ZhiItem->addChild(z1);ZhiItem->addChild(z2);}Widget::~Widget() {delete ui; }

運行效果圖：

項目名稱：07_TableWidget

widget.cpp

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//TableWidget 控件//設置列數ui->tableWidget->setColumnCount(3);//設置水平表頭ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性別"<<"年齡");//設置行數ui->tableWidget->setRowCount(5);//設置正文 // ui->tableWidget->setItem(0,0,new QTableWidgetItem("亞瑟"));QStringList nameList;nameList<<"亞瑟"<<"趙云"<<"張飛"<<"關羽"<<"花木蘭";QStringList sexList;sexList<<"男"<<"男"<<"男"<<"男"<<"女";for(int i = 0;i<5;i++){int col = 0;ui->tableWidget->setItem(i,col++,new QTableWidgetItem(nameList[i]));ui->tableWidget->setItem(i,col++,new QTableWidgetItem(sexList[i]));//int 轉 QStringui->tableWidget->setItem(i,col++,new QTableWidgetItem(QString::number((i+18))));} }Widget::~Widget() {delete ui; }

運行結果：

如果對你有幫助的話，請不要忘了給我一點點點…支持 ( ^ o ^)/~

總結

以上是生活随笔為你收集整理的【第8章：常用控件】的全部內容，希望文章能夠幫你解決所遇到的問題。

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