第三章、QT常用基础控件（QT从开始到结束）-DeepSeek、ChatGPT帮我答疑解惑，QT学习记录

第三章、QT常用基础控件（QT从开始到结束）-DeepSeek、ChatGPT帮我答疑解惑，QT学习记录

序言：QT的一个强大的功能是在C++基础上，融入了UI界面的相关设计代码；你懂C、C++后，想做界面，QT是一个不错的选择，而且其跨平台，有强大的公司在背后做技术支撑，所以推荐大家一起学习有关QT，UI界面的一些事。

接下来讲解的顺序，按照先介绍基础控件，再讲容器控件，最后再讲布局管理。原因主要有以下几点：
构件的基本单元
基础控件（如按钮、标签、文本框等）是构成界面的最小单位。
学习这些控件的属性、信号与槽等基本用法，是后续理解容器和布局的前提。
如果先讲容器和布局，但学生还不熟悉单个控件的行为和属性，就难以理解为什么需要组合这些控件以及如何组合。
父子关系与容器管理
在理解了基础控件之后，再介绍如何将多个控件组织起来，即容器控件的概念。
容器管理讲的是控件之间的父子关系、资源管理、事件传递等，依赖于你对控件本身特性和行为的理解。
自动布局的必要性
在明确了控件和容器的概念后，再讲布局管理。
布局管理器的作用是自动安排容器内子控件的位置和尺寸，其原理和使用方式都建立在对控件和容器基本行为的了解之上。
等其他

1、Qt 基础控件介绍

在 Qt 开发中，控件（Widget）是构建图形用户界面的基本单元。Qt 提供了大量的基础控件，这些控件大致可以分为以下几类，每一类控件都有其独特的用途和特点。

1.1、按钮类控件

QPushButton
标准按钮，用于触发操作。当用户点击按钮时，通常会发出 clicked() 信号，用于连接相应的槽函数以响应事件。

QRadioButton
单选按钮，通常用于实现一组选项中的互斥选择。多个 QRadioButton 放在同一个容器中时，只有一个可以被选中。

QCheckBox
复选框，允许用户进行多项选择或开启/关闭某个功能。可以支持三态（部分选中状态）。

QToolButton
工具按钮，常用于工具栏中。相较于普通按钮，通常显示图标更突出，用于执行常用的操作。

1.2、输入类控件

QLineEdit
单行文本输入控件，常用于输入简短的文本信息。支持输入掩码、验证器和回显模式（如密码输入）。

QTextEdit
多行文本编辑控件，支持富文本编辑。适合用于显示或编辑较长文本，能处理格式化文本。

富文本编辑器功能说明
QTextEdit 除了基本的多行编辑外，还支持以下特性：

1、文本格式化
支持文字加粗、斜体、下划线
可以设置字体、大小和颜色
支持设置段落对齐方式
2、内容格式
支持 HTML 标记
可以插入图片
支持创建列表和表格
3、示例 HTML 代码

<pre>
<b>粗体文本</b>
<i>斜体文本</i>
<font color='red'>红色文本</font>
<h1>标题文本</h1>
</pre>

QSpinBox
用于整数输入的控件，带有内置的增减按钮，方便用户在一定范围内选择整数值。

QDoubleSpinBox
用于浮点数输入的控件，可设置小数精度，适合需要精确数值输入的场合。

QDateEdit / QTimeEdit
用于日期和时间输入的控件，提供直观的日期/时间选择界面。

1.3、选择类控件

QComboBox
下拉选择框，能够节省界面空间，用户点击后展开列表选择具体选项。既可设置为只读也可允许用户编辑。

QListWidget
列表框控件，直接提供一个列表视图，可以方便地添加、删除和管理列表项，常用于显示选项或文件列表。

QSlider
滑块控件，用于在一定范围内选择数值，通过拖动滑块来设置当前值。

QDial
旋钮控件，适用于表示角度或其他循环数值的输入，用户通过旋转来调整值。

QScrollBar
滚动条控件，用于当内容超出可显示区域时，通过滚动条来移动视图。

1.4、显示类控件

QLabel
标签控件，用于显示文本或图像。支持基本文本格式化和 HTML 格式。

