Qt第三课 ----------widget的控件属性及stylesheet样式(css样式)的简单介绍

作者前言

🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂
​🎂 作者介绍: 🎂🎂
🎂 🎉🎉🎉🎉🎉🎉🎉 🎂
🎂作者id:老秦包你会, 🎂
简单介绍:🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂
喜欢学习C语言、C++和python等编程语言,是一位爱分享的博主,有兴趣的小可爱可以来互讨 🎂🎂🎂🎂🎂🎂🎂🎂
🎂个人主页::小小页面🎂
🎂gitee页面:秦大大🎂
🎂🎂🎂🎂🎂🎂🎂🎂
🎂 一个爱分享的小博主 欢迎小可爱们前来借鉴🎂


控件属性

前面我们知道,在Qt中,创建一些 控件的时候,可以使用代码创建。也可以通过Qt Designal来创建,当我们使用Qt Designa来创建控件的时候就会发现右下角的文档
+
同样,widget窗口,也有这样的属性,每个控件都有很多的属性,如果要全部介绍完,是不可能的,只能介绍一些常用的,后面需用到的就要我们自己查阅文档了

enabled属性

设置该控件是否可用, true,不禁用, false 禁用

isEnabled() : 获取当前控件的状态
setEnabled():设计控件是否可用 ,true,不禁用, false 禁用
代码如下:

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    btn = new QPushButton(this);
    btn->setText("按钮");
    btn->move(200,300);
    QPushButton* notbutton = new QPushButton("禁用按钮",this);
    connect(btn, &QPushButton::clicked, this, []()
    {
        qDebug() << "点击成功";

    });
    connect(notbutton,  &QPushButton::clicked, this, [this, notbutton]()
    {

        if(btn->isEnabled() == false)
        {
            btn->setEnabled(true);
            notbutton->setText("禁用按钮");
            qDebug() << "启用成功";
        }
        else
        {
            btn->setEnabled(false);
            notbutton->setText("启用按钮");
            qDebug() << "禁用成功";
        }
    });


}

在这里插入图片描述

geomerty属性

会返回控件的位置和尺寸,也就是返回一个QRect(内置类), 包含有是x,y width,height
需要注意到是:在Qt中对一些几何进行了封装,


geometry():获取到控件的位置和尺⼨.返回结果是⼀个QRect,包含了x,y,width,height.其中x,y是左上⻆的坐标

setGeometry(QRect):设置控件的位置和尺⼨.
setGeometry(int x, int y,int width, int height):分四个属性单独设置.

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    btn = new QPushButton(this);
    btn->setText("按钮");

    QPushButton* button_top = new QPushButton("top", this);
    QPushButton* button_left = new QPushButton("left", this);
    QPushButton* button_rigth = new QPushButton("rigth", this);
    QPushButton* button_down = new QPushButton("down", this);
    btn->move(200,300);
    //设置一下上下左右按钮的位置
    button_top->move(1000,500);
    button_down->move(1000,700);
    button_left->move(800,600);
    button_rigth->move(1200,600);
    connect(button_top,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        rect.setY(rect.y()-10);
        btn->setGeometry(rect);
        qDebug()<< "top sub 10";

    });
    connect(button_down,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        rect.setY(rect.y()+10);
        btn->setGeometry(rect);
        qDebug()<< "down add 10";

    });
    connect(button_left,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        rect.setX(rect.x()-10);
        btn->setGeometry(rect);
        qDebug()<< "left sub 10";

    });
    connect(button_rigth,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        rect.setX(rect.x()+10);
        btn->setGeometry(rect);
        qDebug()<< "rigth add 10";

    });
}

在这里插入图片描述

