按钮类控件

目录

1.Push Button

代码示例: 带有图标的按钮

代码示例: 带有快捷键的按钮

代码示例: 按钮的重复触发

2.Radio Buttion

代码示例: 选择性别

代码示例: click, press, release, toggled 的区别

代码示例: 单选框分组

3.3 Check Box

代码示例: 获取复选按钮的取值

---

1.Push Button

        使用 QPushButton 表示一个按钮.  QPushButton 继承自 QAbstractButton . 这个类是一个抽象类. 是其他按钮的父类.

        抽象类：这个类包含了纯虚函数，无法创建出实例（对象），如果想要创建实例，就得先创建子类，重写纯虚函数，才能够创建出子类的实例。

在 Qt Designer 中也能够看到这里的继承关系.

QAbstractButton 中, 和 QPushButton 相关性较大的属性。

属性	说明
text	按钮中的⽂本
icon	按钮中的图标
iconSize	按钮中图标的尺寸
shortCut	按钮对应的快捷键
autoRepeat	按钮是否会重复触发. 当鼠标左键按住不放时, 如果设为 true, 则会持续产生鼠标点击事件; 如果设为 false, 则必须释放鼠标, 再次按下鼠标时才能产生点击事件. (相当于游戏手柄上的 "连发" 效果)
autoRepeatDelay	重复触发的延时时间. 按住按钮多久之后, 开始重复触发.
autoRepeatInterval	重复触发的周期.

1. QAbstractButton 作为 QWidget 的子类, 当然也继承了 QWidget 的属性.  QWidget 里的各种属性用法, 对于 QAbstractButton 同样适用. 因此表格仅列出 QAbstractButton 独有的属性.
2. Qt 的 api 设计风格是非常清晰的. 此处列出的属性都是可以 获取 和 设置 的. 例如, 使用 text() 获取按钮文本; 使用 setText() 设置文本.

事实上, QPushButton 的核心功能都是 QAbstractButton 提供的. 自身提供的属性都比较简单.

其中 default 和 audoDefault 影响的是按下 enter 时自动点击哪个按钮的行为; flat 把按钮设置为扁平的样式.

---

代码示例: 带有图标的按钮

🌴1) 创建 resource.qrc 文件, 并导入图片

具体操作步骤参见 QWidget http://t.csdnimg.cn/zJs58 中的 使用 qrc 文件管理资源 部分.

🌴2) 在界面上创建一个 按钮

🌴3) 修改 widget.cpp, 给按钮设置图标.

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建图标对象QIcon icon(":/eagle.png");// 设置图标ui->pushButton->setIcon(icon);// 设置图标大小ui->pushButton->setIconSize(QSize(50, 50));
}

🌴4) 执行程序, 观察效果

---

代码示例: 带有快捷键的按钮

🌵1) 在界面中拖五个按钮.

五个按钮的 objectName 分别为 pushButton_target , pushButton_up , pushButton_down , pushButton_left , pushButton_right

五个按钮的初始位置随意, 其中 pushButton_target 尺寸设置为 100 * 100, 其余按钮 设为 50 * 50. 文本内容均清空。

🌵2) 创建 resource.qrc , 并导入 5 个图片.

🌵3) 修改 widget.cpp, 设置图标资源和快捷键

• 使用 setShortcut 给按钮设置快捷键. 参数是一个 QKeySequence 对象. 表示一个按键序列. 支持组合键 (ctrl + c 这种).
• QKeySequence 的构造函数参数, 可以直接使用 "ctrl+c" 这样的按键名字符串表示, 也可以使用预定义好的常量 (形如 Qt::CTRL + Qt::Key_C ) 表示.

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 设置图标ui->pushButton_target->setIcon(QIcon(":/image/sun.png"));// 设置图标大小ui->pushButton_target->setIconSize(QSize(100, 100));ui->pushButton_up->setIcon(QIcon(":/image/up.png"));ui->pushButton_up->setIconSize(QSize(50, 50));ui->pushButton_down->setIcon(QIcon(":/image/down.png"));ui->pushButton_down->setIconSize(QSize(50, 50));ui->pushButton_left->setIcon(QIcon(":/image/left.png"));ui->pushButton_left->setIconSize(QSize(50, 50));ui->pushButton_right->setIcon(QIcon(":/image/right.png"));ui->pushButton_right->setIconSize(QSize(50, 50));// 1.直接通过按键的名字设置快捷键，虽然简单，但是容易写错
//    ui->pushButton_up->setShortcut(QKeySequence("ctrl + w"));
//    ui->pushButton_down->setShortcut(QKeySequence("s"));
//    ui->pushButton_left->setShortcut(QKeySequence("a"));
//    ui->pushButton_right->setShortcut(QKeySequence("d"));// 2.通过按键的枚举来设置快捷键ui->pushButton_up->setShortcut(QKeySequence(Qt::CTRL + Qt::Key_W));ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_S));ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_A));ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_D));
}

