QT＜六＞界面布局、常用控件

最新推荐文章于 2024-05-11 00:10:50 发布

neko233

最新推荐文章于 2024-05-11 00:10:50 发布

阅读量1.7k

点赞数 2

分类专栏： QT 文章标签： qt

本文链接：https://blog.csdn.net/neko233/article/details/114585782

版权

QT 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、界面布局

所谓 GUI 界面，归根结底，就是一堆组件的叠加。Qt 提供了两种组件定位机制：绝对定位和布局定位。

绝对定位：就是一种最原始的定位方法：给出这个组件的坐标和长宽值。
这样，Qt 就知道该把组件放在哪里以及如何设置组件的大小。但是这样做带来的一个问题是，如果用户改变了窗口大小采用绝对定位的组件是不会有任何响应的。或者，还有更简单的方法：禁止用户改变窗口大小。
布局定位：你只要把组件放入某一种布局，布局由专门的布局管理器进行管理。当需要调整大小或者位置的时候，Qt 使用对应的布局管理器进行调整。

布局定位完美的解决了使用绝对定位的缺陷。
Qt 提供的布局中以下三种是我们最常用的：

QHBoxLayout：按照水平方向从左到右布局；
QVBoxLayout：按照竖直方向从上到下布局；
QGridLayout：在一个网格中进行布局，类似于 HTML 的 table；

具体视频教程：QT从入门到实战完整版-登陆窗口布局

1、系统提供的布局控件
在这里插入图片描述
2、系统提供的布局控件

第二种布局方式是利用控件里的widget来做布局，在Containers中。
在这里插入图片描述
在widget中的控件可以进行水平、垂直、栅格布局等操作，比较灵活。
在布局的同时我们需要灵活运用弹簧的特性让我们的布局更加的美观。
下面是一个登陆窗口，利用widget可以搭建出如下登陆界面：

默认窗口和控件之间有间隙，可以调整 layoutLeftMargin将其设置为0。
在这里插入图片描述

二、常用控件

1、按钮组

1） QPushButton 常用按钮
在这里插入图片描述
2） QToolButton 工具按钮
用于显示图片。先在项目中添加资源文件，在icon参数中选择添加的图片。

如图想显示文字，在text中修改要显示的文字。文字默认不会显示，需要修改风格：toolButtonStyle

按钮凸起风格autoRaise
在这里插入图片描述

3） radioButton 单选按钮
若需要创建多组单选按钮，需要使用Group Box将其分组。可以在Group Box中使用布局。
在这里插入图片描述
设置选中的默认值

    //设置单选按钮，默认选中男
    ui->rBtnMan->setChecked(true);
    //选择女后 打印信息
    connect(ui->rBtnWoman,&QRadioButton::clicked,[=](){
        qDebug()<<"Women";
    });

4） checkbox多选按钮
若需要创建多组多选按钮，需要使用Group Box将其分组。可以在Group Box中使用布局。
在这里插入图片描述
监听状态

    //多选按钮状态 2是选择 0是不选
    connect(ui->checkBox_1,&QCheckBox::stateChanged,[=](int state){
        qDebug()<<state;
    });

状态值2 选中、1 半选、0 未选中，需要设置tristate之后才会有半选中的状态。
在这里插入图片描述

2、QListWidget 列表容器
在这里插入图片描述
1） QListWidgetItem * item 一行内容
2） addItem ( item ) 添加到列表中
3）设置居中方式 item->setTextAlignment(Qt::AlignHCenter);
4）可以利用addItems一次性添加整个内容

//利用listWidget展示诗
QListWidgetItem* item = new QListWidgetItem("一首诗");
//将一行诗放入ListWidget中
ui->listWidget->addItem(item);
//设置居中显示
item->setTextAlignment(Qt::AlignHCenter);

//批量插入item ,利用QStringList，但是无法设置居中
QStringList list;
list<<"一二三四五"<<"上山打老虎"<<"老虎不在家"<<"打到小松鼠";
ui->listWidget->addItems(list);

在这里插入图片描述

3、QTreeWidget 树控件
在这里插入图片描述
1）设置头
setHeaderLabels(QStringList());
2）创建根节点
QTreeWidgetItem * liItem = new QTreeWidgetItem(QStringList());
3）添加根节点到树控件上
addTopLevelItem(liItem);
4）添加子节点
liItem->addChild(l1);

//treeWidget控件使用
//设置水平头
ui->treeWidget->setHeaderLabels(QStringList()<<"商品"<<"价格");//创建一个匿名对象来设置水平标题

QTreeWidgetItem *tRItem = new QTreeWidgetItem(QStringList()<<"肉类");
QTreeWidgetItem *tNItem = new QTreeWidgetItem(QStringList()<<"奶类");
QTreeWidgetItem *tLItem = new QTreeWidgetItem(QStringList()<<"零食");
//添加顶层节点
ui->treeWidget->addTopLevelItem(tRItem);
ui->treeWidget->addTopLevelItem(tNItem);
ui->treeWidget->addTopLevelItem(tLItem);

//追加子节点
QStringList food;
food << "牛肉" <<"$40";
QTreeWidgetItem* tRI1 = new QTreeWidgetItem(food);
tRItem->addChild(tRI1);

food.clear();
food << "牛奶" <<"$5";
QTreeWidgetItem* tNI1 = new QTreeWidgetItem(food);
tNItem->addChild(tNI1);

food.clear();
food << "辣条" <<"$1";
QTreeWidgetItem* tLI1 = new QTreeWidgetItem(food);
tLItem->addChild(tLI1);

food.clear();
food << "奥利奥" <<"$2";
QTreeWidgetItem* tLI2 = new QTreeWidgetItem(food);
tLItem->addChild(tLI2);

在这里插入图片描述

