QT开发（三） 常用控件介绍

1、概念

在Qt中，控件（Widget）是用来构建用户界面的可视化元素，用于展示信息、接收用户输入、触发事件等。控件可以是按钮、文本框、标签、列表框等各种元素，用于创建丰富的用户界面。

2、常用控件

2.1 Buttons

按钮控件是常用的用户交互控件之一，用于触发特定操作或事件。

• 普通按钮（QPushButton）：用于触发一般的操作或事件，如提交表单、打开文件等。
• 复选框按钮（QCheckBox）：用于表示两种状态之间的选择，如开关按钮、多选等。
• 单选按钮（QRadioButton）：用于从多个互斥选项中选择一个，如性别选择、模式切换等
• 工具按钮（QToolButton）：用于显示图标或文本，并触发相关操作，如工具栏按钮、下拉菜单按钮等。

设计如下界面：

同时添加如下测试代码：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 选中常用按键后打印信息
    connect(ui->PuBtn_1, &QPushButton::clicked, [=](){
        qDebug() << "选中常用按键";
    });

    // 默认选中未婚
    ui->radioButton->setChecked(true);

    // 打印多选按钮状态
    connect(ui->checkBox, &QPushButton::clicked, [=](int state){
        qDebug() << "多选按钮状态：" << state;
    });
}

按键测试效果如下：

2.2 List Widget

List Widget用于显示单列的数据列表，每个项都是一个单独的条目。

设计如下界面：

同时添加如下测试代码：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 显示校规校纪
    QStringList list;
    list << "校规校纪" << "不许打架" << "不许逃课" << "尽量不要同时和好几个人谈恋爱";
    ui->listWidget->addItems(list);

    // 设置文本居中显示
    for(int i = 0; i < ui->listWidget->count(); i++)
    {
        QListWidgetItem *item = ui->listWidget->item(i);
        item->setTextAlignment(Qt::AlignCenter);
    }
}

测试效果如下：

2.3 Tree Widget

Tree Widget用于显示具有层次结构的数据，每个项可以包含子项。适用于显示具有父子关系的数据，如文件系统结构、组织架构等。

设计如下界面：

同时添加如下测试代码：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 设置表头
    ui->treeWidget->setHeaderLabels(QStringList() << "科目" << "科目介绍");

    QStringList listroot, listchild;
    listroot << "科目1" << "科目2" << "科目3" << "科目4";
    listchild << "纯理论，太简单了" << "一顿操作猛如虎，一看通过两成五" << "过了获得一次尬舞的机会" << "跟教练有仇报仇去吧";

    for (int i = 0; i < listroot.size(); ++i)
    {
        // 添加根节点
        QTreeWidgetItem *rootItem = new QTreeWidgetItem(ui->treeWidget);
        rootItem->setText(0, listroot[i]);

        // 添加对应的子节点
        QTreeWidgetItem *childItem = new QTreeWidgetItem(rootItem);
        childItem->setText(1, listchild[i]);
    }
}

测试效果如下：

2.4 Table Widget

Table Widget用于以表格形式显示数据，包含多行和多列。适用于显示二维数据，如表格数据、数据集等。

设计如下界面：

同时添加如下测试代码：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 设置列数
    ui->tableWidget->setColumnCount(3);

    // 设置行数
    ui->tableWidget->setRowCount(3);

    // 设置水平表头
    ui->tableWidget->setHorizontalHeaderLabels(QStringList() << "姓名" << "学号" << "成绩");

    // 设置内容
    QStringList nameList, numberList;
    nameList << "张三爷" << "李四爷" << "王五弟";
    numberList << "001" << "002" << "003";
    int score[3] = {96 ,97 ,99};
    for(int i = 0; i < 3; ++i)
    {
        for(int j = 0; j < 3; ++j)
        {
            if(j == 0)
            {
                QTableWidgetItem *item = new QTableWidgetItem(nameList[i]);
                item->setTextAlignment(Qt::AlignCenter);
                ui->tableWidget->setItem(i, j, item);
            }
            else if(j == 1)
            {
                QTableWidgetItem *item = new QTableWidgetItem(numberList[i]);
                item->setTextAlignment(Qt::AlignCenter);
                ui->tableWidget->setItem(i, j, item);
            }
            else
            {
                QTableWidgetItem *item = new QTableWidgetItem(QString::number(score[i]));
                item->setTextAlignment(Qt::AlignCenter);
                ui->tableWidget->setItem(i, j, item);
            }
        }
    }
}

测试效果如下：

2.5 Containers

• Scroll Area（滚动区域）：用于显示超出视图范围的内容，并提供滚动条进行查看。适用于需要显示大量内容的情况。

• Tool Box（工具箱）：类似于选项卡控件，可以显示多个页面，并通过选项卡切换显示不同内容。适用于显示多个相关页面的场景。

• Tab Widget（选项卡控件）：用于显示多个页面，每个页面对应一个选项卡，用户可以通过点击选项卡切换显示不同内容。常用于分组显示相关内容。

界面设计如下：

显示效果：

• Stacked Widget（堆叠控件）：用于在同一位置显示多个子控件，但只有一个子控件可见。通过切换当前显示的子控件来实现内容的切换。

使用Stacked Widget进行上述3个界面的切换，设计界面如下：

添加按键跳转的测试代码：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 设置默认
    ui->stackedWidget->setCurrentIndex(0);

    // 设置按键跳转
    connect(ui->btn_btn, &QPushButton::clicked, [=](){
        ui->stackedWidget->setCurrentIndex(1);
    });

    connect(ui->btn_net, &QPushButton::clicked, [=](){
        ui->stackedWidget->setCurrentIndex(2);
    });

    connect(ui->btn_grade, &QPushButton::clicked, [=](){
        ui->stackedWidget->setCurrentIndex(0);
    });
}

测试结果：

2.6 Input Widgets

Input Widgets控件用于接收用户输入数据的控件，常用控件如下：

使用代码添加多选框条目：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 设置下拉框内容
    ui->comboBox->addItem("小学");
    ui->comboBox->addItem("初中");
    ui->comboBox->addItem("高中");
    ui->comboBox->addItem("大学");
}

显示效果如下：

2.7 Label

Label控件（QLabel）用于显示文本或图像，并通常用于向用户提供信息或说明。Label控件是一种只读控件，用户不能直接在Label上进行编辑或交互操作。Label控件通常用于显示静态文本、图像、链接等内容。

Label控件的一些常见特性和用法包括：

• 显示文本：Label可以显示文本内容，支持设置字体、颜色、对齐方式等属性。
• 显示图像：Label可以显示图像，支持显示各种格式的图片文件。
• 超链接：Label可以显示带有链接效果的文本，用户可以点击链接跳转到指定的网页或执行其他操作。
• 自动换行：Label支持自动换行功能，当文本内容超出Label的显示范围时会自动换行显示。
• 富文本：Label支持显示富文本内容，可以使用HTML标记语言来设置文本的样式和格式。

通过Label控件，开发者可以方便地向用户展示各种信息、说明、提示等内容，从而增强用户界面的友好性和交互性。

设置一个文本标签和一个显示图片的标签：

编写代码设置图片：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    ui->label_img->setPixmap(QPixmap(":/file.jpg"));
    ui->label_img->resize(300,150);
}

显示效果：

3、总结

本文介绍了QT常用控件，并编写代码进行简单测试。