四、基本組件
- Designer?設計師(重點)
Qt包含了一個Designer程序,用于通過可視化界面設計開發界面,保存文件格式為.ui(界面文件)。界面文件內部使用xml語法的標簽式語言。
在Qt?Creator中創建文件時,選中界面文件選項,可以讓自帶的窗口類使用界面文件。
所有Desiger中的操作都可以通過C++代碼實現。
2、布局Layout(掌握)
可以把布局看作是一個透明的盒子,內部可以放置子組件,這些內部的組件會按照布局預設的規則自動排序。
垂直布局:內部組件豎著排成一列。
水平布局:內部組件橫著排成一行。
表格布局:內部組件排布成n*m的表格。
表單布局:用戶搭建用戶輸入的布局效果。
選中布局后,點擊可以打破布局。
布局可以貼合窗口。只需要選中窗口對象后,再次點擊按鈕之一即可。
可以使用伸展組件可以填充空白。
布局可以嵌套,對于外層布局而言,內層布局相當于一個外層布局的子組件。
3、QWidget類(掌握)
QWidget的屬性在Designer中顯示為淡黃色,
策略:除非必要情況,或實現特殊功能,否則我們的策略進行不要進行修改,因為當前策略對當前控件是最友好的。
4、界面文件與C++代碼的關系(熟悉)
5、QLabel標簽(掌握)
5.1?基本屬性
QLabel用于顯示文字或圖片,需要注意的是,QLabel不能與用戶交互(不能點擊),只能展示使用,因此沒有合適的信號函數。
QLabel常用屬性如下:
我們可以直接對標簽進行命名,系統默認的名字就是“標簽名稱_序號”。例如:
5.2?添加資源庫
把圖片導入到項目中,成為項目資源,直接使用Qt的虛擬資源路徑導入圖片,可以在任意環境中使用這些資源圖片。
Qt支持以下幾種常見的圖片格式:
jpg(不包含透明度)、png(包含透明度)、gif(動圖)等。
注意導入的圖片不能過大(分辨率過高或文件體積過大),因為圖片的操作非常消耗資源,圖片過大會過度浪費資源。
下面是導入圖片成為項目資源的操作步驟:
- 在QtCreator中選中項目名稱,鼠標右鍵,點擊“添加新文件”。
- 在彈出的窗口中,按照下圖進行操作
- 在彈出的窗口中給資源文件命名。例如res
- 在項目管理界面,直接點擊“完成”。可以看到在項目中多了個.qrc格式的資源文件
- 把命名好的(不包含中文字符)的圖片文件放置到項目的工作目錄中。
6、選中qrc文件,點擊
,可以給資源文件新建一個虛擬路徑。
7、選中qrc文件,點擊,可以導入圖片到項目中成為資源。
- 導入完成后,可以在qrc文件中看到導入成功的圖片。
5.3?使用資源庫
1、點擊重新構建項目。然后就可以在Designer找到圖片資源并使用了。
2、添加圖片后,圖片比較大,可能會顯示不全,需要把scaledContents縮放模式點上。
3、為了測試方便,我們圖片最小寬高設置為400、最大寬高也設置成400、此時我們發現,圖片變形。
5.4?使用代碼添加圖片
1、我們也可以通過代碼,加載圖片,以及修剪圖片尺寸。
- 如果我們通過代碼,加載操作圖片,我們需要使用#include<QPixmap>頭文件,圖片類頭文件。
- 創建一個圖片類對象。
//?圖片類構造函數
//?參數1:圖片資源路徑(qrc文件鼠標右鍵獲取路徑)
//?參數2:樣板格式,使用默認值即可。
//?參數3:圖片顏色格式,使用默認即可。
QPixmap::?QPixmap(const?QString?&?fileName,?const?char?*?format?=?0,?Qt::ImageConversionFlags?flags?=?Qt::AutoColor)
- 當前已經創建了圖片類的對象,但是還需要縮放,指定圖片輸出模式。
//?縮放
//?參數1:QSize類型對象,表示目標尺寸,需要添加頭文件#include<QSize>
//?參數2:縮放模式,是一個枚舉類型,共有三種縮放模式
//?參數3:以速度還是質量優先,兩種模式。默認速度優先,也是一個枚舉。
//?返回值:轉換后的QPixmap對象。
QPixmap?QPixmap::?scaled(const?QSize?&?size,?Qt::AspectRatioMode?aspectRatioMode?=?Qt::IgnoreAspectRatio,?Qt::TransformationMode?transformMode?=?Qt::FastTransformation)?const
QSize類
//?QSize構造函數
//?寬度以及高度
QSize::?QSize(int?width,?int?height)
需要注意的是,盡量在項目開發之前使用ps等軟件預先處理好圖片,減少代碼運行時的開銷,提高代碼的運行效率。減少資源占用。
#ifndef?DIALOG_H
#define?DIALOG_H#include?<QDialog>
#include?<QPixmap>?//?圖片類
#include?<QSize>namespace?Ui?{
class?Dialog;
}class?Dialog?:?public?QDialog
{
????Q_OBJECTpublic:
????explicit?Dialog(QWidget?*parent?=?0);
????~Dialog();private:
????Ui::Dialog?*ui;
};#endif?//?DIALOG_H
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);
????//?創建一個圖片對象
????//?參數:圖片資源路徑
????QPixmap?pic(":/new/prefix1/g.jpg");????//?定義size對象
????QSize?size(ui->label->width(),ui->label->height());????//?縮放
????pic?=?pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);
????//?使用界面文件中的組件對象
????ui->label->setPixmap(pic);
}Dialog::~Dialog()
{
????delete?ui;
}
5.5?使用代碼添加動態圖
添加動態圖:
- 需要將我們的動態圖,放到項目文件中,并改為.gif
- 添加完成后,需要將動態圖,加載到項目資源中。
電影類
如果需要播放動態圖,需要用到電影類,頭文件#include<QMovie>。
//?創建電影類對象,構造函數
//?參數1:資源路徑
//?參數2:輸出模式,默認就行
//?參數3:基類指針
QMovie::?QMovie(const?QString?&?fileName,?const?QByteArray?&?format?=?QByteArray(),?QObject?*?parent?=?0)
dialog.h
#ifndef?DIALOG_H
#define?DIALOG_H#include?<QDialog>
#include?<QPixmap>?//?圖片類
#include?<QSize>
#include?<QMovie>?//?電影類頭文件namespace?Ui?{
class?Dialog;
}class?Dialog?:?public?QDialog
{
????Q_OBJECTpublic:
????explicit?Dialog(QWidget?*parent?=?0);
????~Dialog();private:
????Ui::Dialog?*ui;
private:
????QMovie?*movie;??//?電影類指針
};#endif?//?DIALOG_H
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);
????//?創建一個圖片對象
????//?參數:圖片資源路徑
????QPixmap?pic(":/new/prefix1/g.jpg");????//?定義size對象
????QSize?size(ui->label->width(),ui->label->height());????//?縮放
????pic?=?pic.scaled(size,Qt::KeepAspectRatio,Qt::SmoothTransformation);
????//?使用界面文件中的組件對象
????ui->label->setPixmap(pic);????//?創建電影對象
????movie?=?new?QMovie(":/new/prefix1/test.gif");
????//?給QLabel設置電影
????ui->label_2->setMovie(movie);
????//?播放電影
????movie->start();}Dialog::~Dialog()
{
????delete?ui;
}
6、QAbstractButton按鈕類(掌握)
QAbstractButton是按鈕類的基類,因此內部包含了按鈕的基礎屬性和函數。
GroupBox分組盒子組件
QAbstractButton按鈕類的常用基本屬性
給按鈕添加一個圖標:
圖標文件可以通過下面的網站下載:
iconfont-阿里巴巴矢量圖標庫
按鈕類常用的信號如下:
注意:這個通知信號和別的信號存在區別,只有在狀態發生變化時發射。
攜帶的參數為當前狀態。
dialog.h
#ifndef?DIALOG_H
#define?DIALOG_H#include?<QDialog>
#include?<QDebug>namespace?Ui?{
class?Dialog;
}class?Dialog?:?public?QDialog
{
????Q_OBJECTpublic:
????explicit?Dialog(QWidget?*parent?=?0);
????~Dialog();private:
????Ui::Dialog?*ui;private?slots:
????void?toggledSlot(bool);
};#endif?//?DIALOG_H
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);
????connect(ui->radioButton_8,SIGNAL(toggled(bool)),
????????????this,SLOT(toggledSlot(bool)));
}Dialog::~Dialog()
{
????delete?ui;
}void?Dialog::toggledSlot(bool?checked)
{
????if(checked)
????{
????????qDebug()?<<?"肯德基被選中了"?;
????}
????else
????{
????????qDebug()?<<?"不選肯德基"?;
????}
}
QButtonGroup組件
可以使用QButtonGroup組件對多個按鈕進行分組,這是一個按鈕的邏輯分組,沒有任何的UI效果。其主要的目的是用一個信號槽同時監控多個按鈕對象的狀態。
QButtonGroup繼承于QObject并非Qwidget。所以它是不可見的,用戶無法從窗口上看到這個控件。
//?構造函數,堆區創建
QButtonGroup::?QButtonGroup(QObject?*?parent?=?0)
給按鈕組,添加控件
//?參數1:添加的控件
//?參數2:序號ID
void?QButtonGroup::?addButton(QAbstractButton?*?button,?int?id?=?-1)
發送的信號
參數中表示當前觸發的按鈕本身。
表示當前觸發的按鈕序號。
dialog.h
#ifndef?DIALOG_H
#define?DIALOG_H#include?<QDialog>
#include?<QDebug>
#include?<QButtonGroup>?//?按鈕組namespace?Ui?{
class?Dialog;
}class?Dialog?:?public?QDialog
{
????Q_OBJECTpublic:
????explicit?Dialog(QWidget?*parent?=?0);
????~Dialog();private:
????Ui::Dialog?*ui;
????QButtonGroup?*btp;private?slots:
????void?buttonToggledSlot(int,bool);
};#endif?//?DIALOG_H
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);????btp?=?new?QButtonGroup(this);
????btp->addButton(ui->checkBox,1);
????btp->addButton(ui->checkBox_2,2);
????btp->addButton(ui->checkBox_3,3);????//?注意,我們的按鈕控件,是可以多選的。但是按鈕組里的控件,默認是互斥的。
????//?所以,我們要解除按鈕組的互斥屬性。
????btp->setExclusive(false);????connect(btp,SIGNAL(buttonToggled(int,bool)),
????????????this,SLOT(buttonToggledSlot(int,bool)));
}Dialog::~Dialog()
{
????delete?ui;
}void?Dialog::buttonToggledSlot(int?id,?bool?checked)
{
????if(id?==?1)
????{
????????if(checked)
????????{
????????????qDebug()?<<?"PHP被選中了";
????????}
????????else
????????{
????????????qDebug()?<<?"不選PHP了"?;
????????}
????}
????else?if(id?==?2)
????{
????????if(checked)
????????{
????????????qDebug()?<<?"心之鋼被選中了";
????????}
????????else
????????{
????????????qDebug()?<<?"不選心之鋼了"?;
????????}
????}
????else?if(id?==?3)
????{
????????if(checked)
????????{
????????????qDebug()?<<?"java被選中了";
????????}
????????else
????????{
????????????qDebug()?<<?"不選java了"?;
????????}
????}
????else
????{????}
}
7、QLineEdit單行文本輸入框(掌握)
QLineEdit用于輸入一個單行文本。常用屬性如下。
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);????connect(ui->pushButton,SIGNAL(clicked()),
????????????this,SLOT(btnClickedSlot()));
}Dialog::~Dialog()
{
????delete?ui;
}void?Dialog::btnClickedSlot()
{
????QString?text?=?ui->lineEdit->text();
????qDebug()?<<?"第一個QLineEdit內容:"?<<?text;????text?=?ui->lineEdit_2->text();
????qDebug()?<<?"第二個QLineEdit內容:"?<<?text;}
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);????connect(ui->pushButton,SIGNAL(clicked()),
????????????this,SLOT(btnClickedSlot()));????connect(ui->lineEdit,SIGNAL(selectionChanged()),
????????????this,SLOT(selectChangedSlot()));????connect(ui->lineEdit,SIGNAL(textChanged(QString)),
????????????this,SLOT(textChangedSlot(QString)));
}Dialog::~Dialog()
{
????delete?ui;
}void?Dialog::btnClickedSlot()
{
????QString?text?=?ui->lineEdit->text();
????qDebug()?<<?"第一個QLineEdit內容:"?<<?text;????text?=?ui->lineEdit_2->text();
????qDebug()?<<?"第二個QLineEdit內容:"?<<?text;}void?Dialog::selectChangedSlot()
{
????qDebug()?<<?ui->lineEdit->selectedText();
????//????qDebug()?<<"1111"?;
}void?Dialog::textChangedSlot(QString?text)
{
????qDebug()?<<?text?;
}
8、ComboBox組合框(熟悉)
comboBox用于選擇一個選項。功能類似于QRadioButton。
常用屬性如下:
常用信號:
dialog.h
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);
????connect(ui->comboBox,SIGNAL(editTextChanged(QString)),
????????????this,SLOT(editTextChangedSlot(QString)));????connect(ui->comboBox,SIGNAL(highlighted(int)),
????????????this,SLOT(highlightedSlot(int)));
}Dialog::~Dialog()
{
????delete?ui;
}void?Dialog::editTextChangedSlot(QString?text)
{
????qDebug()?<<?text?;
}void?Dialog::highlightedSlot(int?index)
{
????qDebug()?<<?index;
}
9、若干與數字相關的組件(熟悉)
//?value?屬性值發生變化時發射的信號
//?參數為當前的value值
void valueChanged(int?value)
dialog.h
#ifndef?DIALOG_H
#define?DIALOG_H#include?<QDialog>
#include?<QDebug>namespace?Ui?{
class Dialog;
}class Dialog : public?QDialog
{
????Q_OBJECTpublic:explicit Dialog(QWidget?*parent?= 0);~Dialog();private:
????Ui::Dialog?*ui;
private?slots:void setValueSlot(int);
};#endif?//?DIALOG_H
dialog.cpp
#include?"dialog.h"
#include?"ui_dialog.h"Dialog::Dialog(QWidget?*parent)?:
????QDialog(parent),
????ui(new?Ui::Dialog)
{
????ui->setupUi(this);????connect(ui->dial,SIGNAL(valueChanged(int)),
????????????this,SLOT(setValueSlot(int)));
????connect(ui->horizontalScrollBar,SIGNAL(valueChanged(int)),
????????????this,SLOT(setValueSlot(int)));
????connect(ui->horizontalSlider,SIGNAL(valueChanged(int)),
????????????this,SLOT(setValueSlot(int)));
????connect(ui->progressBar,SIGNAL(valueChanged(int)),
????????????this,SLOT(setValueSlot(int)));
????connect(ui->spinBox,SIGNAL(valueChanged(int)),
????????????this,SLOT(setValueSlot(int)));
????connect(ui->verticalScrollBar,SIGNAL(valueChanged(int)),
????????????this,SLOT(setValueSlot(int)));
????connect(ui->verticalSlider,SIGNAL(valueChanged(int)),
????????????this,SLOT(setValueSlot(int)));
}Dialog::~Dialog()
{
????delete?ui;
}void?Dialog::setValueSlot(int?value)
{
????ui->dial->setValue(value);
????ui->horizontalScrollBar->setValue(value);
????ui->horizontalSlider->setValue(value);
????ui->progressBar->setValue(value);
????ui->spinBox->setValue(value);
????ui->verticalScrollBar->setValue(value);
????ui->verticalSlider->setValue(value);
}