🌵4) 修改 widget.cpp, 设置四个方向键的 slot 函数.

void Widget::on_pushButton_up_clicked()
{// 获取 target 的位置QRect rect = ui->pushButton_target->geometry();// 基于上次的位置，设置新的位置ui->pushButton_target->setGeometry(rect.x(), rect.y() - 5, rect.width(), rect.height());
}void Widget::on_pushButton_down_clicked()
{QRect rect = ui->pushButton_target->geometry();ui->pushButton_target->setGeometry(rect.x(), rect.y() + 5, rect.width(), rect.height());
}void Widget::on_pushButton_left_clicked()
{QRect rect = ui->pushButton_target->geometry();ui->pushButton_target->setGeometry(rect.x() - 5, rect.y(), rect.width(), rect.height());
}void Widget::on_pushButton_right_clicked()
{QRect rect = ui->pushButton_target->geometry();ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(), rect.height());
}

🌵5) 运行程序, 此时点击按钮, 或者使用 wasd 均可让太阳☀移动.

---

代码示例: 按钮的重复触发

        在上述案例中, 按住快捷键, 是可以进行重复触发的（键盘快捷键，默认就是能连发的）. 但是鼠标点击则不能. 修改 widget.cpp, 在构造函数中开启重复触发.

    // 开启鼠标点击的连发功能ui->pushButton_up->setAutoRepeat(true);ui->pushButton_down->setAutoRepeat(true);ui->pushButton_left->setAutoRepeat(true);ui->pushButton_right->setAutoRepeat(true);

此时, 按住鼠标时, 即可让太阳☀连续移动.

2.Radio Buttion

QRadioButton 是单选按钮. 可以让我们在多个选项中选择一个.

作为 QAbstractButton 和 QWidget 的⼦类, 前面介绍的属性和用法, 对于 QRadioButton 同样适用.

QAbstractButton 中和 QRadioButton 关系较大的属性

属性	说明
checkable	是否能选中
checked	是否已经被选中. checkable 是 checked 的前提条件.
autoExclusive	是否排他. 选中⼀个按钮之后是否会取消其他按钮的选中. 对于 QRadioButton 来说默认就是排他的.

---

代码示例: 选择性别

🍓1) 在界面上创建一个 label, 和 3 个 单选按钮

设置的文本如下图. 3 个单选按钮的 objectName 分别为 radioButton_male , radioButton_female , radioButton_other

🍓2) 修改 widget.cpp, 编辑三个 QRadioButton 的 slot 函数.

void Widget::on_radioButton_male_clicked()
{// 把界面上 label 的内容进行更新ui->label->setText("您选择的性别为：男");
}void Widget::on_radioButton_female_clicked()
{// 把界面上 label 的内容进行更新ui->label->setText("您选择的性别为：女");
}void Widget::on_radioButton_other_clicked()
{// 把界面上 label 的内容进行更新ui->label->setText("您选择的性别为：其他");
}

🍓3) 运行程序, 可以看到随着选择不同的单选按钮, label 中的提示文字就会随之变化

🍓4) 当前代码中, 如果程序启动, 则不会选择任何选项. 可以修改代码, 让程序启动默认选中性别男

Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 设置默认选中该按钮ui->radioButton_male->setChecked(true);ui->label->setText("您选择的性别为：男");
}

