QT基础学习笔记 Demo04

Posted 2022-02-06 战神柏柏

内容目录

• 1. 布局管理
• • 1.1 水平布局
  • 1.2 垂直布局
  • 1.3 再窗体布局中布局
  • 1.4 格栅布局
• 2. 样式表
• • 2.1 添加内容
  • 2.2 css语法改变样式(QSS)
  • • 2.2.1 pushButton
    • 2.2.2 radioButton
    • 2.2.3 progressbar
    • 2.2.4 combox
    • 2.2.5 lcdnumber
  • 2.3 Qt中的子类控件
• 3. 贴图（实现自定义视图）

大家如果喜欢，求一键三连，点个关注😭😭😭，小柏谢谢各位大佬了🍗

---

1. 布局管理

对于一个完善的软件，布局管理却是必不可少的。无论是想要界面中部件有一个很整齐的排列，还是想要界面能适应窗口的大小变化，都要进行布局管理。Qt中主要提供了QLayout类及其子类来作为布局管理器，它们可以实现常用的布局管理功能

总结：为了好看（就这么简单）

这个东西就是对窗口上面的控件进行排版，而排版的作用就是好看，所以布局管理的作用就是为了让界面能整洁好看，布局管理有4种，这4种之间是可以嵌套的

1.1 水平布局

在这个布局中的所有控件都会水平放置，只有一行，多列，也就是全部放在了一行

1.2 垂直布局

在这个布局中的所有控件都会垂直放置，只有一列，多行，也就是全部放在了一列

1.3 再窗体布局中布局

在这个布局中的所有控件都会是多行，两列的方式放置，可以有n行，但是只有两列

1.4 格栅布局

在这个布局里面所有的空间可以是多行多列，像电子表格一样
那么对于这4种布局，都是可以相互嵌套的，那么布局完一些控件之后，那么对于这个这个布局就可以理解为一个控件，那么这个控件就可以放到其他的布局里面了，这样就嵌套了
当然还有一个打破布局，作用就是取消布局，比如对3个控件做了一个水平布局，那么选中这个布局，点击打破布局，那么这个水平布局就失效了

一个大的布局，然后可以往里面添加子布局然后构成整体的布局，具体的代码实现可以在steupui下面去看，主要是通过
addWidget添加控件
addLayout添加布局

格栅布局实例——切图
将一张完整的图片进行切割，最后放入label控件中
widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QGridLayout>
namespace Ui 
class Widget;


class Widget : public QWidget

    Q_OBJECT

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

private:
    Ui::Widget *ui;
    QGridLayout *gridLayout;
;

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

#include <QImageReader>
#include <QLabel>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)

    ui->setupUi(this);
    gridLayout=new QGridLayout(ui->scrollAreaWidgetContents);//把格栅布局作用控件上
    gridLayout->setContentsMargins(0,0,0,0);//设置边距
    for(int i=0;i<30;i++)
    
        for(int j=0;j<30;j++)
        
            QImageReader reader;
            reader.setFileName(":/c.bmp");//读取图片
            reader.setScaledClipRect(QRect(i*989/30,j*989/30,989/30,989/30));//截取图片

            QImage img;
            img=reader.read();//图片保存img中

            QLabel *l=new QLabel(ui->scrollAreaWidgetContents);
            l->setScaledContents(true);
            l->setPixmap(QPixmap::fromImage(img));//img转为Pixmap
            gridLayout->addWidget(l,i,j);
        
    


Widget::~Widget()

    delete ui;

效果展示

2. 样式表

样式表是用来做什么的？
自定义Qt Widgets
使用样式表时，每个小部件都被视为具有四个同心矩形的框：空白矩形、边框矩形、填充矩形和内容矩形。盒子模型对此进行了更详细的描述。
四方同心矩阵👇

margin:空白
padding:边框
Border:填充
Content:内容
空白区域位于边框外，并且总是透明的。边框为部件提供了四周的框架

2.1 添加内容

添加资源

background-image:背景图片
border-image:边框
image:图片

添加渐变

color：字体的颜色
background-color：背景色
alternate-background-color：交替背景-颜色
border-color：边框颜色
border-top-color：顶边框顶色
border-right-color：右边框右色
border-bottom-color：底边框底色
border-left-color：左边框颜色
gridline-color：网格线边框颜色
selection-color：选择时颜色
selection-background-color：选择时的背景颜色

添加颜色

同上渐变颜色解释

添加字体

这个没啥解释的，就是改变字体

2.2 css语法改变样式(QSS)