QTextBrowser
文本浏览控件，是 QTextEdit 的只读版本，适合用于显示富文本、网页内容或帮助文档。

QProgressBar
进度条控件，用于显示任务进度，可设置为水平或垂直方向。

QLCDNumber
以 LCD 数字样式显示数字的控件，常用于仪表盘、计时器等场景。

QCalendarWidget
日历控件，用于直观展示和选择日期，常用于日期选择或日程管理。

1.5、使用技巧

信号与槽机制
利用 Qt 的信号与槽，实现各控件之间的交互。例如，当用户在 QLineEdit 中输入文本后，可以通过按钮的 clicked() 信号触发槽函数，从而读取文本信息进行处理。

状态管理与数据同步
对于输入控件（如 QLineEdit、QSpinBox 等），要注意控件的状态管理与数据同步，确保界面与程序数据的一致性。

样式表美化
使用 Qt 样式表（QSS）来美化控件界面，实现与应用整体风格一致的 UI 效果。

键盘焦点和快捷键
注意设置控件的键盘焦点顺序和快捷键（例如使用 “&” 符号标记快捷键），提高用户操作效率。

可访问性
考虑控件的可访问性，如合理设置控件标签、提示信息等，确保界面对所有用户友好。

1.6、总结

Qt 的基础控件种类繁多，各自具备不同的功能和特点。通过合理选择和组合这些控件，再配合信号槽机制、布局管理和样式表，可以构建出功能强大且界面友好的应用程序。无论是简单的输入表单，还是复杂的多窗口应用，掌握这些基础控件都是 Qt 开发的第一步。

光看文字也学不到啥，也不知道怎么用的，所以本着一切真相看代码的逻辑，下面上代码

制作不易，求点赞！！！，求评论！！！，求转发！！！，求收藏！！！

#ifndef BASICWIDGETPAGE_H
#define BASICWIDGETPAGE_H

#include <QWidget>
#include <QVBoxLayout>
#include <QLabel>
#include <QPushButton>
#include <QLineEdit>
#include <QComboBox>
#include <QSpinBox>
#include <QTextEdit>
#include <QGroupBox>
#include <QRadioButton>
#include <QCheckBox>
#include <QToolButton>
#include <QFontComboBox>
#include <QSlider>
#include <QScrollBar>
#include <QDial>
#include <QProgressBar>
#include <QLCDNumber>
#include <QDateEdit>
#include <QTimeEdit>
#include <QDoubleSpinBox>
#include <QCalendarWidget>
#include <QTextBrowser>
#include <QListWidget>
#include <QButtonGroup>

class BasicWidgetPage : public QWidget
{
   
    Q_OBJECT
public:
    explicit BasicWidgetPage(QWidget *parent = nullptr);

private:
    void setupUI();
    QWidget* createButtonGroup();    // 按钮类控件组
    QWidget* createInputGroup();     // 输入类控件组
    QWidget* createSelectionGroup(); // 选择类控件组
    QWidget* createDisplayGroup();   // 显示类控件组
    QWidget* createBasicWidgetsDemo(); // 基础控件示例

private slots:
    void updateDisplayArea(const QString &text);
    void handleButtonClicked();
    void handleValueChanged(int value);
    void handleSelectionChanged(const QString &text);

private:
    QTextEdit *displayArea;  // 用于显示控件交互结果
    QProgressBar *progressBar;
    QLCDNumber *lcdNumber;
    QButtonGroup *radioGroup;
};

#endif // BASICWIDGETPAGE_H 

#include "basicwidgetpage.h"
#include <QProgressBar>
#include <QDateEdit>
#include <QTimeEdit>
#include <QSlider>
#include <QScrollBar>
#include <QDial>
#include <QLCDNumber>
#include <QFontComboBox>
#include <QToolButton>
#include <QRadioButton>
#include <QCheckBox>
#include <QIcon>
#include <QGroupBox>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QListWidget>
#include <QTextBrowser>
#include <QCalendarWidget>
#include <QColorDialog>
#include <QTabWidget>
#include <QScrollArea>
#include <QMap>
#include <QDesktopServices>
BasicWidgetPage::BasicWidgetPage(QWidget *parent)
    : QWidget(parent)
{
   
    setupUI();
}
#if 0
1、使用 set 的情况：
设置单一属性或内容
替换现有的属性或内容
   widget->setParent(parent);      // 设置父对象
   label->setText("文本");         // 设置文本内容
   button->setIcon(icon);          // 设置图标
   scrollArea->setWidget(widget);  // 设置滚动区域的内容