当我们进行移动的时候,就会发现我们只是控制了按钮的左上角,而高度和宽度也会改变,
如果我们想要平移的方式进行,不仅仅需要修改x和y,还要修改高度和宽度, 这就需要使用setGeometry(int x, int y,int width, int height)这个函数
代码如下:

 connect(button_top,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        btn->setGeometry(rect.x(), rect.y()-10, rect.width(),rect.height());
        qDebug()<< "top sub 10";

    });
    connect(button_down,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        btn->setGeometry(rect.x(), rect.y()+10, rect.width(),rect.height());
        qDebug()<< "down add 10";

    });
    connect(button_left,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        btn->setGeometry(rect.x()-10, rect.y(), rect.width(),rect.height());
        qDebug()<< "left sub 10";

    });
    connect(button_rigth,  &QPushButton::clicked, this, [this]()
    {
        QRect rect = btn->geometry();
        btn->setGeometry(rect.x()+10, rect.y(), rect.width(),rect.height());
        qDebug()<< "rigth add 10";

    }

表白小页面

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QLabel* lab = new QLabel(this);
    lab->setText("女神, 女神, 你真美, 快来这里");
    //创建两个按钮, 一个同意,一个拒接
    QPushButton* btn_agret = new QPushButton("同意", this);
    QPushButton* btn_no_agret = new QPushButton("不同意", this);
    // 同意按钮
    btn_agret->move(200,300);
    connect(btn_agret, &QPushButton::clicked, this, [lab]()
    {
        lab->setText("真不错,哈哈哈");
    });
    btn_no_agret->move(400,300);
    //不同意,就点击不了按钮
    //先获取wiget的尺寸
    connect(btn_no_agret, &QPushButton::clicked, this, [this,btn_no_agret]()
    {
        QRect size = this->geometry();
        int widgt = rand() % size.width();
        int height = rand()%size.height();
        btn_no_agret->move(widgt, height);
    });

}

当点击不同意的时候,按钮就会跑,
我们也可以进一步,只要pressed ,按下按钮不松口. 按钮跑掉

   connect(btn_no_agret, &QPushButton::pressed, this, [this,btn_no_agret]()
    {
        QRect size = this->geometry();
        int widgt = rand() % size.width();
        int height = rand()%size.height();
        btn_no_agret->move(widgt, height);
    });

widget的 window frame的认识

前面我们知道了坐标系,给控件设置位置,是以父窗口的左上角为原点,比如, widget就是一个父窗口,
但是在这个父窗口里面, (带有标题栏,最⼩化,最⼤化,关闭按钮),那么在计算尺⼨和坐标的
时候就有两种算法.包含windowframe和不包含windowframe.
在这里插入图片描述
在这里插入图片描述
至于哪些的需要计算frame ,就需要去看文档了,
下面我们来了解一下geometry和framegeometry的差别

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

    QRect rect_one = this->geometry();
    QRect rect_two = this->frameGeometry();
    qDebug()<<rect_one;
    qDebug()<<rect_two;

}

在这里插入图片描述
如果我们直接在构造函数打印出来,就会发现,两个一样,这是因为,在构造⽅法中,Widget刚刚创建出来,还没有加⼊到对象树中.此时也就不具备Window frame.
在按钮的slot函数中,由于⽤⼾点击的时候,对象树已经构造好了,此时Widget已经具备了
Windowframe,因此在位置和尺⼨上均出现了差异

QPushButton* btn = new QPushButton("查看",this);
    connect(btn, &QPushButton::pressed, this,[this](){
        QRect rect_one = this->geometry();
        QRect rect_two = this->frameGeometry();
        qDebug()<<rect_one;
        qDebug()<<rect_two;
    });

在这里插入图片描述
这样就可以看清楚了

windowTitle属性

这个是Qwidget独有的属性, 是widget继承过来的
在这里插入图片描述

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle("大窗口");
    QPushButton* btn = new QPushButton("按钮", this);
    connect(btn, &QPushButton::clicked, this, [=](){
        qDebug()<< "hahahha";
        this->setWindowTitle("窗口");
    });
}

如果对其他控件进行使用,不一定会有效果, 比如QPushButton, 就没有效果

windowlcon

窗口图标
如图:
在这里插入图片描述
这些就是窗口图标
在这里插入图片描述
代码演示
需要注意的是,在Qt中把很多涉及到概念的东西封装成了类,QIcon就是一个例子,
QIcon的使用观看文档就行
QIcon表示一个图标
用法:

ICon img("图片路径");
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setWindowTitle("大窗口");
    QPushButton* btn = new QPushButton("按钮", this);
    connect(btn, &QPushButton::clicked, this, [=](){
        qDebug()<< "hahahha";
        this->setWindowTitle("窗口");
    });
    qDebug() << this->windowIcon();
    this->setWindowIcon(QIcon("C:/Users/ASUS/Desktop/微信图片_20240829092908.jpg"));
}

在这里插入图片描述
可以看到设计成功了,但是代码中的路径是绝对路径,缺点很大,一般采用相对路径,

qrc文件(资源的存放)

对于Qt程序来说,当前⼯作⽬录可能是变化的.⽐如通过QtCreator运⾏的程序,当前⼯作⽬录是项⽬的构建⽬录;直接双击exe运⾏,⼯作⽬录则是exe所在⽬录.

所谓构建⽬录,是和Qt项⽬并列的,专⻔⽤来放⽣成的临时⽂件和最终exe的⽬录
如图:
在这里插入图片描述
如图:
在这里插入图片描述
在这里插入图片描述
可以看到效果,
**注意,**上述构建⽬录,是随时可删除的.⽐如点击菜单栏中的"构建"->“清理项⽬”,就会把这个⽬录中的内容清空掉.
因此如果我们把图⽚⽂件放到构建⽬录中,可能在不⼩⼼删除后就丢失了.我们还是希望能够把图⽚和源代码放到⼀起,并且使我们的程序⽆论拷⻉到任何位置中都能正确使⽤图⽚.
为了预防这样的事情发生,Qt中就引入了一个机制,叫做qrc
介绍:

qrc⽂件是⼀种XML格式的资源配置⽂件,它⽤XML记录硬盘上的⽂件和对应的随意指定的资
源名称. 应⽤程序通过资源名称来访问这些资源.
在Qt开发中,可以通过将资源⽂件添加到项⽬中来⽅便地访问和管理这些资源.这些资源⽂件
可以位于qrc⽂件所在⽬录的同级或其⼦⽬录下.
在构建程序的过程中,Qt会把资源⽂件的⼆进制数据转成cpp代码,编译到exe中.从⽽使依
赖的资源变得"路径⽆关".
这种资源管理机制并⾮Qt独有,很多开发框架都有类似的机制.例如Android的Resources
和AssetManager也是类似的效果.
后缀名.qrc

下面,我们创建一个qrc文件,
在这里插入图片描述
注意:不要命名有中文
在这里插入图片描述
然后我们打开qrc编辑器添加前缀,
在这里插入图片描述
这里的前缀本质就是一个虚拟的目录,我们只需要把资源放入到这个虚拟目录下就行,接下来
我们会看到如下界面:
在这里插入图片描述
点击之后, 我们可以进行把前缀更改,也可以不更改,看我们自己
在这里插入图片描述

这里,我把前缀直接写成当前目录, 然后我们点击add File,就会弹出如下界面,
在这里插入图片描述
需要注意的是, 我们添加的资源必须是在上图目录中这些资源⽂件可以位于qrc⽂件所在⽬录的同级或**其⼦⽬录下.**不能去到其他文件中添加资源,所以说.我们必须把要放入到虚拟目录的资源拷贝到qrc同级目录下,或者其子目录下才行
如图:
在这里插入图片描述
当我们拷贝到其目录中,然后再添加到虚拟目录中就可以了
如图:
在这里插入图片描述

这就是我们添加进去的资源了
接下来,我们来讲一讲怎么访问到虚拟目录中的资源文件

:/img.jpg

写法就是":"开头,加上虚拟目录的绝对路径就行

然后我们去看看当前的工作目录的对应的cpp文件
在这里插入图片描述
多出来了一个cpp文件,这个文件就是通过Qt编译过程生成的
如图:
在这里插入图片描述
当exe运行的时候,这些数据就会加载到内存中了,缺点也明显,资源越大就加载越久

WindowOpacity

