目录

一,什么是按钮,他有什么作用

二,Qt中的普通按钮-QPushButton

三,如何在Qt界面上创建出按钮

1,使用ui界面进行拖拽

2,用代码创建按钮

四,按钮美化。

1,使用ui界面来进行按钮美化

2,使用代码对按钮进行美化


一,什么是按钮,他有什么作用

       按钮通俗的说就是,可以给用户功能提示,并且能够点击它,点击它后会帮助我们做一些事情。

比如:我们QQ的登录界面,有一个大大的蓝色的登录按钮,通过该按钮上的文字,我们知道点击它实现的功能就是登录。 当我们点击后,就会弹出聊天界面了

比如,微信的登录按钮

二,Qt中的普通按钮-QPushButton

QPushButton 类间接继承自 QWidget 类,它的继承关系如下:

QPushButton 继承于 QAbstractButton 继承于 QWidget

三,如何在Qt界面上创建出按钮

在Qt界面上创建出按钮有两种方式,一是ui界面中直接拖拽,二是用代码创建。

1,使用ui界面进行拖拽

       这里默认大家已经创建号一个Qt项目了(如果不会创建项目,可以看看我前面的文章,哪里有完整的Qt项目创建教程)

(1)双击项目的 .ui文件,双击后会出现ui设计器界面

出现设计器界面

(2)找到Push Button,将其拖拽到ui界面上

自此,我们便已经创建了一个按钮了

运行一下,结果:

2,用代码创建按钮

    //创建按钮(this的意思为将按钮的父对象设置为当前窗口,这样设置的好处是,当我们关闭窗口时,会自动释放该按钮的控件,避免内存泄漏)

    QPushButton * btn_1 = new QPushButton(this);

    //设置按钮宽高
    btn_1->resize(400,30);

    //设置按钮位置
    btn_1->move(100,100);

    //设置按钮文本
    btn_1->setText("代码创建的按钮");

解释: 

设置按钮的宽高,是按钮本身,我们设置了后,按钮的宽就为400,高就为30

设置按钮位置,其标准为当前窗口,位置为x=100,y=100处。

设置按钮文本,就是改变按钮上的字。

可以发现,我们用代码创建按钮比较麻烦,而使用UI界面设计的时,所见即所得,按钮大小,按钮位置直接拖放就行了。

四,按钮美化。

       我们创建了按钮,但是发现,这个按钮于QQ,微信的登录按钮,差距很大,它们有颜色,有变化,还有圆角。而我们的按钮很原始。所以下面是按钮的简单美化。

       按钮美化一般可以使用Qt的QSS样式来美化,QSS样式会在后面的文章中讲到,此处大家只要会用一点简单的就行。

我们仍然是以,UI设计界面,和纯代码两方面来实现。

1,使用ui界面来进行按钮美化

右键点击按钮,选择“改变样式表”,点击添加颜色,选择background-color,也就是背景颜色。

运行效果:

我们发现,QQ的登录按钮还有圆角,所以,这里设置圆角。

border-radius: 10px;

border-radius: 10px; 意思是设置按钮每条边的顶角一个弯曲半径,这个半径不能大于按钮最小的边长的一般。比如我的按钮高30,那么我的圆角半径最多就 15。

运行效果:圆角出现了

2,使用代码对按钮进行美化

// 设置按钮的样式
   btn_1->setStyleSheet("QPushButton {"
                             "background-color: rgb(193, 255, 253);"
                             "border-radius: 15px;"
                        "}");

运行效果:

后续添加,请稍等待,,,,,,,,,,,

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