2、使用 add 的情况：
向容器中添加多个项目
向布局中添加控件
   layout->addWidget(widget);        // 向布局添加控件
   comboBox->addItem("选项");        // 添加下拉选项
   tabWidget->addTab(page, "标签");  // 添加标签页
   list->addItem("列表项");          // 添加列表项
3、布局的特殊情况：   
   // 方式1：构造时指定父对象
   QVBoxLayout *layout = new QVBoxLayout(widget);  // 自动设置为widget的布局

   // 方式2：先创建布局，后设置
   QVBoxLayout *layout = new QVBoxLayout;
   widget->setLayout(layout);  // 显式设置布局
记忆技巧：
set 通常用于设置单一的、互斥的属性或内容
add 通常用于向容器或集合中添加多个项目
布局管理器可以在构造时指定父对象，也可以后续通过 setLayout 设置
#endif

void BasicWidgetPage::setupUI()
{
   
    // 创建垂直布局
    QVBoxLayout *layout = new QVBoxLayout(this);

    // 标题
    QLabel *titleLabel = new QLabel("基础控件演示", this);
    titleLabel->setStyleSheet("font-size: 16px; font-weight: bold;");
    layout->addWidget(titleLabel);

    // 创建选项卡窗口
    QTabWidget *tabWidget = new QTabWidget(this);
    // 添加选项卡窗口
    layout->addWidget(tabWidget);

    //============================首页 概述============================
    QWidget *homePage = new QWidget;
    // 创建垂直布局
    QVBoxLayout *homeLayout = new QVBoxLayout(homePage);
    // 说明文本
    QLabel *description = new QLabel(
        "Qt基础控件介绍：\n\n"
        "1. 按钮类控件\n"
        "   • QPushButton：标准按钮，用于触发动作\n"
        "   • QRadioButton：单选按钮，用于互斥选择\n"
        "   • QCheckBox：复选框，用于多项选择\n"
        "   • QToolButton：工具按钮，常用于工具栏\n\n"
        "2. 输入类控件\n"
        "   • QLineEdit：单行文本输入，支持输入掩码和验证器\n"
        "   • QTextEdit：多行文本编辑，支持富文本\n"
        "   • QTextEdit：多行文本编辑，支持富文本\n"
        "       富文本编辑器功能说明：\n\n"
        "       1. 文本格式化\n"
        "           • 支持文字加粗、斜体、下划线\n"
        "           • 可以设置字体、大小、颜色\n"
        "           • 支持段落对齐方式设置\n\n"
        "       2. 内容格式\n"
        "           • 支持HTML标记\n"
        "           • 可以插入图片\n"
        "           • 支持创建列表和表格\n\n"
        "       3. 示例HTML代码：\n"
        "       <pre>\n"
        "       &lt;b>粗体文本&lt;/b>\n"
        "       &lt;i>斜体文本&lt;/i>\n"
        "       &lt;font color='red'>红色文本&lt;/font>\n"
        "       &lt;h1>标题文本&lt;/h1>\n"
        "       &lt;/pre>\n\n"
        "   • QSpinBox：整数输入，带有增减按钮\n"
        "   • QDoubleSpinBox：浮点数输入，可设置精度\n"
        "   • QDateEdit/QTimeEdit：日期时间输入\n\n"
        "3. 选择类控件\n"
        "   • QComboBox：下拉选择框，节省空间\n"
        "   • QListWidget：列表框，显示多个选项\n"
        "   • QSlider：滑块，用于范围选择\n"
        "   • QDial：旋钮，适用于角度类数值\n"
        "   • QScrollBar：滚动条，用于内容滚动\n\n"
        "4. 显示类控件\n"
        "   • QLabel：标签，显示文本或图像\n"
        "   • QTextBrowser：文本浏览，只读富文本显示\n"
        "   • QProgressBar：进度条，显示进度\n"