设计透明度
在这里插入图片描述

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* opacity = new QPushButton("Opacity", this);
    opacity->move(100,200);
    QPushButton* transparent = new QPushButton("Transparent", this);
    transparent->setGeometry(opacity->geometry().x()+200, opacity->geometry().y(), opacity->geometry().width(), opacity->geometry().height());
    this->setWindowOpacity(0.1);
    //增加透明度
    connect(opacity, &QPushButton::clicked, this, [=]()
    {
        if(opacitynum < 1)
            opacitynum+=0.1;
        this->setWindowOpacity(this->opacitynum);
        qDebug()<< this->windowOpacity();
    });
    //减少透明度
    connect(transparent, &QPushButton::clicked, this, [=]()
    {
        if(opacitynum > 0)
            opacitynum-=0.1;
        this->setWindowOpacity(this->opacitynum);
        qDebug()<< this->windowOpacity();
    });
}

如图:
在这里插入图片描述
需要注意的一点就是, 再float类型中,由于采用的科学计数法, 在内存中 是符号位+指数+有效数字
如果想要增加0.1,计算机是无法完成的,只能增加接近的数值进去,

cursor

cursor():获取到当前widget的cursor属性,返回QCursor对象.当⿏标悬停在该widget上时,就会显⽰出对应的形状.
setCursor(const QCursor& cursor):设置该widget光标的形状.仅在⿏标停留在该widget上时⽣效
QGuiApplication::setOverrideCursor(const QCursor&cursor):设置全局光标的形状.对整个程序中的所有widget都会⽣效.覆盖上⾯的setCursor设置的内容
在ui文件中设计,可以看到widget的光标类型
在这里插入图片描述
这样设计是很快的,如果使用纯代码方式进行的话

QCursor cursor(Qt::WaitCursor);
this->setCursor(cursor);

在qt中还要很多光标,

enum CursorShape {
        ArrowCursor,
        UpArrowCursor,
        CrossCursor,
        WaitCursor,
        IBeamCursor,
        SizeVerCursor,
        SizeHorCursor,
        SizeBDiagCursor,
        SizeFDiagCursor,
        SizeAllCursor,
        BlankCursor,
        SplitVCursor,
        SplitHCursor,
        PointingHandCursor,
        ForbiddenCursor,
        WhatsThisCursor,
        BusyCursor,
        OpenHandCursor,
        ClosedHandCursor,
        DragCopyCursor,
        DragMoveCursor,
        DragLinkCursor,
        LastCursor = DragLinkCursor,
        BitmapCursor = 24,
        CustomCursor = 25
    };

其中任意一个都是一种光标,这些都是Qt内置的,我们还可以自定义光标
Qt允许我们通过图片来设计光标
注意:图片要放到qrc文件中去,这里引入一个类 QPixmap

    QPixmap pixmap(":/cat.png");
    QCursor cursor(pixmap);
    this->setCursor(cursor);

这样设计的话,当我们点击一下控件的时候,点击的部位是该图片的左上角, 如果我们要设计一下点击的位置是图片的其他位置就需要如下:

QCursor cursor(pixmap,10,10);

如图:
在这里插入图片描述
如果要对光标的图片来设计大小,就需要使用到QPixmap中的成员函数了,可以去查看文档

font

字体设置
在这里插入图片描述
关于这个QFont对象,还有很多的方法
在这里插入图片描述
这个在Qt Designal也是可以设置的,这里就不过多去介绍, 下面我们写一下纯代码的方式

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //创建QFont对象
    QFont font;
    font.setFamily("宋体");
    font.setPixelSize(30);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStretch(true);
    QLabel *label = new QLabel(this);
    label->setText("我很好,感谢");
    label->setFont(font);
}

toolTip

在这里插入图片描述
这个效果就是在鼠标悬停的文字提示
如图:
在这里插入图片描述
在这里插入图片描述

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //创建QFont对象
    QFont font;
    font.setFamily("宋体");
    font.setPixelSize(30);
    font.setBold(true);
    font.setItalic(true);
    font.setUnderline(true);
    font.setStretch(true);
    QLabel *label = new QLabel(this);
    label->setText("我很好,感谢");
    label->setFont(font);
    label->setToolTip("我是文本");
}

在这里插入图片描述
如果要设置提示的时间就是要使用setToolTipDuring(),单位是毫秒

focusPolicy

设置控件获取到焦点的策略. ⽐如某个控件能否⽤⿏标选中或者能否通过 tab 键选中.
简单说就是, 一个控件被鼠标选中, 这个对于 输⼊框, 单选框, 复选框等控件⾮常有⽤的.
在这里插入图片描述
Qt::FocusPolicy 是⼀个枚举类型. 取值如下
• Qt::NoFocus :控件不会接收键盘焦点
• Qt::TabFocus :控件可以通过Tab键接收焦点
• Qt::ClickFocus :控件在⿏标点击时接收焦点
• Qt::StrongFocus :控件可以通过Tab键和⿏标点击接收焦点 (默认值)
• Qt::WheelFocus : 类似于 Qt::StrongFocus , 同时控件也通过⿏标滚轮获取到焦点 (新增的选项, ⼀般很少使⽤).

一般获取到焦点的主要方式如下:
鼠标点击
tab键

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QLineEdit* LineeditOne = new QLineEdit(this);// 不能获取焦点
    QLineEdit *LineeditTwo= new QLineEdit(this);;// 可以tab键获取
    QLineEdit *Lineedittherr= new QLineEdit(this);; //可以鼠标获取
    QLineEdit *lineeditfour= new QLineEdit(this);;// 可以鼠标和tab
    LineeditOne->setFocusPolicy(Qt::NoFocus);
    LineeditTwo->setFocusPolicy(Qt::TabFocus);
    Lineedittherr->setFocusPolicy(Qt::ClickFocus);
    lineeditfour->setFocusPolicy(Qt::StrongFocus);
    LineeditTwo->move(0,100);
     Lineedittherr->move(0,200);
    lineeditfour->move(0,300);
}

在这里插入图片描述

stylesheet(QSS)

通过 CSS 设置 widget 的样式. CSS (Cascading Style Sheets 层叠样式表) 本⾝属于⽹⻚前端技术. 主要就是⽤来描述界⾯的样式.Qt 虽然是做 GUI 开发, 但实际上和 ⽹⻚前端 有很多异曲同⼯之处. 因此 Qt 也引⼊了对于 CSS的⽀持

通过qt Designal设计

在这里插入图片描述
在控件中右击, 找到如图的,
然后可以使用上面的属性进行修改如图:
在这里插入图片描述
在这里插入图片描述
下面使用代码写一个夜间和白天模式的窗口

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QTextEdit *label = new QTextEdit(this);
    label->setGeometry(0,0,400,400);
//    label->move(200,300);
    //亮度按钮
    QPushButton* pushbutton_ligth = new QPushButton("白天",this);
    pushbutton_ligth->setGeometry(label->geometry().x(),label->geometry().y()+label->height()+20, 100,20);
    //暗度按钮
    QPushButton* pushbutton_dark = new QPushButton("黑夜",this);
    pushbutton_dark->setGeometry(pushbutton_ligth->geometry().x()+120,pushbutton_ligth->geometry().y(), 100,20);
    //信号和槽
    connect(pushbutton_ligth, &QPushButton::clicked, this, [=]()
    {
        this->setStyleSheet("background-color:white;");
        pushbutton_ligth->setStyleSheet("background-color:white; color:black");
        pushbutton_dark->setStyleSheet("background-color:white; color:black");
        label->setStyleSheet("background-color:white; color:black");
    });
    connect(pushbutton_dark, &QPushButton::clicked, this, [=]()
    {
        this->setStyleSheet("background-color:black;");
        pushbutton_ligth->setStyleSheet("background-color:black; color:white");
        pushbutton_dark->setStyleSheet("background-color:black; color:white");
        label->setStyleSheet("background-color:black; color:white");
    });
}

如图:
在这里插入图片描述
这题设置的话还是有一些缺陷的,因为为了更准确需要通过RBG去设置演色

this->setStyleSheet("background-color:rgb(240,240,240);");

这样设置更好一些

总结

这里介绍了Qwidget里面的一些方法,Qwidget还有很多其他的方法,这里只是列举一些常用的,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老秦包你会

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值