qt页面设计

标签：文件 Designer qt ui Dialog 组件设计 Qt 页面

1. Designer 设计师（掌握）

Designer是Qt内置的一款界面设计程序，设计的界面文件为.ui格式。

C++程序员通常不会单独启动Designer，如果要在项目中使用Designer程序，只需要在新建项目时，勾选“创建界面文件”选项。

这样的项目自带dialog.ui，双击dialog.ui可以直接使用Designer程序打开此文件。

2. Layout 布局（重点）

2.1 基本使用

可以把布局看做是一个透明的盒子，内部放置各种组件对象，这些组件对象会按照布局预设的规则自动排序，并形成一个布局整体。

Qt中有四种布局：

主要学习前两种，垂直/水平布局指的是布局中所有的子组件垂直/水平排成一排，常用属性如下：

需要注意的是，最终的显示效果是多个因素综合决定的，并非一个因素完全决定。

2.2 高级用法

伸展器

如果需要在布局中填充空白，可以使用伸展器组件。

嵌套

布局和布局之间可以嵌套，内层布局相当于外层布局的一个组件。

贴合

选中窗口对象，点击，可以让最外层布局贴合窗口，以达到窗口大小自适应效果。

可以点击打破任何一个选中的布局，例如取消贴合效果，需要先选中窗口，然后点击此按钮。

2.3 代码布局（了解）

也可以使用C++进行布局，仅做展示。

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QVBoxLayout>
#include <QPushButton>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    QVBoxLayout* layout;
    QPushButton* btn1;
    QPushButton* btn2;
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    resize(400,400);
    layout = new QVBoxLayout(this);
    btn1 = new QPushButton("A",this);
    btn2 = new QPushButton("B",this);
    // 把两个按钮加入到布局中
    layout->addWidget(btn1);
    layout->addWidget(btn2);
}

Dialog::~Dialog()
{
    delete layout;
    delete btn1;
    delete btn2;
}

虽然代码布局复杂，但是性能好。

3. Designer与C++的关系（熟悉）

腾讯文档-流程图插件

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

namespace Ui {
class Dialog;
}

class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = 0);
    ~Dialog();

private:
    Ui::Dialog *ui; // ui指针：界面文件的对象化
};

#endif // DIALOG_H
dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog) // 构造初始化列表
{
    // 按照ui文件设计内容在C++中创建对象并初始化
    ui->setupUi(this);
    // 可以通过ui指针+对象名称，在C++中找到ui中的对象
    ui->pushButtonA->setText("是不是？");
}

Dialog::~Dialog()
{
    // 销毁ui，一并销毁ui文件中所有的对象
    delete ui;
}

因为Designer造成的开销相对于常用的Windows而言微不足道，因此后续界面设计都使用Designer，创建的项目要求勾选“创建界面文件”。