作者前言
🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂
🎂 作者介绍: 🎂🎂
🎂 🎉🎉🎉🎉🎉🎉🎉 🎂
🎂作者id:老秦包你会, 🎂
简单介绍:🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂🎂
喜欢学习C语言、C++和python等编程语言,是一位爱分享的博主,有兴趣的小可爱可以来互讨 🎂🎂🎂🎂🎂🎂🎂🎂
🎂个人主页::小小页面🎂
🎂gitee页面:秦大大🎂
🎂🎂🎂🎂🎂🎂🎂🎂
🎂 一个爱分享的小博主 欢迎小可爱们前来借鉴🎂
QT控件
- **作者前言**
- 控件属性
- enabled属性
- geomerty属性
- 表白小页面
- widget的 window frame的认识
- windowTitle属性
- windowlcon
- qrc文件(资源的存放)
- WindowOpacity
- cursor
- font
- toolTip
- focusPolicy
- stylesheet(QSS)
- 通过qt Designal设计
- 总结
控件属性
前面我们知道,在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还有很多其他的方法,这里只是列举一些常用的,