【Qt】控件概述（2）—— 按钮类控件

1. PushButton

QPushButton继承自QAbstractButton类，这个类是抽象类，是其他按钮的父类。

QPushButton和QAbstractButton相关性较大的属性

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

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

代码样例：给按钮导入图片

1. 首先我们要将图片以qrc的形式导入Qt中，这个在第一期演示，这里就不过多的赘述
2. 使用API进行设置。

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));
}

代码样例：带有快捷键的按钮
我们可以把之前的四个按钮控制一个按钮移动进行稍微改动，添加上图片以及使用键盘控制移动。

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 来说默认就是排他的.

代码样例：选择性别选项

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的构造函数启用默认选项，这样只要运行代码就是默认选项。

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

也可以禁用某个选项

// 比如禁用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

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分组

有的时候我们不希望被这个排他所影响，而是像让他子一个区域中进行排他效果，这个时候我们就可以进行分组。

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很相似。

代码样例：选择多个选项

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);
}