Qt入门3——常用控件1

原创 已于 2024-12-06 14:53:31 修改
· 855 阅读 · 28 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#qt #开发语言 #c++

于 2024-11-25 17:38:17 首次发布

目录

1.QWidget的核心属性

1.1enabled(可用状态)

1.2 geometry (位置&尺寸)

1.3 windowTitle (窗口标题)

1.4 windowIcon (窗口logo)

1 绝对路径 

2 使用qrc文件管理资源

1.5 windowOpacity (透明效果)

1.6 cursor  (光标样式)

1使用Qt内置光标样式

 2 使用自定义图片设置光标

1.7 font (字体属性)

1.8 toolTip (提示信息)

1.9 focusPolicy (焦点)

1.10 styleSheet (样式)

2. 按钮类控件

2.1 Push Button (按钮)

2.2 Radio Button (单选按钮)

 2.3 Check Box (多选按钮)

1.QWidget的核心属性

1.1enabled(可用状态)

enabled描述了一个控件是否处于“可用”状态

API说明
isEnabled()获取到控件的可用状态
setEnabled设置控件是否可用，true表示可用，false表示禁用。

使用示例1：

#include <QPushButton>

QPushButton* btn = new QPushButton(this);
btn->setText("单击关闭");

//使用setEnabled将按钮设置为禁用状态
btn->setEnabled(false);

connect(btn,&QPushButton::clicked,this,&QWidget::close);

效果如图：发现按钮无法点击

使用示例2：

1.首先双击widget.ui添加两个按钮：

2.再转到槽函数分别设计对应按钮的代码： 

#include <QDebug>

void Widget::on_pushButton_clicked()
{
    qDebug() << "点击了按钮1";
}

void Widget::on_pushButton_2_clicked()
{
    //切换按钮1的禁用状态
    //1.先获取到按钮1当前的可用状态
    bool enable = ui->pushButton->isEnabled();

    //2.再切换按钮1的禁用状态
    if(enable)
    {
        ui->pushButton->setEnabled(false);
    }
    else
    {
        ui->pushButton->setEnabled(true);
    }
}

效果如图：首先按钮1可用，单击发现可执行：

单击“切换按钮1的可用状态”，发现按钮1被禁用：

1.2 geometry (位置&尺寸)

geometry用来修改控件的位置和尺寸

API说明
geometry()

获取到控件的位置和尺寸.返回结果是⼀个QRect(矩形),包含了x,y,width,height.

其中x,y是左上⻆的坐标.

setGeometry(QRect)

setGeometry(int x, int y,

int width, int height)

设置控件的位置和尺寸.可以直接设置⼀个QRect,也可以分四个属性单独设置.

示例1 setGeometry(QRect)：

1.首先双击widget.ui添加五个按钮：

2.再转到槽函数分别设计对应按钮的代码（我们期望通过up、down、left、right按钮修改target按钮，这里只演示up按钮的代码，其他三个按钮的代码与此相同）：

#include <QDebug>

void Widget::on_pushButton_up_clicked()
{
    //1.获取到target本身的geometry.
    QRect rect = ui->pushButton_target->geometry();
    //输出target按钮的属性
    qDebug() << rect;

    //2.修改target的y坐标
    rect.setY(rect.y() - 5);

    //3.将修改后的target坐标设置到控件中
    ui->pushButton_target->setGeometry(rect);
}

效果如图： 

四个按钮完整代码：

void Widget::on_pushButton_up_clicked()
{
    //1.获取到target本身的geometry.
    QRect rect = ui->pushButton_target->geometry();
    //输出target按钮的属性
    qDebug() << rect;

    //2.修改target的y坐标
    rect.setY(rect.y() - 5);

    //3.将修改后的target坐标设置到控件中
    ui->pushButton_target->setGeometry(rect);
}

void Widget::on_pushButton_down_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    qDebug() << rect;

    rect.setY(rect.y() + 5);

    ui->pushButton_target->setGeometry(rect);
}

void Widget::on_pushButton_left_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    qDebug() << rect;

    rect.setX(rect.x() - 5);

    ui->pushButton_target->setGeometry(rect);
}

void Widget::on_pushButton_right_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    qDebug() << rect;

    rect.setX(rect.x() + 5);

    ui->pushButton_target->setGeometry(rect);
}

示例2 setGeometry(int x, int y, int width, int height)：上述代码只改变了target按钮的长、宽，并没有实现target按钮平移的效果，如下代码实现平移：

步骤与示例1相同，只需修改槽函数代码（同样以up为例）：

