QT：控件属性及常用控件(2)-----按钮类控件及显示类控件

在这里插入图片描述

文章目录

QT关于qrc一个蛋疼的问题
一、按钮类控件
- 1.PushButton
- - 1.1 给按钮加图标
  - 1.2 给按钮加快捷键
- 2.RadioButtion
- - 2.1 单选题
  - 2.2 关于状态
  - 2.3 多组单选
- 3.Check Box
- 4.Tool Button
二、显示类控件
- 1.Lable
- - 1.1 文本、图片显示
  - 1.2 Label格式
  - 1.3 设置伙伴(绑定伙伴关系)
- 2.LCDNumber
- - 2.1 使用槽函数连接的方法实现倒计时
  - 2.2 ※※重要使用线程的方法实现倒计时(不可行)
- 3.ProgressBar
- 4.Calendar Widget
总结

QT关于qrc一个蛋疼的问题

在这里插入图片描述

一、按钮类控件

1.PushButton

使⽤QPushButton 表⽰⼀个按钮.这也是当前我们最熟悉的⼀个控件了.
QPushButton 继承⾃QAbstractButton 。这个类是⼀个抽象类.是其他按钮的⽗类.
QAbstractButton 中,和QPushButton 相关性较⼤的属性。

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

1.1 给按钮加图标

在这里插入图片描述

1.2 给按钮加快捷键

先利用qrc设置好图片

