控件概述(2)
- [1. PushButton](#1. PushButton)
- [2. RadioButton------单选按钮](#2. RadioButton——单选按钮)
-
- [2.1 使用](#2.1 使用)
- [2.2 区分信号 clicked,clicked(bool),pressed,released,toggled(bool)](#2.2 区分信号 clicked,clicked(bool),pressed,released,toggled(bool))
- [2.3 QButtonGroup分组](#2.3 QButtonGroup分组)
- [3. CheckBox------复选按钮](#3. CheckBox——复选按钮)
1. PushButton
QPushButton继承自QAbstractButton类,这个类是抽象类,是其他按钮的父类。
QPushButton和QAbstractButton相关性较大的属性
属性 | 说明 |
---|---|
text | 按钮中的文本 |
icon | 按钮中的图标 |
iconSize | 按钮中图标的尺寸 |
shortCut | 按钮对应的快捷键 |
autoRepeat | 按钮是否会重复触发. 当鼠标左键按住不放时, 如果设为 true,则会持续产⽣鼠标点击事件;如果设为false,则必须释放鼠标,再次按下鼠标时才能产生点击事件.(相当于游戏手柄上的"连发"效果) |
autoRepeatDelay | 重复触发的延时时间.按住按钮多久之后,开始重复触发. |
autoRepeatInterval | 重复触发的周期. |
- QAbstractButton 作为QWidget 的子类,当然也继承了QWidget 的属性.上一期绍的QWidget 里的各种属性用法,对于QAbstractButton 同样适用.因此表格仅列出QAbstractButton 独有的属性.
- Qt的API设计风格是⾮常清晰的.此处列出的属性都是可以获取 和设置 的.例如,使用text() 获取按钮⽂本;使⽤用setText() 设置文本.
代码样例:给按钮导入图片
- 首先我们要将图片以qrc的形式导入Qt中,这个在第一期演示,这里就不过多的赘述
- 使用API进行设置。
c
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
QPushButton* but = new QPushButton(this);
QRect rect = but->geometry();
but->setGeometry(rect.x(), rect.y(), 220, 220);
but->setIcon(QIcon(":/qt.jpg"));
but->setIconSize(QSize(120,120));
}
代码样例 :带有快捷键的按钮
我们可以把之前的四个按钮控制一个按钮移动进行稍微改动,添加上图片以及使用键盘控制移动。
c
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
ui->pushButton_move->setIcon(QIcon(":/image/qt.jpg"));
ui->pushButton_move->setIconSize(QSize(220,220));
ui->pushButton_up->setIcon(QIcon(":/image/up.png"));
ui->pushButton_up->setIconSize(QSize(30, 30));
ui->pushButton_down->setIcon(QIcon(":/image/down.png"));
ui->pushButton_down->setIconSize(QSize(30, 30));
ui->pushButton_left->setIcon(QIcon(":/image/left.png"));
ui->pushButton_left->setIconSize(QSize(30, 30));
ui->pushButton_right->setIcon(QIcon(":/image/right.png"));
ui->pushButton_right->setIconSize(QSize(30, 30));
// 设置键盘快捷键
ui->pushButton_up->setShortcut(QKeySequence(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));
// 也可以使用这种方式
// ui->pushButton_up->setShortcut(QKeySequence("w"));
// ui->pushButton_down->setShortcut(QKeySequence("s"));
// ui->pushButton_left->setShortcut(QKeySequence("a"));
// ui->pushButton_right->setShortcut(QKeySequence("d"));
// 设置重复触发功能,可以长按点击移动
ui->pushButton_up->setAutoRepeat(true);
ui->pushButton_down->setAutoRepeat(true);
ui->pushButton_left->setAutoRepeat(true);
ui->pushButton_right->setAutoRepeat(true);
}
Widget::~Widget()
{
delete ui;
}
void Widget::on_pushButton_up_clicked()
{
QRect rect = ui->pushButton_move->geometry();
ui->pushButton_move->setGeometry(rect.x(), rect.y() - 5, rect.width(), rect.height());
}
void Widget::on_pushButton_down_clicked()
{
QRect rect = ui->pushButton_move->geometry();
ui->pushButton_move->setGeometry(rect.x(), rect.y() + 5, rect.width(), rect.height());
}
void Widget::on_pushButton_left_clicked()
{
QRect rect = ui->pushButton_move->geometry();
ui->pushButton_move->setGeometry(rect.x() - 5, rect.y(), rect.width(), rect.height());
}
void Widget::on_pushButton_right_clicked()
{
QRect rect = ui->pushButton_move->geometry();
ui->pushButton_move->setGeometry(rect.x() + 5, rect.y(), rect.width(), rect.height());
}
2. RadioButton------单选按钮
2.1 使用
QRadioButton是单选按钮,可以让我们在多个选择中选择一个。同样的QRadioButton同样是QAbstractButton和QWidget的子类,同样他们的一些API也可以适用于QRadioButton中。
QAbstractButton中和QRadioButton关系较大的属性
属性 | 说明 |
---|---|
checkable | 是否能选中 |
checked | 是否已经被选中. checkable 是 checked 的前提条件. |
autoExclusive | 是否排他. 选中⼀个按钮之后是否会取消其他按钮的选中. 对于 QRadioButton 来说默认就是排他的. |
代码样例:选择性别选项
c
void Widget::on_radioButton_male_clicked()
{
ui->label->setText("你选择的性别是:男");
}
void Widget::on_radioButton_female_clicked()
{
ui->label->setText("你选择的性别是:女");
}
void Widget::on_radioButton_other_clicked()
{
ui->label->setText("你选择的性别是:其他");
}
也可以在Widget的构造函数启用默认选项,这样只要运行代码就是默认选项。
c
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 设置默认选中按钮
ui->radioButton_male->setChecked(true);
ui->label->setText("你选择的性别是:男");
}
也可以禁用某个选项
c
// 比如禁用other选项
ui->readioButton_other->setCheckable(false);
ui->readioButton_other->setEnable(false);
2.2 区分信号 clicked,clicked(bool),pressed,released,toggled(bool)
- clicked表示一次"点击"
- clicked(bool)同样表示一次"点击"同时会传递一个参数,只要点击了就是true
- pressed表示鼠标"按下"
- released表示鼠标"释放"
- toggled(bool)表示按钮状态切换,比如上面的radioButton按下时参数是true,但是如果其他按钮按下,会触发排他效果这个时候参数就会从true变成fasle这个时候就会触发toggled
c
void Widget::on_radioButton_clicked()
{
qDebug() << "clicked";
}
void Widget::on_radioButton_2_clicked(bool checked)
{
qDebug() << "clicked(bool):" << checked;
}
void Widget::on_radioButton_3_pressed()
{
qDebug() << "pressed";
}
void Widget::on_radioButton_4_released()
{
qDebug() << "released";
}
void Widget::on_radioButton_5_toggled(bool checked)
{
qDebug() << "toggled(bool):" << checked;
}
2.3 QButtonGroup分组
有的时候我们不希望被这个排他所影响,而是像让他子一个区域中进行排他效果,这个时候我们就可以进行分组。
c
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 创建三个组
QButtonGroup* group1 = new QButtonGroup(this);
QButtonGroup* group2 = new QButtonGroup(this);
QButtonGroup* group3 = new QButtonGroup(this);
// 进行分组
group1->addButton(ui->radioButton);
group1->addButton(ui->radioButton_2);
group1->addButton(ui->radioButton_3);
group2->addButton(ui->radioButton_4);
group2->addButton(ui->radioButton_5);
group2->addButton(ui->radioButton_6);
group3->addButton(ui->radioButton_7);
group3->addButton(ui->radioButton_8);
group3->addButton(ui->radioButton_9);
}
3. CheckBox------复选按钮
上面我们使用RadioButton是单选按钮,也就是只能选一个,但是有的时候我们需要多选,这个时候就要用到CheckBox复选按钮,允许我们选择多个选项。
属性 | 说明 |
---|---|
checkable | 是否能选中 |
checked | 是否已经被选中. checkable 是 checked 的前提条件. |
而其他的属性和RadioButton很相似。
代码样例:选择多个选项
c
void Widget::on_pushButton_clicked()
{
QString str = "今天的娱乐项目是:";
if (ui->checkBox->isChecked()){
str += ui->checkBox->text() + " ";
}
if (ui->checkBox_2->isChecked()){
str += ui->checkBox_2->text() + " ";
}
if (ui->checkBox_3->isChecked()){
str += ui->checkBox_3->text() + " ";
}
ui->label->setText(str);
}