首页 > 编程学习 > 【QT开发笔记-基础篇】| 第五章 绘图QPainter | 5.2 界面布局

本节对应的视频讲解:B_站_视_频

https://www.bilibili.com/video/BV1fR4y1k7Kt


上节课,初步展示了本章要实现的效果。本节课开始,就从零新建工程,把效果一一实现

首先先把界面搭建起来,也就是把用到的 Label、ComboBox、CheckBox、GroupBox 这些空间,拖拽到界面上,并完成布局:

image-20221204141155438


1. 新建工程

在 Qt Creator 中新建工程,命名为 PainterX,如下:

image-20221206101627223


2. 新建控件

可以直接在当前 Widget 上直接绘制各种图形

但是由于在当前的 Widget 主窗口中,已经放置了很多控件,如果直接在当前窗口中绘制,会很乱,界面也不方便布局

因此,最好的方法是,新建一个控件 PaintWidget 来继承 QWidget,然后在 PaintWidget 中来完成绘制

首先,在项目名称PainterX上右键,选择 “添加新文件…”

image-20221206102114835

接着,自定义的类名为 PaintWidget:

image-20221206103008365

最后,就会在项目中添加 paintwidget.h 和 paintwidget.cpp 两个文件,如下:

image-20221206103447675


3. 控件提升

接下来,就可以放置 Widget 控件,并提升为 PaintWidget


3.1 拖放

创建了自定义的控件 PaintWidget 之后,就可以放置该控件了。

在工具箱中拖放一个 widget 控件,如下:

image-20221206104142661


3.2 提升

首先,在 widget 控件上右键,选择 “提升为…”:

image-20221206104917672

然后,打开如下对话框:

image-20221206105250148

点击 “添加”之后,效果如下:

image-20221206105444597

最后,点击“提升”,完成提升。此时,在设计师界面可以看到提升后的效果,如下:

image-20221206105648582


4. 完成布局

接下来,再拖放其他控件,比如 Label、ComboBox、CheckBox、GroupBox 等

所有控件,拖放完毕,就可以进行布局了,最后的效果如下:

image-20221206123303928

布局的层次结构,可以在右侧的 “对象查看器” 中看到,一目了然。

布局说明如下:

4.1 样式表

选中最外层的 widget,然后设置样式表如下:

QWidget
{  font:  14pt "Microsoft YaHei";color:  #000000;
}QGroupBox {border-width: 1px;border-style: solid;margin-top:10px
}QGroupBox::title {subcontrol-origin: margin;left:20px;padding: -10px 5px 0px 5px;
}

4.2 顶部的形状

将 Label 和 ComboBox,放在一个 Widget 中,然后对 Widget 采用水平布局

将 Label 的 “水平策略” 修改为 Fixed

将 Widget 的 “垂直策略” 修改为 Fixed

将 Widget 的上下左右边距修改为 0


4.3 底部的设置

  • 标签

    将几个标签的 “水平策略” 修改为 Fixed,并将最大和最小值设置为 60

    修改标签的文本的水平对齐方式为 “右对齐”

  • GroupBox

    将三个 GroupBox “垂直策略”,修改为固定,最小高度设置为150

    将三个 GroupBox 的 layoutTopMargin 修改为 20

  • 画笔

    除 Label 之外的控件的 “水平策略” 修改为 Fixed,并将最小宽度设置为 150

  • 画刷

    除 Label 之外的控件的 “水平策略” 修改为 Fixed,并将最小宽度设置为 240

  • 最外层的 widget

    将 “垂直策略”,修改为固定

    将 Widget 的上下左右边距修改为 0

4.4 中间的 PaintWidget

为了便于查看,将其背景色修改为白色,修改其样式表

background-color: rgb(255, 255, 255);

为 PaintWidget 添加了以上样式表之后,运行后样式表不起作用,需要增加以下代码

PaintWidget::PaintWidget(QWidget *parent) : QWidget{parent}
{this->setAttribute(Qt::WA_StyledBackground, true);
}

经过以上布局之后,效果如下:

image-20221206123303928

本节课到此为止!


本文链接:https://www.ngui.cc/article/show-738631.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000