設計器的使用及常用控件

文章目錄

• • 設計器的使用及常用控件
  • 一、設計器
  • 二、設計器中的常用控件

一、設計器

1.設計器的使用








2.通過代碼操作ui文件

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

• 你可以把設計器中的所有功能理解為ui->setupUi(this);的功勞，所以如果想要在代碼中修改ui界面，最好在這句代碼之后。
• 而操作ui界面中控件的方式和操作普通控件的代碼一樣，只不過加了一個ui->前綴，代表是ui界面中的控件

二、設計器中的常用控件

1.Layouts：代表界面布局

2. Spacers：代表間距等

3. Buttons：按鈕類

4. Item Views：數據庫相關

5. Item Witgets：文件目錄樹相關

6. Containers：容器

7. Input Widgets：輸出控件

8. Display Widgets：顯示控件

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

• 顯示文字 （普通文本、 html）
  通過 QLabel 類的 setText 函數設置顯示的內容:

voidsetText(const QString &)

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

QLable *label = new QLable; label->setText(“Hello, World!”);

• 可以顯示 HTML 格式的字符串
  比如顯示一個鏈接

QLabel * label = new QLabel(this); label ->setText("Hello, World"); label ->setText("<h1><a href=\"https://www.baidu.com\"> 百度一下</a></h1>"); label ->setOpenExternalLinks(true);

其中 setOpenExternalLinks()函數是用來設置用戶點擊鏈接之后是否自動打開
鏈接， 如果參數指定為 true 則會自動打開， 如果設置為 false， 想要打開鏈接
只 能 通 過 捕 捉 linkActivated() 信 號 ， 在 自 定 義 的 槽 函 數 中 使 用QDesktopServices::openUrl()打開鏈接， 該函數參數默認值為 false

QLabel * label = new QLabel(this); label ->setText("Hello, World"); label ->setText("<h1><a href=\"https://www.baidu.com\"> 百度一下</a></h1>"); // label->setOpenExternalLinks(true); connect(label, &QLabel::linkActivated, this, &MyWidget::slotOpenUrl); //槽函數 void MyWidget::slotOpenUrl(const QString &link) { QDesktopServices::openUrl(QUrl(link)); }

• 顯示圖片
  可以使用 QLabel 的成員函數 setPixmap 設置圖片

void setPixmap(const QPixmap &)

首先定義 QPixmap 對象

QPixmap pixmap;

然后加載圖片

pixmap.load(":/Image/boat.jpg");

最后將圖片設置到 QLabel 中

QLabel *label = new QLabel; label.setPixmap(pixmap);

• 顯示動畫

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

void setMovie(QMovie * movie)

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

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

播放加載的動畫：

movie->start();

將動畫設置到 QLabel 中：

QLabel *label = new QLabel； label->setMovie(movie);

10.QLineEdit控件

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

• 設置/獲取內容

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

QString text() const

設置編輯框內容

void setText(const QString &)

• 設置顯示模式

使用 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)

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

• 設置輸入提示

如果我們想實現一個與百度的搜索框類似的功能： 輸入一個或幾個字符， 下邊會
列出幾個跟輸入的字符相匹配的字符串， QLineEdit 要實現這樣的功能可以使用
該類的成員函數 setComleter()函數來實現:

voidsetCompleter(QCompleter * c)

創建 QCompleter 對象， 并初始化

QStringList tipList; tipList<< “Hello” << “how are you” << “Haha” << “oh, hello”; // 不區分大小寫 completer->setCaseSensitivity(Qt::CaseInsensitive); QCompleter *completer = new QCompleter(tipList, this);

QCompleter 類的 setCaseSensitivity()函數可以設置是否區分大小寫， 它的參數是一個枚舉類型：

Qt::CaseInsensitive 不區分大小寫
Qt::CaseSensitive 區分大小寫

如果不設置該屬性， 默認匹配字符串時是區分大小寫的。

另外我們還可以設置字符串其中某一部分匹配， 此功能可通過 QCompleter 類的
setFilterMode 函數來實現,函數聲明如下:

voidsetFilterMode(Qt::MatchFlags filterMode)

其參數為 Qt 定義的宏,有多重類型,具體可參考 Qt 幫助文檔， 要實現我們上邊提
到的功能， 參數可以使用 Qt::MatchContains：

completer->setFilterMode(Qt::MatchContains);

屬性設置完成之后， 將 QCompleter 對象設置到 QLineEdit 中：

QLineEdit *edit = new QLineEdit(this); edit->setCompleter(completer);

11.布局管理器

所謂 GUI 界面， 歸根結底， 就是一堆組件的疊加。 我們創建一個窗口， 把按鈕
放上面， 把圖標放上面， 這樣就成了一個界面。 在放置時， 組件的位置尤其重要。

• 我們必須要指定組件放在哪里， 以便窗口能夠按照我們需要的方式進行渲染。 這 就涉及到組件定位的機制。
• Qt 提供了兩種組件定位機制： 絕對定位和布局定位。
• 絕對定位就是一種最原始的定位方法： 給出這個組件的坐標和長寬值。這樣， Qt 就知道該把組件放在哪里以及如何設置組件的大小。 但是這樣做帶來的一個問題是， 如果用戶改變了窗口大小， 比如點擊最大化按鈕或者使用鼠標拖動窗口邊緣， 采用絕對定位的組件是不會有任何響應的。 這也很自然， 因為你并沒有告訴 Qt， 在窗口變化時， 組件是否要更新自己以及如何更新。 或者， 還有更簡單的方法： 禁止用戶改變窗口大小。 但這總不是長遠之計。
• 布局定位： 你只要把組件放入某一種布局， 布局由專門的布局管理器進行管
  理。 當需要調整大小或者位置的時候， Qt 使用對應的布局管理器進行調整。布局定位完美的解決了使用絕對定位的缺陷

Qt 提供的布局中以下三種是我們最常用的：

QHBoxLayout： 按照水平方向從左到右布局；
QVBoxLayout： 按照豎直方向從上到下布局；
QGridLayout： 在一個網格中進行布局， 類似于 HTML 的 table；

1. 水平/垂直/網格布局

下面我們通過一個例子來學習以下水平布局管理器的使用方法：

int main(int argc, char *argv[]) {QApplication app(argc, argv);QWidget window;window.setWindowTitle("Enter your age");QSpinBox *spinBox = new QSpinBox(&window);QSlider *slider = new QSlider(Qt::Horizontal, &window);spinBox->setRange(0, 130);slider->setRange(0, 130);QObject::connect(slider, &QSlider::valueChanged,spinBox, &QSpinBox::setValue);void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged;QObject::connect(spinBox, spinBoxSignal,slider, &QSlider::setValue);spinBox->setValue(35);//給控件設置布局QHBoxLayout *layout = new QHBoxLayout;layout->addWidget(spinBox);layout->addWidget(slider);window.setLayout(layout);window.show();return app.exec(); }

我們在這段代碼中引入了兩個新的組件： QSpinBox 和 QSlider。 QSpinBox 就是只能輸入數字的輸入框， 并且帶有上下箭頭的步進按鈕。 QSlider 則是帶有滑塊的滑竿

上面的代碼中 window.setLayout(layout); 是將布局設置到窗口 window 中， 在窗口中設置布局還有另一種寫法：

//給控件設置布局 QHBoxLayout *layout = new QHBoxLayout（window） ; layout->addWidget(spinBox); layout->addWidget(slider);

在創建布局對象的時候給新對象指定父窗口， 就等于給傳入的窗口設置了布局。另外布局與布局之間是可以嵌套使用的， 使用 addLayout（） 方法。 QVBoxLayout的使用方法與 QHBoxLayout 完全相同

關于上述代碼中信號和槽連接的解釋：

當數字輸入框顯示的內容發生改變的時候， 會發出一股信息， 滑塊會接收這一信
號， 并作出改變。 如果二者的信號槽連接寫成下邊這樣：

QObject::connect(spinBox, &QSpinBox::valueChanged, slider, &QSlider::setValue); 編譯器卻會報錯 no matching function for call to 'QObject::connect(QSpinBox*&, <unresolved overloaded function type>, QSlider*&, void (QAbstractSlider::*)(int))'

這是怎么回事呢？ 從出錯信息可以看出， 編譯器認為 QSpinBox::valueChanged 是一個 overloaded 的函數。 我們看一下 QSpinBox 的文檔發現， QSpinBox 的確有兩個信號：

void valueChanged(int)
void valueChanged(const QString &)

當我們使用&QSpinBox::valueChanged 取函數指針時， 編譯器不知道應該取哪一個函數（記住前面我們介紹過的， signal 也是一個普通的函數。 ） 的地址， 因此報錯。 解決的方法很簡單， 編譯器不是不能確定哪一個函數嗎？ 那么我們就顯式指定一個函數。 方法就是， 我們創建一個函數指針， 這個函數指針參數指定為 int：

void (QSpinBox:: *spinBoxSignal)(int) = &QSpinBox::valueChanged;

然后我們將這個函數指針作為 signal， 與 QSlider 的函數連接：

QObject::connect(spinBox, spinBoxSignal, slider, &QSlider::setValue);

這樣便避免了編譯錯誤

2. 自定義控件

在搭建 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 可以作為獨立的窗口顯示,也可以作為一個控件來使用

總結

以上是生活随笔為你收集整理的设计器的使用及常用控件的全部內容，希望文章能夠幫你解決所遇到的問題。

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