#include "widget.h"
#include "ui_widget.h"

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

    //设置按钮的图标
    ui->pushButton_target->setIcon(QIcon(":image/kun.png"));
    ui->pushButton_target->setIconSize(QSize(200,200));
    ui->pushButton_up->setIcon(QIcon(":image/up.png"));
    ui->pushButton_up->setIconSize(QSize(80,80));
    ui->pushButton_down->setIcon(QIcon(":image/down.png"));
    ui->pushButton_down->setIconSize(QSize(80,80));
    ui->pushButton_right->setIcon(QIcon(":image/right.png"));
    ui->pushButton_right->setIconSize(QSize(80,80));
    ui->pushButton_left->setIcon(QIcon(":image/left.png"));
    ui->pushButton_left->setIconSize(QSize(80,80));
    //设置快捷键方法1，容易写错
    //ui->pushButton_up->setShortcut(QKeySequence("w"));            //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::Key_Up));        //QKeySequence(Qt::CTRL+Qt::Key_Up));
    ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_Down));
    ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_Left));
    ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_Right));

    //开启鼠标连发功能(键盘的连发默认是支持的)
    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()
{
    //获取target的位置
    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()
{
    //获取target的位置
    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()
{
    //获取target的位置
    QRect rect=ui->pushButton_target->geometry();
    //点击时设置新的位置
    ui->pushButton_target->setGeometry(rect.x()+5,rect.y(),rect.width(),rect.height());
}

void Widget::on_pushButton_down_clicked()
{
    //获取target的位置
    QRect rect=ui->pushButton_target->geometry();
    //点击时设置新的位置
    ui->pushButton_target->setGeometry(rect.x(),rect.y()+5,rect.width(),rect.height());
}

在这里插入图片描述

2.RadioButtion

QRadioButton 是单选按钮.可以让我们在多个选项中选择⼀个.
作为QAbstractButton 和QWidget 的⼦类,上⾯介绍的属性和⽤法,对于QRadioButton同样适⽤.
QAbstractButton 中和QRadioButton 关系较⼤的属性

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

2.1 单选题

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //添加默认选项
    //ui->radioButton_1->setChecked(true);
    //ui->label->setText("你最喜欢的食物：水果");
    //禁用选项(屎不能吃)
    //ui->radioButton_5->setCheckable(false);//只是能让按钮不被选中，但是点击可以响应！
    ui->radioButton_5->setEnabled(false);
    //ui->radioButton_5->setDisabled(true);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::on_radioButton_1_clicked()
{
    //点击后更新内容
    ui->label->setText("你最喜欢的食物：水果");
}

void Widget::on_radioButton_2_clicked()
{
    //点击后更新内容
    ui->label->setText("你最喜欢的食物：蔬菜");
}

void Widget::on_radioButton_3_clicked()
{
    //点击后更新内容
    ui->label->setText("你最喜欢的食物：肉类");
}

void Widget::on_radioButton_4_clicked()
{
    //点击后更新内容
    ui->label->setText("你最喜欢的食物：海鲜");
}

void Widget::on_radioButton_5_clicked()
{
    //点击后更新内容
    ui->label->setText("你最喜欢的食物：屎");
}

在这里插入图片描述

2.2 关于状态

在这里插入图片描述

• clicked 是⼀次⿏标按下+⿏标释放触发的.
• pressed 是⿏标按下触发的.
• released 是⿏标释放触发的.
• toggled 是checked属性改变时触发的.(连续点击不会触发，必须切换才能触发)

2.3 多组单选

在这里插入图片描述

3.Check Box

QCheckBox 表⽰复选按钮.可以允许选中多个.(其他功能和radiobutton差不多！！)
和QCheckBox 最相关的属性也是checkable和checked，都继承自QAbstractButton.
⾄于checkable 和checked ,都是继承⾃QCheckBox 独有的属性tristate ⽤来实现"三态复选框".
在这里插入图片描述

4.Tool Button

QToolButton 的⼤部分功能,和QPushButton 是⼀致的.但是QToolButton 主要应⽤在⼯具栏,菜单等场景.
在这里插入图片描述

二、显示类控件

1.Lable

QLabel 可以⽤来显⽰⽂本和图⽚.

属性	说明
text	QLabel 中的⽂本
textFormat	⽂本的格式.
pixmap	QLabel内部包含的图⽚.
scaledContents	设为true表⽰内容⾃动拉伸填充QLabel 。设为false则不会⾃动拉伸
alignment	对⻬⽅式.
wordWrap	设为true内部的⽂本会⾃动换⾏.设为false则内部⽂本不会⾃动换⾏.
indent	设置⽂本缩进.⽔平和垂直⽅向都⽣效.
margin	内部⽂本和边框之间的边距.不同于于indent,但是是上下左右四个⽅向都同时有效.⽽indent最多只是两个⽅向有效(具体哪两个⽅向有效取决于alignment).
openExternalLinks	是否允许打开⼀个外部的链接.
buddy	给QLabel关联⼀个"伙伴",这样点击QLabel时就能激活对应的伙伴.

1.1 文本、图片显示

纯文本、富文本、markdown文本显示：

在这里插入图片描述

图片显示：

收先第一步还是引入qrc文件

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //获取窗口尺寸
    QRect windowRect = this->geometry();
    ui->label->setGeometry(0,0,windowRect.width(),windowRect.height());
    //设置图标
    QPixmap pixmap(":/kun.png");
    ui->label->setPixmap(pixmap);
    //自动拉伸
    ui->label->setScaledContents(true);

}

Widget::~Widget()
{
    delete ui;
}

//不断获取窗口信息
void Widget::resizeEvent(QResizeEvent *event)
{
    qDebug() << event->size();
    ui->label->setGeometry(0,0,event->size().width(),event->size().height());
}

*对于resizeEvent(QResizeEvent event)：

此处的resizeEvent 函数我们没有⼿动调⽤,但是能在窗⼝⼤⼩变化时被⾃动调⽤.

这个过程就是依赖C++中的多态来实现的.Qt框架内部管理着QWidget对象表⽰窗⼝.在窗⼝⼤⼩发⽣改变时,Qt就会⾃动调⽤resizeEvent函数.

但是由于实际上这个表⽰窗⼝的并⾮是QWidget,⽽是QWidget的⼦类,也就是我们⾃⼰写的Widget.此时虽然是通过⽗类调⽤函数,但是实际上执⾏的是⼦类的函数(也就是我们重写后的resizeEvent).

此处属于是多态机制的⼀种经典⽤法.通过上述过程,就可以把⾃定义的代码,插⼊到框架内部执⾏.相当于"注册回调函数".

在这里插入图片描述

1.2 Label格式

  ui->setupUi(this);
    //设置对其格式
    ui->label->setText("对其格式教学！");
    ui->label->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);//水平对齐和数值对其，当然还要其他各种对齐方式
    //设置自动换行
    ui->label_2->setText("这是自动换行教学！！这是自动换行教学！！这是自动换行教学！！奥奥这是自动换行教学！！");
    ui->label_2->setWordWrap(true);
    //设置缩进
    ui->label_3->setText("这是缩进教学");
    ui->label_3->setIndent(50);//缩进50像素(并不是首行缩进，换行了后续的行也会缩进)
    //设置边距
    ui->label_4->setText("这是设置边距的教学");
    ui->label_4->setMargin(10);//四个方向都有的边距（上下左右）