此时运行程序, 即可看到 性别男 已经被选中了.

🍓5) 当前代码中, 也可以禁用 "其他" 被选中.

修改 widget.cpp 的构造函数

    // 禁用 other 选项ui->radioButton_other->setCheckable(false);

运行程序, 可以看到, 点击 "其他" 按钮的时候, 虽然不会被选中, 但是可以触发点击事件, 使上面的 label 显示性别为其他.

使用 setEnabled 是更彻底的禁用按钮的方式. 此时该按钮无法被选中, 也无法响应任何输入

    // 禁用 other 选项//ui->radioButton_other->setEnabled(false);ui->radioButton_other->setDisabled(true);

---

代码示例: click, press, release, toggled 的区别

• clicked 表示一次 "点击"
• pressed 表示鼠标 "按下"
• released 表示鼠标 "释放"
• toggled 表示按钮状态切换.

🍒1) 在界面上创建四个单选按钮

objectName 分别为 radioButton , radioButton_2 , radioButton_3 , radioButton_4

🍒2) 给 1 创建 clicked(bool) 槽函数, 给 2 创建 pressed 槽函数, 给 3 创建 released 槽函数, 给 4 创建 toggled 槽函数.

void Widget::on_radioButton_clicked(bool checked)
{// 此处的 checked 就代表 radioButton 的选中状态qDebug() << "clicked：" << checked;
}void Widget::on_radioButton_2_pressed()
{qDebug() << "pressed";
}void Widget::on_radioButton_3_released()
{qDebug() << "released";
}void Widget::on_radioButton_4_toggled(bool checked)
{//check 状态发生改变，就会触发这个状态if(checked){qDebug() << "toggled checked true";}else{qDebug() << "toggled checked false";}
}

🍒3) 运行程序, 可以看到

• clicked 是一次鼠标按下+鼠标释放触发的.
• pressed 是鼠标按下触发的.
• released 是鼠标释放触发的.
• toggled 是 checked 属性改变时触发的.

总的来说, toggled 是最适合 QRadioButton 的.

---

代码示例: 单选框分组

🍂1) 在界面上创建 6 个单选框, 用来模拟麦当劳点餐界面.

objectName 分别为 radioButton 到 radioButton_6

此时直接运行程序, 可以看到, 这六个 QRadioButton 之间都是排他的.

我们希望每一组内部来控制排他, 但是组和组之间不能排他.

🍂2) 引入 QButtonGroup 进行分组.

修改 widget.cpp

#include <QButtonGroup>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 创建三个 QButtonGroupQButtonGroup* group1 = new QButtonGroup(this);QButtonGroup* group2 = new QButtonGroup(this);QButtonGroup* group3 = new QButtonGroup(this);// 把 QRadioButton 两两⼀组, 放到三个 QButtonGroup 中.group1->addButton(ui->radioButton);group1->addButton(ui->radioButton_2);group2->addButton(ui->radioButton_3);group2->addButton(ui->radioButton_4);group3->addButton(ui->radioButton_5);group3->addButton(ui->radioButton_6);
}

再次执行程序, 可以看到可以按照正确的分组方式来完成排他了.

3.3 Check Box

QCheckBox 表示复选按钮. 可以允许选中多个.

和 QCheckBox 最相关的属性也是 checkable 和 checked , 都是继承自 QAbstractButton .

---

代码示例: 获取复选按钮的取值

🌵1) 在界面上创建 三个复选按钮, 和一个普通按钮.

objectName 分别为 checkBox_book1 , checkBox_book2 , checkBox_book3 , 以及pushButton。

🌵2) 给 pushButton 添加 slot 函数

void Widget::on_pushButton_clicked()
{QString result = "你最感兴趣的书籍有哪些：";if(ui->checkBox_book1->isChecked()){result += ui->checkBox_book1->text() + " ";}if(ui->checkBox_book2->isChecked()){result += ui->checkBox_book2->text() + " ";}if(ui->checkBox_book3->isChecked()){result += ui->checkBox_book3->text();}ui->label->setText(result);
}

🌵3) 运行程序, 可以看到点击确认按钮时, 就会在屏幕上输出选中的内容.