Qt图形界面编程入门（基本窗口及控件）

admin管理员组

文章数量:1794759

Qt图形界面编程入门（基本窗口及控件）

基本窗口类QWidget

QWidget是所有窗体部件的基类，例如对话框类，主窗体类，以及其他诸如按钮，编辑框，标签等等都是由QWidget派生得到，QWidget拥有的方法往往都可以在其他子类中使用。

窗体的几何尺寸分为包含边框和标题、不包含边框和标题两种。

以下是常用函数

（1）包括窗框（即整个窗口）的函数。

x()，y()，pos()：获取左上角坐标

frameGeometry()：获取窗体尺寸（返回一个矩形QRect）

move()：移动窗体到某个位置。

（2）不包括窗体（即客户区域）（返回一个矩形QRect）

width()，heigh()：获取客户区宽度、高度

setGeometry()：设置窗体在屏幕中的位置。

窗体几何尺寸的设置和获取

首先我们建立一个基于QWidget的无UI设计界面的Qt Widgets Application应用。

在main.cpp头部文件添加

#include<QDebug>

 

 

然后，修改主函数main.cpp文件如下

 

 

#include "widget.h" #include <QApplication> #include<QDebug> int main(int argc, char *argv[]) { QApplication a(argc, argv); Widget w; w.show(); w.setGeometry(50,50,200,200); qDebug() << w.x() << " " << w.y(); qDebug() << w.geometry().width() << " " << w.frameGeometry().width(); qDebug() << w.geometry().height() << " " << w.frameGeometry().height(); return a.exec(); }

保存后运行

运行上面的程序会显示一个窗口，如图

它的客户区左上角距离屏幕左上角边界均为50，客户区的长和宽均为200

这里的（41,12）是窗体框架左上角的坐标，它在客户区的左上角（50,50）的左上方。而显示器左上角是原点。

setGeometry函数设置客户区在屏幕上的位置及其宽度、高度。

窗口标题及大小控制

首先建立一个基于QWidget的有UI设计界面的Qt Widgets Application应用。

然后修改Widget.cpp文件的构造函数如下：

窗口控件类概览

标签

标签（QLabel）一般用于显示简单的文本。例如：

QLabel *label = new QLabel(this); label->setGemoetry(10,10,150,80); label->setText("Label"); //设置文本对齐方式，多个参数用 | 分隔 label->setAlignment(Qt::AlignHCenter|Qt::AlignVCenter);

标签文本对齐方式定义如下：

AlignTop：将文本添加到QLabel对象的上部

AlignButton：将文本添加到QLabel对象的下部

AlignLeft：沿着QLabel对象的左边添加文本

AlignRight：沿着QLabel对象的右边添加文本

AlignHCenter：将文本添加到QLabel对象水平中心的位置

AlignVCenter：将文本添加到QLabel对象的垂直中心位置

用标签显示位图

第一步，建立一个基类位QWidget的应用

添加需要展示的图片

第二步，修改main函数如下

#include "widget.h" #include <QApplication> #include <QLabel> #include <QImage> int main(int argc, char *argv[]) { QApplication a(argc, argv); Widget w; QLabel *pTag = new QLabel(&w); //路径不同，图片属性不同，请自行修改路径和属性 //QImage image("e:/img.png"); pTag->setPixmap(QPixmap::fromImage(image)); pTag->setGeometry(0,0,image.width(),image.height()); w.show(); return a.exec();

这个例子用QImage对象载入E盘根目录下的png文件，再利用QPixmap::formImage静态函数将png格式转换为xpm格式，然后用setPixmap函数设置标签位图。

按钮

对于普通按钮而言，可设置图标，文字，显示状态等。

按钮的使用

第一步，建立一个基类为QDialog的应用，在创建过程中取消UI界面设计文件。

第二步，修改dialog.h文件如下

第三步，打开“新建”菜单，选择Qt ->“Qt资源文件”，在工程项目中添加资源文件，可任意命名

第四步，在工程目录中添加文件夹rc，然后将两个图标文件放入其中(在线制作ico图标  www.bitbug/  )

第五步，在button.qrc项目上右击，在弹出的菜单选择“添加现有文件”，将rc目录下的图标分别添加到工程项目中。

第六步，修改dialog.cpp文件的Dialog类构造函数：

resize(150,150); //设置主窗体大小 pushButton1 = new QPushButton(this); // 新建按钮 QIcon icon1(":/rc/bitbug_favicon.ico"); // 定义图标对象 pushButton1->setIcon(icon1); // 设置按钮图标 pushButton1->setGeometry(20,20,70,40); pushButton2 = new QPushButton(this); QIcon icon2(":bitbug_favicon(1).ico"); pushButton2->setIcon(icon2); pushButton2->setFlat(true); // 将按钮设置为平面显示 pushButton2->setText("Open"); // 设置按钮的文本信 pushButton2->setGeometry(20,70,70,40);

点击运行后

单选按钮、复选框

单选按钮用于在众多选项中选择一项，复选框用于在众多选项中同时选择多项

单选按钮，复选框的使用

第一步，建立一个基于QWidget类的有UI设计界面的应用程序。

第二步，在UI设计器中放入两个复选框，两个标签，两个单选按钮

在本例中，修改单选按钮和复选框的objectName和text属性如下：

两个单选按钮的objectName改为RadioBtn1，RadioBtn2

两个单选按钮的文本test改为男，女

两个复选框的objectName改为CheckBox1，CheckBox2

两个复选框的文本test改为教师，学生

两个标签的objectName改为label，label_2

 

void Widget::on_RadioBtn1_clicked() { // "男"单选按钮为选中状态 ui->RadioBtn1->setChecked(true); //label标签显示相应的内容 ui->label->setText("你选中了男生"); } void Widget::on_RadioBtn2_clicked() { // "女"单选按钮为选中状态 ui->RadioBtn2->setChecked(true); //label标签显示相应的内容 ui->label->setText("你选中了女生"); } void Widget::displayCheckBox() { QString str; //定义字符串 //使用条件语句判断 if(ui->CheckBox1->isChecked() && ui->CheckBox2->isChecked()) { str = "你选中了教师！\\n你选中了学生！"; }else if(ui->CheckBox1->isChecked()){ str +="你选中了教师！" ; }else if(ui->CheckBox2->isChecked()){ str +="你选中了学生！"; } //将str显示到label_2标签 ui->label_2->setText(str); } void Widget::on_CheckBox1_clicked() {//调用自定义公有成员函数 this->displayCheckBox(); } void Widget::on_CheckBox2_clicked() { this->displayCheckBox(); }

先告一段落。下一篇实现一下组合框的使用

本文标签： 控件图形界面入门窗口QT