4、QTableWidget 表格控件
在这里插入图片描述
1）设置列数
setColumnCount(int);
2）设置水平表头
setHorizontalHeaderLabels(QStringList());
3)）设置行数
setRowCount(int);
4）设置正文
setItem(row,col, new QTableWidgetItem(""));

//TableWidget控件
//设置表格列数
ui->tableWidget->setColumnCount(3);//3列
//设置水平表头
ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性别"<<"年龄");
//设置行数
ui->tableWidget->setRowCount(5);
//设置正文
//    ui->tableWidget->setItem(0,0,new QTableWidgetItem("A"));
QStringList nameList;
nameList<<"A"<<"B"<<"C"<<"D"<<"E";

QList<QString> sexList;//同等于 QStringList
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.at(i)));
    ui->tableWidget->setItem(i,col++,new QTableWidgetItem(QString::number(i+15)));
}

在这里插入图片描述

5、其他控件介绍

1）stackedWidget 栈控件在这里插入图片描述

可以将按钮与栈控件关联起来，点击按钮切换不同的页面

 //栈控件使用
//设置默认展示
ui->stackedWidget->setCurrentIndex(0);
//按钮切换
connect(ui->p1,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(0); });
connect(ui->p2,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(1); });
connect(ui->p3,&QPushButton::clicked,[=](){ ui->stackedWidget->setCurrentIndex(2); });

2）下拉框
在这里插入图片描述
使用addItem()添加下拉框选项，可以将选项与按钮关联。

//下拉框
ui->comboBox->addItem("1990");
ui->comboBox->addItem("1991");
ui->comboBox->addItem("1992");
//点击按钮选中1992  使用场景例如恢复默认值
connect(ui->p1992,&QPushButton::clicked,[=](){
    //两种方式均可
  //  ui->comboBox->setCurrentIndex(2);
      ui->comboBox->setCurrentText("1992");
    });

3）QLabel

QLabel是我们最常用的控件之一，其功能很强大，我们可以用来显示文本，图片和动画等。
在这里插入图片描述

显示文字（普通文本、html）

通过QLabel类的setText函数设置显示的内容:

void	setText(const QString &)

可以显示普通文本字符串

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

可以显示HTML格式的字符串，比如显示一个链接:

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

其中setOpenExternalLinks()函数是用来设置用户点击链接之后是否自动打开链接，如果参数指定为true则会自动打开

显示图片

可以使用QLabel的成员函数setPixmap设置图片

void	setPixmap(const QPixmap &)

//利用QLabel显示图片
    ui->labImg->setPixmap(QPixmap(":/Image/Frame.jpg"));

显示动图 gif图片

可以使用QLabel 的成员函数setMovie加载动画，可以播放gif格式的文件

void	setMovie(QMovie * movie)

 //利用QLable显示动图 图片不会自动播放
 QMovie *movie = new QMovie(":/Image/mario.gif");
 ui->labGif->setMovie(movie);
 //播放动图
 movie->start();

4）QLineEdit单行文本编辑框

在这里插入图片描述
设置/获取内容

获取编辑框内容使用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)

用此函数可以指定显示的文本与输入框上下左右边界的间隔的像素数。

6、自定义控件

在搭建Qt窗口界面的时候，在一个项目中很多窗口，或者是窗口中的某个模块会被经常性的重复使用。一般遇到这种情况我们都会将这个窗口或者模块拿出来做成一个独立的窗口类，以备以后重复使用。
例如：我们从QWidget派生出一个类SmallWidget，实现了一个自定窗口。

#ifndef SMALLWIDGET_H
#define SMALLWIDGET_H

#include <QWidget>
#include <QSpinBox>
#include <QSlider>
class smallWidget : public QWidget
{
    Q_OBJECT
public:
    explicit smallWidget(QWidget *parent = nullptr);

signals:

public slots:

private:
    QSpinBox* spin;
    QSlider* slider;
};

#endif // SMALLWIDGET_H

#include "smallwidget.h"
#include <QHBoxLayout>
smallWidget::smallWidget(QWidget *parent) : QWidget(parent)
{
    spin = new QSpinBox(this);
    slider = new QSlider(Qt::Horizontal,this);

    //创建布局对象
    QHBoxLayout *layout = new QHBoxLayout(this);
    //将控件添加到布局中
    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 *swidget = new smallWidget();
    swidget->show();
    swidget->setAttribute(Qt::WA_DeleteOnClose);

在这里插入图片描述
那么这个SmallWidget可以作为独立的窗口显示,也可以作为一个控件来使用。
打开Qt的.ui文件,因为SmallWidget是派生自Qwidget类,所以需要在ui文件中先放入一个QWidget控件, 然后再上边鼠标右键

在弹出的窗口中，填入类名，然后点击添加：
在这里插入图片描述

添加之后,类名会显示到上边的列表框中,然后单击提升按钮,完成操作。
我们可以看到, 这个窗口对应的类从原来的QWidget变成了SmallWidget

在这里插入图片描述

再次运行程序,就能显示出我们自定义的窗口了。

neko233

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
QT＜六＞界面布局、常用控件

一、界面布局所谓 GUI 界面，归根结底，就是一堆组件的叠加。Qt 提供了两种组件定位机制：绝对定位和布局定位。绝对定位：就是一种最原始的定位方法：给出这个组件的坐标和长宽值。这样，Qt 就知道该把组件放在哪里以及如何设置组件的大小。但是这样做带来的一个问题是，如果用户改变了窗口大小采用绝对定位的组件是不会有任何响应的。或者，还有更简单的方法：禁止用户改变窗口大小。布局定位：你只要把组件放入某一种布局，布局由专门的布局管理器进行管理。当需要调整大小或者位置的时候，Qt 使用对应的布局管理器进行调整
复制链接

扫一扫