void Widget::on_pushButton_up_clicked()
{
    //1.获取到target本身的geometry.
    QRect rect = ui->pushButton_target->geometry();
    //输出target按钮的属性
    qDebug() << rect;

//    //2.修改target的y坐标
//    rect.setY(rect.y() - 5);

//    //3.将修改后的target坐标设置到控件中
//    ui->pushButton_target->setGeometry(rect);
    ui->pushButton_target->setGeometry(rect.x(),rect.y() - 5,rect.width(),rect.height());
}

效果如图：

 四个按钮完整代码：

void Widget::on_pushButton_up_clicked()
{
    //1.获取到target本身的geometry.
    QRect rect = ui->pushButton_target->geometry();
    //输出target按钮的属性
    qDebug() << rect;

    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();
    qDebug() << rect;

    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();
    qDebug() << rect;

    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();
    qDebug() << rect;

    ui->pushButton_target->setGeometry(rect.x() + 5,rect.y(),rect.width(),rect.height());
}

结合以示例1与示例2，写一个给女神表白的程序：

示例3：

1.首先双击widget.ui添加一个标签两个按钮：

2.再转到槽函数分别设计对应按钮的代码：  

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

    //设置随机数种子，使用时间戳作为随机数种子
    srand(time(0));
}


void Widget::on_pushButton_accept_clicked()
{
    ui->label->setText("真开心！以后我会好好宠你的！");
}

void Widget::on_pushButton_refuse_clicked()
{
    //如果女神点击了“不行”的按钮就把这个按钮移走
    //我们通过使用随机数的方式，重新确定按钮的位置

    //获取当前程序窗口的尺寸
    int width = this->geometry().width();
    int height = this->geometry().height();

    //重新生成按钮的位置
    int x = rand() % width;
    int y = rand() % height;

    //移动按钮的位置
    ui->pushButton_refuse->move(x,y);
}

效果如图：

1.3 windowTitle (窗口标题)

 windowTitle用来设置控件的窗口标题

API说明
windowTitle()获取到控件的窗口标题
setWindowTitle(const QString& title)设置控件的窗口标题

示例：

1.4 windowIcon (窗口logo)

windowIcon表示窗口的图标

API说明
windowIcon()获取到控件的窗口图标. 返回QIcon对象
setWindowIcon(const QIcon&icon)设置控件的窗口图标.

1 绝对路径 

示例：

2 使用qrc文件管理资源

4.1通过绝对路径的方式引入图片是不科学的，如果图片的位置发生变化，而代码并没有变化，此时当然是不合适的。

为了解决这个问题，可以使用qrc机制：给Qt项目引入一个额外的xml文件（后缀名使用.qrc表示）在这个xml中把要使用的图片资源给导入进来，并且在xml中进行记录。

Qt在编译项目的时候，就会根据qrc中描述的图片信息，找到图片内容，并且提取出图片的二进制数据，把这些二进制数据转换成C++代码，最终编译到exe里。

qrc使用的方式：

 1.在项目中创建一个qrc文件（注意文件名不可带中文名和特殊符号），步骤如下：

 2.把图片导入到qrc文件中

① 先创建一个“前缀”(Prefix) （所谓的前缀可以理解为虚拟的目录，这个目录在电脑上是不存在的，是Qt自己抽象出来的。）

② 把4.1中的candle.png 这个图片导入到qrc资源中

③ 导入成功

3. 返回widget.cpp中修改代码：

1.5 windowOpacity (透明效果)

windowOpacity用于设置控件的不透明效果

API说明
windowOpacity()获取到控件的不透明数值.返回float,取值为0.0-1.0其中0.0表示全透明,1.0表示完全不透明.

setWindowOpacity(

float n)

设置控件的不透明数值

示例：

1.首先双击widget.ui添加两个按钮：

2.转到槽函数设置相应代码（点击+窗口透明度增加，点击-窗口透明度减少）

void Widget::on_pushButton_add_clicked()
{
    //获取当前的不透明值
    float opacity = this->windowOpacity();
    if(opacity >= 1.0)
    {
        return;
    }
    qDebug() << opacity;
    opacity += 0.1;
    this->setWindowOpacity(opacity);
}

void Widget::on_pushButton_sub_clicked()
{
    float opacity = this->windowOpacity();
    if(opacity <= 0.0)
    {
        return;
    }
    qDebug() << opacity;
    opacity -= 0.1;
    this->setWindowOpacity(opacity);
}

效果如图：

1.6 cursor  (光标样式)

cursor表示修改鼠标光标样式

API说明
cursor()获取到当前widget的cursor属性,返回QCursor对象. 当鼠标悬停在该widget上时,就会显示出对应的形状.
setCursor(const QCursor& cursor)设置该widget光标的形状.仅在⿏标停留在该widget上时⽣效.
QGuiApplication::setOverrideCursor(const QCursor& cursor)设置全局光标的形状.对整个程序中的所有widget都会生效.覆盖上面的setCursor设置的内容.

