【QT】——布局

目录

1.在UI窗口中布局

 2.API设置布局

2.1 QLayout

2.2 QHBoxLayout

2.3 QVBoxLayout

2.4 QGirdLayout 

注意

 示例


Qt 窗口布局是指将多个子窗口按照某种排列方式将其全部展示到对应的父窗口中的一种处理方式。在 Qt 中常用的布局样式有三种,分别是:

  • 水平布局:布局中的所有的控件水平排列
  • 垂直布局:布局中的所有的控件垂直排列
  • 栅格布局:布局中的所有的控件垂直 + 水平排列

1.在UI窗口中布局

在UI界面中找到对应的布局窗口。

将相应的控件放入到布局对应的红色框内部,这些控件就按照布局的样式自动排列到一起了

布局的注意事项:

通过 UI 编辑窗口的树状列表我们可以对所有窗口的布局进行检查如果发现某个窗口没有布局,一定要对其进行设置如果某个窗口没有进行布局, 那么当这个窗口显示出来之后里边的子部件就可能无法被显示出来。

方式2:

 

 

布局属性:

 布局与窗口是有间隙的,上面的属性是描述窗口与布局之间的上下左右的属性。

layoutSpacing是描述布局内控件的间隙

 

 

 2.API设置布局

在 QT 中,布局也有对应的类,布局类之间的关系如下:

常用的布局类:

  • 水平布局:GHBoxLayout
  • 垂直布局:GVBoxLayout
  • 栅格布局:QGridLayout

一般我们不使用这些布局类对窗口进行布局,但是在这里还是给大家介绍一下这些类中常用的一些 API 函数

2.1 QLayout

// 在布局最后面添加一个窗口
void QLayout::addWidget(QWidget *w);
// 将某个窗口对象从布局中移除, 窗口对象如果不再使用需要自己析构
void QLayout::removeWidget(QWidget *widget);
// 设置布局的四个边界大小, 即: 左、上、右和下的边距。
void QLayout::setContentsMargins(int left, int top, int right, int bottom);
// 设置布局中各个窗口之间的间隙大小
void setSpacing(int);

2.2 QHBoxLayout

 这个类中的常用 API 都是从基类继承过来的,关于其使用,实例代码如下:

   
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    //在QMaindow布局
    ui->setupUi(this);
    QWidget* w=new QWidget;
    setCentralWidget(w);

    QHBoxLayout* hlayout=new QHBoxLayout;
    QPushButton* b1=new QPushButton("1");
    QPushButton* b2=new QPushButton("2");
    QPushButton* b3=new QPushButton("3");

    hlayout->addWidget(b1);
    hlayout->addWidget(b2);
    hlayout->addWidget(b3);

    centralWidget()->setLayout(hlayout);
}

2.3 QVBoxLayout

这个类中的常用 API 都是从基类继承过来的,关于其使用,实例代码如下:


MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QWidget* w=new QWidget;
    setCentralWidget(w);

    QVBoxLayout* hlayout=new QVBoxLayout;
    QPushButton* b1=new QPushButton("1");
    QPushButton* b2=new QPushButton("2");
    QPushButton* b3=new QPushButton("3");

    hlayout->addWidget(b1);
    hlayout->addWidget(b2);
    hlayout->addWidget(b3);

    centralWidget()->setLayout(hlayout);
}

 

2.4 QGirdLayout 

// 构造函数
QGridLayout::QGridLayout();
QGridLayout::QGridLayout(QWidget *parent);

// 添加窗口对象到网格布局中
/*
参数:
  - widget: 添加到布局中的窗口对象
  - row: 添加到布局中的窗口对象位于第几行 (从0开始)
  - column: 添加到布局中的窗口对象位于第几列 (从0开始)
  - alignment: 窗口在布局中的对齐方式, 没有特殊需求使用默认值即可
*/
void QGridLayout::addWidget(
	QWidget *widget, int row, int column, 
Qt::Alignment alignment = Qt::Alignment());

