Qt初学者使用教程（一）

Qt初学者使用（一）

用于技术分析和总结，充分发挥技术的白嫖，同时也是提升自己的写作水平，可以更好的看到自己缺点，同时如果有小伙伴们有什么不懂或者需要改善的，可以私下评论，我们一起共同进步，当前文章会持续的更新完善。

1、当前环境

• qt版本5.13.0

2、创建第一个QT程序

QMainWindow是具备工具栏和状态栏的窗口,继承QWidget，QWidget是普通的窗口,QDialog是一个对话框，也称弹窗，也继承了QWidget,我们这里就选择了QMainWindow

注意，这里编译的时候选择release，如果选择debug模式，当你正式上线选择release，你会发现可能运行失败，这是qt工具没做好的地方

成功运行的效果图

3、目录结构

headers目录：存放头文件
sources目录：存放源码
forms目录：存放设计界面，带.ui都是设计界面
resource目录：存放资源文件的

4、添加资源文件

选择添加前缀

选择添加文件

这就算添加资源成功过了

资源路径

组件的使用

1、获取UI界面的组件对象

在设计师面板我们可以看到我们的组件，而红色方框圈起来的就是对象名称

进入我们的源码界面mainwindow.cpp文件中，因为控件都是在mainwindow.ui里面，所以要获取控件应该去mainwindow.cpp

//通过 ui->对象名称
qDebug() << ui->pushButton->text();  //拿到按钮对象，并且输出按钮名称 qDebug() 是控台输出函数

2、Button区的使用

运行的效果

2.1 QPushButton

• 设置按钮的文本和背景色：setText(const QString &)、setStyleSheet(const QString &)
• 设置按钮的禁用： setEnabled(bool)
• 设置按钮的图标：setIconSize(const QSize &)
• 文字提示：setToolTip(const QString &)
• 信号与槽

设置按钮的文本和背景色

//设置按钮文字
ui->pushButton->setText("哈哈哈");
//获取按钮文字
ui->pushButton->text()

//设置按钮样式，背景色更改为红色
ui->pushButton->setStyleSheet("QPushButton{background-color: rgb(255, 0, 0);}");

设置按钮的禁用

//禁用按钮
ui->pushButton->setEnabled(false);

设置按钮的图标

QIcon icon(":/image/avatar.jpg"); //资源路径怎么导入可以观看(4、添加资源文件) 
ui->pushButton->setIcon(icon);

文字提示

 ui->pushButton->setToolTip("按钮文字提示");//设置文字提示

信号与槽

2.2 QToolButton

• 设置按钮的文本和禁用：setText(const QString &)、 setEnabled(bool)
• 设置按钮的图标：setIconSize(const QSize &)
• 设置按钮的弹出菜单：setMenu(QMenu * menu)
• 自动提升：setAutoRaise(bool )
• 文字提示：setToolTip(const QString &)
• 信号与槽

设置按钮的文本和禁用

ui->toolButton->setText("哈哈哈"); //设置文本
ui->toolButton->setEnabled(false); //禁用按钮

设置按钮的图标

    QIcon icon(":/image/avatar.jpg");
    ui->toolButton->setIcon(icon); //设置图标

设置按钮的弹出菜单
QToolButton 提供了三种弹出模式：
DelayedPopup（默认） ：点击后稍微延迟才显示菜单。
InstantPopup：点击后立即显示菜单。
MenuButtonPopup：仅当点击菜单按钮时才显示菜单（按钮旁边会显示一个小箭头）。

    QMenu * menu = new QMenu(ui->toolButton);
    menu->addAction("菜单1");
    menu->addAction("菜单2");
    ui->toolButton->setMenu(menu); // 设置下拉菜单
    ui->toolButton->setPopupMode(QToolButton::InstantPopup); // 设置菜单按钮弹出模式
    
    //绑定菜单点击信号
    connect(menu,&QMenu::triggered,this,[=](QAction * action){
        qDebug() << "action " << action->text();  //输出点击的菜单
    });