css语法改变样式
这里说QSS是因为是在QT所以说是QSS

控件:状态

属性:值1;
属性:值2;
…
属性:值N;

以下是一些控件的常用的状态
checked button部件被选中
disabled 部件被禁用
enabled 部件被启用
focus 部件获得焦点
hover 鼠标位于部件上
indeterminate checkbox或radiobutton被部分选中
off 部件可以切换，且处于off状态
on 部件可以切换，且处于on状态
pressed 部件被鼠标按下
unchecked button部件未被选中
radioButton前有小按钮，如果想改变按钮里面内容的样式不能用一个：，要用两个：

例：多个重复的pushButton
如果出现很多pushButton按钮，我们都想要改变他们的样式，那我们上面写的css语法是不能够满足单独的
前面加个#，要写对象名，不能写类型名字

#pushbutton
background-color: rgb(0, 0, 0);

2.2.1 pushButton

border:5px groove blue; 边框5px 3d，蓝色
border-radius:10px; 圆角，弧度10px

none	定义无边框
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。

2.2.2 radioButton

QRadioButton::indicator::unchecked //没有被选中时，的选中按钮为图片
image: url(:/png/png/blueStone.png);
width: 50px;
height:50px;

QRadioButton::indicator::checked  //选中时
image: url(:/png/png/redStone.png);

QRadioButton::indicator:checked:hover  //选中时，并且鼠标在上面
image: url(:/png/png/downloadsfolder.png);

2.2.3 progressbar

QProgressBar::chunk  显示的进度条里面的内容
background-color: #CD96CD;
width: 10px;
margin: 0.5px;

QProgressBar  进度条的边框，及文字
border: 2px solid grey;
border-radius: 5px;
text-align: center;

2.2.4 combox

QComboBox  //去掉边框
border:none;

QComboBox::drop-down  //下拉的也去掉边框，设置大小，图片
border:none;
image: url(:/png/png/downloadsfolder.png);
width:30;
height:30;

2.2.5 lcdnumber

QPalette lcdpat=ui->lcdNumber->palette();
lcdpat.setColor(QPalette::Normal,QPalette::WindowText,Qt::red);//设置字体颜色为
红色
ui->lcdNumber->setPalette(lcdpat);//红色字体

2.3 Qt中的子类控件

Qt中常见子类控件如下：
::branch
QTreeView的分支指示器
::chunk
QProgressBar的进度显示块
::ciose-button
QDockWidget或QTabBar页面的关闭按钮
::down-arrow
QComboBox，QHeaderView (排序指示器)，QScrollBar 或 QSpinBox 的下拉箭头
::down-button
QScrollBar或QSpinBox的向下按钮
::drop-down
QComboBox的下拉按钮
::float-button
QDockWidget的浮动按钮
::groove
QSlider的凹槽
::indicator
QAbstractltemView，QCheckBox, QRadioButton，可勾选的 QMenu 菜单项，或可勾选的
QGroupBox的指示器
::handle
QScrollBar，QSplitter 或 QS丨ider 的滑块
::icon
QAbstract丨temView 或 QMenu 的图标
::item
QAbstractltemView，QMenuBar，QMenu，或 QStatusBar 的—个项
::left-arrow
QScrollBar的向左箭头
::menu-arrow
具有下拉菜单的QToolBimon的下拉箭头
::menu-button
QToolButton的菜单按钮
::menu-indicator
QPushButton的菜单指示器
::right-arrow
QMenu或QScrollBar的右侧箭头
::pane
QTabWidget 的面板
::scroller
QMenu或QTabBar的卷轴
::section
QHeaderView 的分段
::separator
QMenu 或 QMainWindow 的分隔器
::tab
QTabBar 或 QToolBox 的分页
::tab-bar
QTabWidget的分页条。这个子控件只用于控制QTabBar在QTabWidget中的位置，定义分页的样式使用::tab子控件
::text
QAbstracdtemView 的文字
::title
QGroupBox 或 QDockWidget 的标题
::up-arrow
QHeaderView (排序指示器)，QScroIlBar或QSpinBox的向上箭头
::up-button
QSpinBox的向上按钮

3. 贴图（实现自定义视图）

这里不展示项目了，不是很难，主要用的代码就是下面三行👇

this->setWindowFlag(Qt::FramelessWindowHint);//隐藏标题栏
setWindowOpacity(0.4); //窗口透明度
setAttribute(Qt::WA_TranslucentBackground); //是窗口透明，但是上面的空间不透明

欢迎各位大佬批评指正，如果喜欢一键三连，可以关注我，我后续会更新下面的内容