/*
参数:
  - widget: 添加到布局中的窗口对象
  - fromRow: 添加到布局中的窗口对象位于第几行 (从0开始)
  - fromColumn: 添加到布局中的窗口对象位于第几列 (从0开始)
  - rowSpan: 添加的窗口从 fromRow 行开始跨越的行数
  - columnSpan: 添加的窗口从 fromColumn 列开始跨越的列数
  - alignment: 窗口在布局中的对齐方式, 没有特殊需求使用默认值即可
*/
void QGridLayout::addWidget(
QWidget *widget, int fromRow, int fromColumn, 
int rowSpan, int columnSpan, 
Qt::Alignment alignment = Qt::Alignment());

// 设置 column 对应的列的最新宽度, 单位: 像素
void QGridLayout::setColumnMinimumWidth(int column, int minSize);

// 设置布局中水平方向窗口之间间隔的宽度
void QGridLayout::setHorizontalSpacing(int spacing);

// 设置布局中垂直方向窗口之间间隔的宽度
void QGridLayout::setVerticalSpacing(int spacing);

注意

 在MainWindow并不能直接进行布局。不然会显示QWidget::setLayout: Attempting to set QLayout "" on MainWindow这个错误。

解决:

    1.创建一个QWidget的实例,并将这个实例设置为centralWidget。

     QWidget *widget = new QWidget();
     this->setCentralWidget(widget);

   2. 进行布局 。

    QHBoxLayout *hbLayout = new QHBoxLayout();
    hbLayout->addWidget(m_openButton);
    hbLayout->addWidget(m_closeButton);

 3.只需要将widget的布局设置为布局就好了

   centralWidget()->setLayout(hbLayout);

 
示例

使用UI界面设计一个登录窗口。

 

改进:

将登录界面放在中间

第一种方式:设置属性

点击右侧的属性,找到alignment->水平布局->选择AlignCenter

 

 第二种方式:添加弹簧

 

 

 

最后,在设置窗口为固定:

 记住宽度和高度,将窗口设置为固定大小。

setFixedSize(419.350);

最终显示效果:

 

### 如何在 Qt 界面布局中添加和配置弹簧 (弹性间隔) 在 Qt 应用程序开发过程中,为了实现更加灵活的界面布局管理,可以利用弹簧(也称为弹性间隔或伸缩量)。这些组件允许开发者创建自适应不同屏幕尺寸和分辨率的应用窗口。 #### 使用 QSpacerItem 实现弹性间隔 对于 C++ 开发者而言,在基于 QWidget 的应用程序里可以通过 `QSpacerItem` 来设置水平方向或者垂直方向上的可变空白区域。下面是一个简单的例子来展示如何向 QVBoxLayout 添加一个底部扩展的空间: ```cpp #include <QWidget> #include <QVBoxLayout> #include <QPushButton> #include <QSpacerItem> class MyWidget : public QWidget { public: MyWidget(QWidget *parent = nullptr) : QWidget(parent){ auto layout = new QVBoxLayout(this); // Add some buttons to the layout. QPushButton* button1 = new QPushButton("Button 1", this); QPushButton* button2 = new QPushButton("Button 2", this); layout->addWidget(button1); layout->addWidget(button2); // Create a vertical spacer item and add it to the end of the layout. layout->addSpacerItem(new QSpacerItem(20, 40, QSizePolicy::Minimum, QSizePolicy::Expanding)); } }; ``` 这段代码展示了怎样通过编程方式往 QVBoxLayout 境内追加按钮控件以及最后加入了一个具有扩展属性 (`QSizePolicy::Expanding`) 的 `QSpacerItem` ,这使得该空间会尽可能多地占用剩余可用位置[^1]。 #### 利用 Designer 工具中的 Spacer Widgets 如果更倾向于图形化设计,则可以在 Qt Creator 内嵌的设计工具——Designer 中直接拖拽 Spacer widgets 至所需的位置上。具体操作如下: - 打开 .ui 文件进入可视化编辑模式; - 寻找左侧部件面板里的 "Horizontal Spacer" 或 "Vertical Spacer"; - 将其拖放到目标容器内部并调整大小关系直至满意为止; 这样做不仅简化了编码工作而且提高了效率,尤其是在构建复杂多样的 GUI 接口时尤为有用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值