自动提升

当鼠标指针悬停在 QToolButton 上时，它会自动以轻微的阴影效果提升（即略微突出显示），以表明它是可以点击的。

    ui->toolButton->setAutoRaise(true); // 启用自动提升

文字提示
当用户将鼠标悬停在按钮上时，会显示这个提示

ui->toolButton->setToolTip("设置工具提示"); // 设置工具提示

信号与槽

2.3 QRadioButton

• 设置单选按钮的文本标签：setText(const QString &text)
• 设置单选按钮是否被选中：setChecked(bool checked)
• 设置单选按钮的图标和图标大小：setIcon(const QIcon &icon)、setIconSize(const QSize &size)
• 设置单选按钮是否自动排除其他已选中的单选按钮：setAutoExclusive(bool exclusive)
• QButtonGroup的使用场景
• 信号与槽

设置单选按钮的文本标签

ui->radioButton->setText("单选框");

设置单选按钮是否被选中

ui->radioButton->setChecked(true);

设置单选按钮的图标和图标大小

ui->radioButton->setText("设置图标");
QIcon icon(":/image/avatar.jpg");
ui->radioButton->setIcon(icon);
ui->radioButton->setIconSize(QSize(30,30));

设置单选按钮是否自动排除其他已选中的单选按钮

设置为false我们可以看到，变成了多选框的特效，不会排斥其他单选框

ui->radioButton->setAutoExclusive(false);
ui->radioButton_2->setAutoExclusive(false);
ui->radioButton_3->setAutoExclusive(false);

QButtonGroup的使用场景

当我们有多个单选项的时候，我们发现，不能独立的选择，只能选择一个，这时候我们的QButtonGroup就派上用场了

QButtonGroup * left_group = new QButtonGroup(this);
QButtonGroup * right_group = new QButtonGroup(this);
//左边
left_group->addButton(ui->radioButton);
left_group->addButton(ui->radioButton_2);
left_group->addButton(ui->radioButton_3);
//右边
right_group->addButton(ui->radioButton_4);
right_group->addButton(ui->radioButton_5);
right_group->addButton(ui->radioButton_6);

最后还有一种方式也实现我们的效果，需要去我们的设计界面，然后使用垂直布局把他们分开也可以达到我们的效果

信号与槽

2.4 QCheckBox

• 设置文本、设置选中：setText(const QString &text)、setChecked(bool checked)
• 设置三态：setTristate(bool tristate)
• 信号与槽

设置文本、设置选中

ui->checkBox->setText("多选框");
ui->checkBox->setChecked(true);

设置三态

设置复选框是否允许有第三种状态。如果参数为true，则启用三态模式；如果为false，则复选框只有两种状态（选中或未选中）。

ui->checkBox->setTristate(true);
//监听可选框的状态改变信号
connect(ui->checkBox,&QCheckBox::stateChanged,this,[=](int state){
    // 根据复选框的状态更新标签文本
    if (state == Qt::Checked) ui->checkBox_2->setText("Checked");
    else if(state == Qt::PartiallyChecked) ui->checkBox_2->setText("PartiallyChecked");
    else ui->checkBox_2->setText("Unchecked");

});

信号与槽

2.5 QCommandLinkButton

• 设置文本、描述、图标：setText(const QString &)、setDescription(const QString &)、setIcon(const QIcon &)、setIconSize(const QSize &)

设置文本、描述、图标

ui->commandLinkButton->setText("保存文件"); //设置文本
ui->commandLinkButton->setDescription("点击保存当前文件。"); //设置描述

//设置图标
QIcon icon(":/image/avatar.jpg");
ui->commandLinkButton->setIcon(icon);
ui->commandLinkButton->setIconSize(QSize(30,30)); //设置图标大小

2.6 QDialogButtonBox（几乎用不到）