【Qt】布局之道:Qt界面设计中的五大布局管理器:垂直布局QVBoxLayout,水平布局QHBoxLayout,网格布局QGridLayout,表单布局QFormLayout,QSpacerItem |
您所在的位置:网站首页 › 如何理解护理垂直管理 › 【Qt】布局之道:Qt界面设计中的五大布局管理器:垂直布局QVBoxLayout,水平布局QHBoxLayout,网格布局QGridLayout,表单布局QFormLayout,QSpacerItem |
文章目录
前言:1. 垂直布局1.1. 代码示例: 使用 QVBoxLayout 管理多个控件.
2. 水平布局2.1. 代码示例: 使用 QHBoxLayout 管理控件2.2. 代码示例: 嵌套的 layout
3. 网格布局3.1. 代码示例: 使用 QGridLayout 管理元素3.2. 代码示例: 设置 QGridLayout 中元素的大小比例
4. 表单布局4.1. 代码示例: 使用 QFormLayout 创建表单
5. Spacer5.1. 代码示例: 创建⼀组左右排列的按钮
总结:
前言:
在现代软件开发中,用户界面的设计和布局是至关重要的一环。一个直观、美观且响应式的界面不仅能提升用户体验,还能使应用更加易于使用。Qt框架,作为跨平台开发的强大工具,提供了多种布局管理器来帮助开发者轻松实现复杂界面的布局。本文将详细介绍Qt中的五种主要布局管理器:垂直布局、水平布局、网格布局、表单布局以及Spacer的使用,并通过代码示例展示如何使用这些布局管理器来创建灵活且自适应的界面。 之前把控件放到界面上,都是靠“手动”的方式来布局的。这种调整方式是不科学的! 手动布局的方式非常复杂,而且不精确。无法对窗口大小进行自适应。所以Qt就引入了:布局管理器 垂直布局水平布局网格布局表单布局 1. 垂直布局使用 QVBoxLayout 表示垂直的布局管理器. V 是 vertical 的缩写.
每个widget中只能设置一个布局管理器,如果我们想使用多个呢? 通过图形化界面拖两个布局框 刚才是先拖 了layout 过去,然后再往 layout 中拖其他控件。 也可以先拖其他的控件,给这些些控件套上 layout 使用 QHBoxLayout 表示垂直的布局管理器. H 是 horizontal 的缩写。 布局管理器之间,也是可以嵌套的。 #include "widget.h" #include "ui_widget.h" #include #include #include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); // 创建一个垂直的布局管理器 QVBoxLayout* vlayout = new QVBoxLayout(); this->setLayout(vlayout); // 添加两个按钮进去 QPushButton* button1 = new QPushButton("按钮1"); QPushButton* button2 = new QPushButton("按钮2"); vlayout->addWidget(button1); vlayout->addWidget(button2); // 创建水平布局管理器 QHBoxLayout* hlayout = new QHBoxLayout(); // 添加两个按钮进去 QPushButton* button3 = new QPushButton("按钮3"); QPushButton* button4 = new QPushButton("按钮4"); hlayout->addWidget(button3); hlayout->addWidget(button4); // 把水平布局管理器添加到垂直布局管理器内部 vlayout->addLayout(hlayout); } Widget::~Widget() { delete ui; }Qt 中还提供了 QGridLayout 用来实现网格布局的效果. 可以达到 M * N 的这种网格的效果。 核心属性: 整体和 QVBoxLayout 以及 QHBoxLayout 相似。但是设置 spacing 的时候是按照垂直水平两个方向来设置的。
当需要创建出尺寸不同的控件的时候,就可以通过拉伸系数来设置。 拉伸系数就相当于设置控件间的尺寸的,“比例”。 3.2. 代码示例: 设置 QGridLayout 中元素的大小比例 #include "widget.h" #include "ui_widget.h" #include #include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); // 创建 6 个按钮,使用网格布局 2*3 的方式来布局 QPushButton* button1 = new QPushButton("按钮1"); QPushButton* button2 = new QPushButton("按钮2"); QPushButton* button3 = new QPushButton("按钮3"); QPushButton* button4 = new QPushButton("按钮4"); QPushButton* button5 = new QPushButton("按钮5"); QPushButton* button6 = new QPushButton("按钮6"); // 创建网格布局管理器,把这些控件添加进去 QGridLayout* layout = new QGridLayout(); layout->addWidget(button1, 0, 0); layout->addWidget(button2, 0, 1); layout->addWidget(button3, 0, 2); layout->addWidget(button4, 1, 0); layout->addWidget(button5, 1, 1); layout->addWidget(button6, 1, 2); this->setLayout(layout); // 设置水平拉伸系数, 此处的代码含义,就是按照 1:1:2 的方式来设置宽度 layout->setColumnStretch(0, 1); layout->setColumnStretch(1, 1); layout->setColumnStretch(2, 2); // 如果把拉伸系数设为 0, 意思就是不参与拉伸,此时按钮的宽度就是固定值 } Widget::~Widget() { delete ui; }除了上述的布局管理器之外, Qt 还提供了 QFormLayout , 属于是 QGridLayout 的特殊情况, 专 门用于实现两列表单的布局。 这种表单布局多用于让用户填写信息的场景. 左侧列为提示, 右侧列为输⼊框。 4.1. 代码示例: 使用 QFormLayout 创建表单前端中有一个form标签,搭配其它的 input 等标签,让网页端用户输入数据,并且提交到服务器。 #include "widget.h" #include "ui_widget.h" #include #include #include #include Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); // 设置成 3 行 2列 QFormLayout* layout = new QFormLayout; this->setLayout(layout); // 创建 3个 label 作为第一列 QLabel* label1 = new QLabel("姓名"); QLabel* label2 = new QLabel("年龄"); QLabel* label3 = new QLabel("电话"); // 创建 3 个 label 作为第二列 QLineEdit* edit1 = new QLineEdit("姓名"); QLineEdit* edit2 = new QLineEdit("年龄"); QLineEdit* edit3 = new QLineEdit("电话"); // 把上述控件添加到表单布局中 layout->addRow(label1, edit1); layout->addRow(label2, edit2); layout->addRow(label3, edit3); // 创建一个 "提交按钮" QPushButton* button = new QPushButton("提交"); layout->addRow(nullptr, button); } Widget::~Widget() { delete ui; }使用布局管理器的时候,可能需要在控件之间,添加一段空白,就可以使用 QSpacerItem 来表示。
通过本文的学习,我们了解到Qt框架中的布局管理器是构建高效、响应式用户界面的关键工具。垂直布局(QVBoxLayout)和水平布局(QHBoxLayout)为我们提供了基本的一维布局方案,而网格布局(QGridLayout)则允许我们在二维空间内灵活地排列控件。表单布局(QFormLayout)特别适合于创建需要用户输入信息的界面,它以两列的形式组织标签和输入控件。此外,Spacer(QSpacerItem)的使用可以在控件之间添加必要的间隔,以优化界面的视觉效果和用户体验。 每种布局管理器都具有其独特的用途和优势,通过合理地组合使用,我们可以创建出既美观又实用的用户界面。更重要的是,这些布局管理器支持控件的自适应调整,确保了界面在不同屏幕尺寸和分辨率下的一致性和可用性。通过本文的代码示例,开发者可以快速掌握Qt布局管理器的使用方法,并将其应用到自己的项目中,以提升应用的专业度和用户满意度。 到这里所有的控件都结束了!上述的每个控件,都是“可扩展的”,每个控件都是对应 Qt 内置的一个类,咱们在代码中都可以基于这个类,继承出你自定义的子类,在这个自定义的子类中,又可以添加很多的属性方法,实现自己的需求场景。还可以在子类中,把多个控件组合到一起。 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |