常用界面设计组件 —— 容器组件

news2024/9/28 19:16:41

    • 2.6 容器组件
      • 2.6.1 QGroupBox
      • 2.6.2 QScrollArea
      • 2.6.3 QToolBox
      • 2.6.4 QTabWidget
      • 2.6.5 QStackedWidget

2.6 容器组件

为了将界面上的各个组件的分布设计得更加美观，经常 使用一些容器类，如 QgoupBox、QtabWidget、 QToolBox等。

2.6.1 QGroupBox

实例效果：

在这里插入图片描述

代码化UI设计：

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QGroupBox>
#include <QRadioButton>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = 0);  // 构造函数
    ~Widget();  // 析构函数

private:
    QGroupBox *gb1;  // 第一个分组框
    QGroupBox *gb2;  // 第二个分组框
    QRadioButton *rb1;  // 单选按钮1
    QRadioButton *rb2;  // 单选按钮2
    QRadioButton *rb3;  // 单选按钮3
    QRadioButton *rb4;  // 单选按钮4
    QRadioButton *rb5;  // 单选按钮5
};

#endif // WIDGET_H

#include "widget.h"
#include <QVBoxLayout>
#include <QHBoxLayout>

Widget::Widget(QWidget *parent) : QWidget(parent)
{
    // 创建第一个分组框
    gb1 = new QGroupBox("性别", this);
    rb1 = new QRadioButton("男");
    rb2 = new QRadioButton("女");

    QVBoxLayout *vb1 = new QVBoxLayout();  // 垂直布局管理器
    vb1->addWidget(rb1);
    vb1->addWidget(rb2);
    gb1->setLayout(vb1);  // 设置分组框1的布局为垂直布局

    // 创建第二个分组框
    gb2 = new QGroupBox("所在年级", this);
    rb3 = new QRadioButton("三年级");
    rb4 = new QRadioButton("四年级");
    rb5 = new QRadioButton("五年级");

    QVBoxLayout *vb2 = new QVBoxLayout;  // 垂直布局管理器
    vb2->addWidget(rb3);
    vb2->addWidget(rb4);
    vb2->addWidget(rb5);
    gb2->setLayout(vb2);  // 设置分组框2的布局为垂直布局

    // 创建水平布局管理器，将两个分组框添加到水平布局中
    QHBoxLayout *mainLayout = new QHBoxLayout(this);
    mainLayout->addWidget(gb1);
    mainLayout->addWidget(gb2);
    setLayout(mainLayout);  // 设置整体布局为水平布局
}

Widget::~Widget()
{
}

可视化UI设计

在这里插入图片描述

2.6.2 QScrollArea

实例化效果：

在这里插入图片描述

代码化UI设计：

/* widget.h */
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QLabel>
#include <QScrollArea>

class Widget : public QWidget
{
    Q_OBJECT

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

private:
    QLabel *lb;         // 标签控件
    QScrollArea *sa;    // 滚动区域控件
};

#endif // WIDGET_H

#include "widget.h"
#include "ui_widget.h"
#include <QLabel>
#include <QHBoxLayout>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    // 通过ui指针初始化界面
    ui->setupUi(this);

    // 创建标签控件并设置图片
    QLabel *lb = new QLabel(this);
    QPixmap pix("1.png");
    lb->setPixmap(pix);

    // 将标签控件设置为滚动区域的内容
    ui->sa->setWidget(lb);

    // 创建主布局，并添加滚动区域控件
    QVBoxLayout *mainbox = new QVBoxLayout;
    mainbox->addWidget(ui->sa);

    // 设置主布局为当前窗口的布局
    setLayout(mainbox);
}

Widget::~Widget()
{
    // 释放ui指针
    delete ui;
}

可视化UI设计

在这里插入图片描述

在这里插入图片描述

可以选择垂直布局选项

在这里插入图片描述

最终的效果 可以看到页面显示不全，有滑动拉条显示

在这里插入图片描述

2.6.3 QToolBox

QToolBox类提供了一列选项卡窗口，当前项显示在当前 选项卡下面，适用于分类浏览、内容展示、操作指引这 一类的使用场景。

在这里插入图片描述

代码化UI设计：

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

#include <QPushButton>
#include <QToolBox>
#include <QVBoxLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    // 初始化界面
    ui->setupUi(this);

    // 创建工具箱控件
    QToolBox *tb = new QToolBox(this);

    // 创建第一个页面
    QWidget *page1 = new QWidget(this);
    QPushButton *pb1 = new QPushButton("大话西游", page1);
    QPushButton *pb2 = new QPushButton("赌圣", page1);
    QPushButton *pb3 = new QPushButton("功夫", page1);
    QVBoxLayout *layout1 = new QVBoxLayout(this);
    layout1->addWidget(pb1);
    layout1->addWidget(pb2);
    layout1->addWidget(pb3);
    page1->setLayout(layout1);

    // 将第一个页面添加到工具箱，并设置标题
    tb->addItem(page1, "周星驰");

    // 创建第二个页面
    QWidget *page2 = new QWidget(this);
    QPushButton *pb4 = new QPushButton("无间道", page2);
    QPushButton *pb5 = new QPushButton("拆弹专家", page2);
    QVBoxLayout *layout2 = new QVBoxLayout(this);
    layout2->addWidget(pb4);
    layout2->addWidget(pb5);
    page2->setLayout(layout2);

    // 将第二个页面添加到工具箱，并设置标题
    tb->addItem(page2, "刘德华");

    // 创建水平布局，将工具箱添加到布局中
    QHBoxLayout *layout3 = new QHBoxLayout(this);
    layout3->addWidget(tb);

    // 设置主布局为当前窗口的布局
    setLayout(layout3);
}

Widget::~Widget()
{
    // 释放ui指针
    delete ui;
}

可视化UI设计:

在这里插入图片描述

2.6.4 QTabWidget

QTabWidget 的一种带标签页的窗口，在这种类型的窗 口中可以存储多个子窗口，每个子窗口的显示可以通过 对应的标签进行切换。

实例效果：

在这里插入图片描述

代码化UI设计

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

#include <QTabWidget>
#include <QTextEdit>
#include <QVBoxLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    // 初始化界面
    ui->setupUi(this);

    // 创建选项卡控件
    QTabWidget *tw = new QTabWidget(this);

    // 创建文本编辑控件，并添加到选项卡
    QTextEdit *te1 = new QTextEdit("one", tw);
    QTextEdit *te2 = new QTextEdit("two", tw);
    QTextEdit *te3 = new QTextEdit("three", tw);

    // 添加选项卡页，并设置标题
    tw->addTab(te1, "1.c");
    tw->addTab(te2, "2.c");
    tw->addTab(te3, "3.c");

    // 创建垂直布局，将选项卡添加到布局中
    QVBoxLayout *layout = new QVBoxLayout(this);
    layout->addWidget(tw);

    // 设置主布局为当前窗口的布局
    setLayout(layout);
}

Widget::~Widget()
{
    // 释放ui指针
    delete ui;
}

可视化UI设计：

在这里插入图片描述

2.6.5 QStackedWidget

QStackedWidget列提供了堆叠窗体的效果。在实际应用中，堆叠窗体多与列表框QlistWidget和下拉列表框 QCombobox配合使用。

实例效果

在这里插入图片描述

代码化UI设计

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

#include <QStackedWidget>
#include <QTextEdit>
#include <QComboBox>
#include <QVBoxLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    // 初始化界面
    ui->setupUi(this);

    // 创建堆叠窗口控件
    QStackedWidget *sw = new QStackedWidget(this);

    // 创建文本编辑控件，并添加到堆叠窗口
    QTextEdit *te1 = new QTextEdit("aa", sw);
    QTextEdit *te2 = new QTextEdit("bb", sw);
    QTextEdit *te3 = new QTextEdit("cc", sw);
    sw->addWidget(te1);
    sw->addWidget(te2);
    sw->addWidget(te3);

    // 创建下拉框控件
    QComboBox *cb = new QComboBox(this);
    cb->addItem("111");
    cb->addItem("222");
    cb->addItem("333");

    // 创建垂直布局，将堆叠窗口和下拉框添加到布局中
    QVBoxLayout *mainLayout = new QVBoxLayout(this);
    mainLayout->addWidget(sw);
    mainLayout->addWidget(cb);

    // 设置主布局为当前窗口的布局
    setLayout(mainLayout);

    // 连接下拉框的activated信号和堆叠窗口的setCurrentIndex槽函数
    connect(ui->cb, SIGNAL(activated(int)), ui->sw, SLOT(setCurrentIndex(int)));
}

Widget::~Widget()
{
    // 释放ui指针
    delete ui;
}

可视化UI设计

在这里插入图片描述

信号和槽之间也可以用代码方式：

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

#include <QStackedWidget>
#include <QTextEdit>
#include <QComboBox>
#include <QVBoxLayout>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    // 初始化界面
    ui->setupUi(this);

    // 连接下拉框的activated信号和堆叠窗口的setCurrentIndex槽函数
    connect(ui->cb, SIGNAL(activated(int)), ui->sw, SLOT(setCurrentIndex(int)));
}

Widget::~Widget()
{
    delete ui;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1407797.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

YOLOv7调用摄像头检测报错解决

YOLOv7调用摄像头检测报错解决

yolov7detect.py文件调用本地摄像头&#xff0c;把source参数设为0 parser.add_argument(--source, typestr, default0, helpsource) # file/folder, 0 for webcam 报错&#xff1a;cv2.error: OpenCV(3.4.2) 一堆地址:The function is not implemented. Rebuild the library…
阅读更多...
洛谷 P1705 爱与愁过火

洛谷 P1705 爱与愁过火

测试用例 5 2 8 1 7 2 5 4#include<iostream> #include<string.h> using namespace std; int m, r, n; int a[100]; int visit[100] {0}; int sum 0; void traceback(int s,int price,int next){if(s r){if (price > n)sum;return ;}for (int i next ;i &…
阅读更多...
Linux命令大全(超详细版)

Linux命令大全(超详细版)

一 ~ 四章 【点击此处查看】 五、shell 编程 5.1、shell 概述 5.1.1 shell 是什么 Shell是一个命令行解释器&#xff0c;它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序&#xff0c;用户可以用Shell来启动、挂起、停止甚至是编写一些程序。 Shell还是…
阅读更多...
理解分布式存储的真实成本 - 10PB的硬件和软件

理解分布式存储的真实成本 - 10PB的硬件和软件

我们最近与一家大型银行的首席信息官进行了一次对话。他们是全球系统性重要银行之一——规模极其庞大。这位CIO决定将MinIO引入为数据分析计划的对象存储。这个部署从抵押贷款、交易和新闻平台收集数据&#xff0c;以运行Spark和其他分析工具&#xff0c;为银行提供洞察力。Min…
阅读更多...
深入理解Java中的队列（Queue）

深入理解Java中的队列（Queue）

目录 一、什么是队列&#xff08;Queue&#xff09;&#xff1f; 二、队列中的常用方法 三、Java中的队列接口和实现类 1. LinkedList 2. ArrayDeque 3. PriorityQueue 四、队列的应用场景 1.消息队列 2.线程池任务调度 3.缓存淘汰策略 4.网络请求调度 5.广度优先搜索&#xff…
阅读更多...
肺癌相关文献6

肺癌相关文献6

第十四篇 Classification of lung adenocarcinoma based on stemness scores in bulk and single cell transcriptomes IF&#xff1a;6.0 中科院分区:2区 生物学WOS分区&#xff1a;Q1被引次数&#xff1a; 4 背景&#xff1a;癌细胞具有无限期自我更新和增殖的能力[2]。在一…
阅读更多...
# [NOI2019] 斗主地 洛谷黑题题解

# [NOI2019] 斗主地 洛谷黑题题解

[NOI2019] 斗主地 题目背景 时限 4 秒 内存 512MB 题目描述 小 S 在和小 F 玩一个叫“斗地主”的游戏。 可怜的小 S 发现自己打牌并打不过小 F&#xff0c;所以他想要在洗牌环节动动手脚。 一副牌一共有 n n n 张牌&#xff0c;从上到下依次标号为 1 ∼ n 1 \sim n 1∼…
阅读更多...
UV紫外激光打标机的优缺点是什么

UV紫外激光打标机的优缺点是什么

​ UV紫外激光打标机具有以下优点&#xff1a; 1. 精度高&#xff1a;紫外激光打标机的光束质量好&#xff0c;聚焦光斑小&#xff0c;可以实现在各种材料上进行超精细打标。 2. 速度快&#xff1a;由于紫外激光的独特特性&#xff0c;打标速度非常快&#xff0c;提高了生产效…
阅读更多...
23111 C++ day1

23111 C++ day1

思维导图 提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 要求使用C风格字符串完成 #include <iostream> #include<array>using namespace std;int main() {int a0,A0,num0,space0,other0;array<char…
阅读更多...
中国大模型迎来“95后” 百度奖学金发掘百位“未来AI技术领袖”

中国大模型迎来“95后” 百度奖学金发掘百位“未来AI技术领袖”

在人工智能掀起的科技革命和产业变革浪潮下&#xff0c;大模型成为最受关注的研究领域。1月22日&#xff0c;第十一届百度奖学金颁奖典礼在北京举行&#xff0c;来自全球顶尖高校及科研机构的10位“未来AI技术领袖”脱颖而出&#xff0c;他们平均年龄仅27岁&#xff0c;其中8人…
阅读更多...
Oracle触发器简单应用示例

Oracle触发器简单应用示例

目录 一、应用描述 【1】、应用场景&#xff1a; 【2】、具体场景&#xff1a; 二、表结构介绍 【1】表名介绍&#xff1a; 【2】表结构&#xff1a; 三、设置触发器 一、应用描述 【1】、应用场景&#xff1a; 现有一张库存明细以及销售明细表&#xff0c;销售明细表发生…
阅读更多...
python合并多个dict---合并多个字典值---字典值相加

python合并多个dict---合并多个字典值---字典值相加

文章目录 序多个dict同key值相加collection.Counter传参重载号 多个dict合并练习 序 主要是借助Counter、函数传参和运算符重载&#xff01;各有优劣&#xff01; 多个dict同key值相加 collection.Counter 借助collections.Counter&#xff0c;但是它只适用于值为整数或者小…
阅读更多...
扭蛋机小程序开发，让扭蛋迷体验到扭蛋的趣味性

扭蛋机小程序开发，让扭蛋迷体验到扭蛋的趣味性

扭蛋机作为盲盒的前身&#xff0c;也是深受大众的欢迎&#xff0c;十几到几十不等的价格就可以让消费者体验到幸福感。扭蛋机具有价格低、性价比高的特点&#xff0c;扭蛋中的主题商品也都是经典热门动漫&#xff0c;具有较高的收藏价值&#xff0c;吸引了不少的扭蛋迷。 随着…
阅读更多...
企业新闻稿怎么写？纯干货！

企业新闻稿怎么写？纯干货！

企业新闻稿是企业宣传的重要营销方式&#xff0c;新闻稿件的质量直接决定你的宣传效果&#xff0c;企业新闻稿怎么写&#xff0c;接下来伯乐网络传媒就来给大家分享一些企业新闻稿写作心得&#xff0c;纯干货&#xff0c;建议收藏起来慢慢看&#xff01; 一、企业新闻稿的组成要…
阅读更多...
深入理解stressapptest

深入理解stressapptest

文章目录 一、概述二、安装2.1、源码编译安装2.2、命令行安装2.3、安装确认三、重要参数详解3.1、查询支持的参数3.2、参数说明 四、实例4.1、随机测试&#xff08;默认模式&#xff09;4.2、循环测试4.2、全内存测试 团队博客: 汽车电子社区 一、概述 stressapptest是一款免费…
阅读更多...
Pytorch线性代数

Pytorch线性代数

1、加法运算 A torch.arange(20, dtypetorch.float32).reshape(5, 4) B A.clone() # 通过分配新内存&#xff0c;将A的一个副本分配给B A, A B# tensor([[ 0., 1., 2., 3.], # [ 4., 5., 6., 7.], # [ 8., 9., 10., 11.], # [12., 13.,…
阅读更多...
【裁员潮】技术变革下的职业危机，程序员会有多大影响，又应该如何面对

【裁员潮】技术变革下的职业危机，程序员会有多大影响，又应该如何面对

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读文章&#xff01; 此篇是【话题达人】序列文章&#xff0c;这一次的话题是《技术变革下的裁员潮》 文章将以博主的角度进行讲述&#xff0c;理解和水平有限&#xff0c;不足之处&#xff0c;望指正。 目录 背景硬实力职业危机…
阅读更多...
Python环境的安装和Pycharm的安装

Python环境的安装和Pycharm的安装

Python环境的安装 英文版官网&#xff1a;Welcome to Python.org&#xff0c; 因为是外网&#xff0c;加载可能会很慢 首先呢&#xff0c;我们先去官网查找&#xff1a;Python中文网 官网&#xff0c;这个官网是中文版的&#xff0c;点进去之后是这个页面 然后点击下载&#…
阅读更多...
【nowcoder】链表的回文结构

【nowcoder】链表的回文结构

牛客题目链接 链表的回文结构 /* struct ListNode {int val;struct ListNode *next;ListNode(int x) : val(x), next(NULL) {} };*/ #include <cstdlib> // 建议大伙自己对照我的代码画下图&#xff0c;假设A链表是&#xff1a;1 2 3 2 1 class PalindromeList { publi…
阅读更多...
消息队列RabbitMQ.02.交换机的讲解与使用

消息队列RabbitMQ.02.交换机的讲解与使用

目录 RabbitMQ中交换机的基本概念与作用解析 交换机的作用&#xff1a; 交换机的类型&#xff1a; 直连交换机&#xff08;Direct Exchange&#xff09;&#xff1a; 将消息路由到与消息中的路由键&#xff08;Routing Key&#xff09;完全匹配的队列。 主题交换机&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023