1使用Qt内置光标样式

示例1：

直接在widget.ui修改：

 效果如图：

示例2：在构造函数中用代码设置：

 

 Ctrl+鼠标左键，这些都是我们可以使用的Qt内置的光标样式：

 2 使用自定义图片设置光标

1.首先用4.2的方法将图片添加到qrc文件

2.回到构造函数编写代码：

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

    //QPixmap对象表示图片
    //1.访问到图片文件
    QPixmap pixmap(":/candle.png");
      //将图片缩放
    pixmap = pixmap.scaled(50,50);

    //2.构造光标对象
    //QCursor cursor(pixmap);
    QCursor cursor(pixmap,10,10);
    //(pixmap)默认情况下鼠标点击时，相当于在图片的左上角点击
    //(pixmap,10,10)以图片左上角为(0,0)原点，找到(10,10)这个位置作为鼠标真正的点击位置

    //3.把光标设置进去
    this->setCursor(cursor);
}

效果如图：

1.7 font (字体属性)

font是关于设置控件字体的一系列属性

API说明
font()获取当前widget的字体信息，返回QFont对象
setFont(const QFont& font)设置当前widget的字体信息.

关于QFont的一些属性：

属性说明
family字体家族.比如"楷体","宋体","微软雅⿊"等.
pointSize字体⼤⼩
weight字体粗细.以数值⽅式表示粗细程度取值范围为[0,99],数值越⼤,越 粗.
bold是否加粗.设置为true,相当于weight为75.设置为false相当于 weight 为50.
italic是否倾斜
underline是否带有下划线
strikeOut是否带有删除线

示例1：图形化示例：

1.在界面上创建一个label

2. 设置font属性

效果如图：

示例2：代码设置：

#include <QLabel>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    QLabel* label = new QLabel(this);
    label->setText("这是一段文本！");
    
    //创建字体
    QFont font;
    font.setFamily("微软雅黑");
    font.setPixelSize(30);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStrikeOut(true);
    
    //把font对象设置到label中
    label->setFont(font);
}

 效果如图：

1.8 toolTip (提示信息)

toolTip可以实现当鼠标光标悬停在某个控件上时，弹出提示信息

API说明
setToolTip设置toolTip. 鼠标悬停在该widget上时会有提示说明.
setToolTipDuring设置toolTip提示的时间.单位ms.时间到后toolTip⾃动消失.

示例：

1.首先在图形化界面创建两个按钮

2.通过代码设置两个按钮的toolTip

//设置这两个按钮的toolTip
    ui->pushButton_yes->setToolTip("这是一个确定按钮");
    ui->pushButton_yes->setToolTipDuration(3000);//设置toolTip显示的时间，单位为毫秒

    ui->pushButton_no->setToolTip("这是一个取消按钮");
    ui->pushButton_no->setToolTipDuration(5000);

效果如图：

1.9 focusPolicy (焦点)

focusPolicy可以设置控件获取到焦点的策略.

所谓"焦点",指的就是能选中这个元素。一般来说，一个控件获取到焦点主要是两种方式：

①鼠标点击；②键盘的Tab键

API说明
focusPolicy()获取该widget的focusPolicy,返回Qt::FocusPolicy
setFocusPolicy(Qt::FocusPolicy policy)设置widget的focusPolicy

Qt::FocusPolicy是一个枚举类型，取值如下：

① Qt::NoFocus ：控件不会接收键盘焦点（例如label）；

② Qt::TabFocus ：控件可以通过Tab键接收焦点；

③ Qt::ClickFocus ：控件在鼠标点击时接收焦点；

④ Qt::StrongFocus ：控件可以通过Tab键和鼠标点击接收焦点(默认值)；

⑤ Qt::WheelFocus :类似于 Qt::StrongFocus ,同时控件也通过鼠标滚轮获取到焦点(新增 的选项,⼀般很少使⽤).

示例：

1.首先在图形化界面创建四个输入框：

运行发现：tab键和鼠标左键单击都可以切换焦点：

2.将第二个输入框设置为NoFocus：

运行发现第二个输入框无法选中：

1.10 styleSheet (样式)

styleSheet通过css设置widget的样式

示例1：

1.在图形化界面创建label

2.在此label上右键单击或在右侧设置styleSheet：

3.添加内容：

效果如图：

示例2：设置一个白天与黑夜切换模式

1.首先在图形化界面创建一个Text Edit和两个按钮：

2.代码设置槽函数：

void Widget::on_pushButton_light_clicked()
{
    //设置窗口的样式
    this->setStyleSheet("background-color:rgb(240,240,240);");
    //设置输入框样式
    ui->plainTextEdit->setStyleSheet("background-color: white;color: black;");
    //设置按钮的样式
    ui->pushButton_light->setStyleSheet("color: black;");
    ui->pushButton_night->setStyleSheet("color: black;");
}

void Widget::on_pushButton_night_clicked()
{
    //设置窗口的样式
    this->setStyleSheet("background-color:black;");
    //设置输入框样式
    ui->plainTextEdit->setStyleSheet("background-color: black;color: white;");
    //设置按钮的样式
    ui->pushButton_light->setStyleSheet("color: white;");
    ui->pushButton_night->setStyleSheet("color: white;");
}

效果如图：

2. 按钮类控件

2.1 Push Button (按钮)

使用 QPushButton表示⼀个按钮.

示例1：将按钮带上图标：

1.首先按照1.4(2)的方法添加图片；

2.使用图形化界面添加按钮（不再赘述）；

3.添加代码：

    //创建图标对象
    QIcon icon(":/candle.png");

    //设置图标
    ui->pushButton->setIcon(icon);
    //设置图标尺寸
    ui->pushButton->setIconSize(QSize(50,50));

效果如图：

示例2：给按钮添加快捷键

1.首先按照1.4(2)的方法添加图片；

2.使用图形化界面添加五个按钮，如图所示：

3.为各个按钮添加代码：

    //设置按钮的图标
    ui->pushButton_target->setIcon(QIcon(":/candle.png"));
    ui->pushButton_target->setIconSize(QSize(100,100));

    ui->pushButton_up->setIcon(QIcon(":/up.png"));
    ui->pushButton_up->setIconSize(QSize(50,50));

    ui->pushButton_down->setIcon(QIcon(":/down.png"));
    ui->pushButton_down->setIconSize(QSize(50,50));

    ui->pushButton_left->setIcon(QIcon(":/left.png"));
    ui->pushButton_left->setIconSize(QSize(60,60));

    ui->pushButton_right->setIcon(QIcon(":/right.png"));
    ui->pushButton_right->setIconSize(QSize(60,60));

4.为按钮添加槽函数（与1.2中类似）

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()
{
    //获取到 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());
}

5. 设置快捷键（关键）

同样需在构造函数设置代码：

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

6. 设置连点代码：

 //开启鼠标点击的连发功能（键盘的连发默认是支持的）
    ui->pushButton_up->setAutoRepeat(true);
    ui->pushButton_down->setAutoRepeat(true);
    ui->pushButton_left->setAutoRepeat(true);
    ui->pushButton_right->setAutoRepeat(true);

效果如图：

2.2 Radio Button (单选按钮)

QRadioButton 是单选按钮,可以让我们在多个选项中选择⼀个。

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

示例1：

1.在图形化界面添加一个label和三个radioButton：

2.转到槽函数设置相应代码：

void Widget::on_radioButton_man_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.构造函数设置相应代码，实现默认为男，且“其他”选项不能被选择


    //添加一个默认选项
    ui->radioButton_man->setChecked(true);
    ui->label->setText("您选择的性别是：男");

    //禁用“其他”选项
    //checkable只是能够让按钮不被选中，仍然是可以响应点击事件的
    //ui->radioButton_other->setCheckable(false);
    //正确使用：
    ui->radioButton_other->setEnabled(false);
    //ui->radioButton_other->setDisabled(true);

效果如图：

示例2：实现一个点餐界面

1.图形化界面用label和Radio Button实现以下效果：

2.Radio Button默认是排他的，众多选项中只能选中一个，显然不适合我们的上述情况。

这时可以使用QButtonGroup类，对按钮进行分组。

在构造函数实现以下代码：

//使用 QButtonGroup 对单选按钮进行分组（要包含头文件<QButtonGroup>）
    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);

效果如图：

 2.3 Check Box (多选按钮)

小孩子才做选择，我全都要，那么复选按钮如何实现呢？

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

和 QCheckBox 最相关的属性与Radio Button相似，也是checkable和checked。

示例：

1.创建一个label、一个PushButton和三个CheckBox：

2. PushButton转到槽函数：

void Widget::on_pushButton_clicked()
{
    QString result = "今天你的计划是：";
    if(ui->checkBox_study->isChecked())
    {
        result += ui->checkBox_study->text() + " ";
    }
    if(ui->checkBox_run->isChecked())
    {
        result += ui->checkBox_run->text() + " ";
    }
    if(ui->checkBox_watchTV->isChecked())
    {
        result += ui->checkBox_watchTV->text() + " ";
    }
    ui->label->setText(result);
}

效果如图：

(未完待续)

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值