在这里插入图片描述

1.3 设置伙伴(绑定伙伴关系)

QT中把label中的⽂本设置为"快捷键&A"这样的形式.
其中&后⾯跟着的字符,就是快捷键.
可以通过alt+A的⽅式来触发该快捷键.
绑定伙伴关系之后，就可以通过快捷键来选择！！
在这里插入图片描述

2.LCDNumber

QLCDNumer 是⼀个专⻔⽤来显⽰数字的控件.类似于"⽼式计算器"的效果.

属性	说明
intValue	QLCDNumber显⽰的数字值(int).
value	QLCDNumber显⽰的数字值(double).和intValue是联动的.例如给value设为1.5,intValue的值就是2.另外,设置value和intValue的⽅法名字为display,⽽不是setValue或者setIntValue
digitCount	显⽰⼏位数字.
mode	数字显⽰形式(二进制、十六进制、八进制等等)
segmentStyle	设置显⽰⻛格（平面风格、轮廓风格、填充显示风格等等）.
smallDecimalPoint	设置⽐较⼩的⼩数点.

2.1 使用槽函数连接的方法实现倒计时

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //设置初始值
    ui->lcdNumber->display(50);
    //创建一个QTimer实例
    timer = new QTimer(this);
    //把QTimer的timeout信号和槽函数进行连接
    connect(timer,&QTimer::timeout,this,&Widget::handle);
    //启动定时器，参数是触发周期，单位是ms
    timer->start(1000);

}

Widget::~Widget()
{
    delete ui;
}

void Widget::handle()
{
    //拿到LCDNumber的数字
    int value = ui->lcdNumber->intValue();
    if(value <= 0)
    {
        //数字到0停止
        timer->stop();
        return;
    }
    ui->lcdNumber->display(value-1);
}

QTimer 表⽰定时器.通过start⽅法启动定时器之后,就会每隔⼀定周期,触发⼀次QTimer::timeout 信号.
使⽤connect 把QTimer::timeout 信号和次触发Widget::updateTime连接起来,意味着每QTimer::timeout 都会执⾏Widget::updateTime

2.2 ※※重要使用线程的方法实现倒计时(不可行)

在这里插入图片描述

3.ProgressBar

使⽤QProgressBar 表⽰⼀个进度条.

属性	说明
minimum	进度条最⼩值
maximum	进度条最⼤值
value	进度条当前值
alignment	⽂本在进度条中的对⻬⽅式(左对齐，右对齐，居中对齐，两端对齐等)
textVisible	进度条的数字是否可⻅…
orientation	进度条的⽅向是⽔平还是垂直.
invertAppearance	是否是朝反⽅向增⻓进度.
textDirection	⽂本的朝向.
format	展⽰的数字格式(%p百分比，%v数值，%m剩余时间，%t总时间).

书写进度条

每过100ms，进度条数值+1.
在这里插入图片描述

4.Calendar Widget

QCalendarWidget 表⽰⼀个"⽇历"

属性	说明
selectDate	当前选中的⽇期
minimumDate	最⼩⽇期
maximumDate	最⼤⽇期
firstDayOfWeek	每周的第⼀天(也就是⽇历的第⼀列)是周⼏.
gridVisible	是否显⽰表格的边框
selectionMode	是否允许选择⽇期
navigationBarVisible	⽇历上⽅标题是否显⽰
horizontalHeaderFormat	⽇历上⽅标题显⽰的⽇期格式
verticalHeaderFormat	⽇历第⼀列显⽰的内容格式
dateEditEnabled	是否允许⽇期被编辑

信号	说明
selectionChanged(constQDate&)	当选中的⽇期发⽣改变时发出
activated(const QDate&)	当双击⼀个有效的⽇期或者按下回⻋键时发出，形参是⼀个QDate类型，保存了选中的⽇期
currentPageChanged(int, int)	当年份⽉份改变时发出，形参表⽰改变后的新年份和⽉份