小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、给列表框设置样式二、给菜单栏设置样式三、登录界面的实现四、小结总结前言【Qt】界面优化三盒子模型的介绍和使用给按钮复选框单行输入框设置样式——书接上文 详情请点击——本文会在上文的基础上进行讲解所以对上文不了解的读者友友请点击前方的蓝字链接进行学习本文由小编为大家介绍——【Qt】界面优化四给列表框菜单栏设置样式登录界面的实现小结一、给列表框设置样式如下蓝字链接在我们学习了QSS之后此时我们就可以对控件进行各种各样的自定义了接下来我们就对列表框QListWidget的样式进行设置所以接下来我们创建一个项目名为qss_13基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer1【Qt】常用控件十四QListWidget的属性和使用2【Qt】界面优化一QSS的介绍与基本使用样式与代码分离3【Qt】界面优化二类型选择器类选择器ID选择器并集选择器子控件选择器伪类选择器的介绍和使用4 【Qt】界面优化三盒子模型的介绍和使用给按钮复选框单行输入框设置样式那么我们拖拽一下左侧的列表框QListWidget控件双击列表框进入编辑列表窗口部件界面此时我们添加上111, 222, 333这三个元素便于后面我们进行演示现象运行结果如下所以此时我们使用鼠标进入列表框上的元素也就是使用鼠标悬停在列表框的元素上此时会有一个淡蓝色的背景效果同时我们使用鼠标点击选中列表框的元素此时会有一个蓝色的背景效果那么我们是否可以自定义这两种效果呢可以如下QListWidget::item:hover{background-color:rgb(255,232,255);}QListWidget::item:selected{background-color:rgb(255,190,255);}那么我们右击列表框然后选择改变样式表此时就可以在样式表中对样式进行编辑了首先我们使用类型选择器选择列表框QListWidget然后使用子控件选择器::item选择列表框中的元素此时我们设置的样式对于列表框中的所有元素都是生效的也就是列表框中的任何一个元素被鼠标进入/悬停了都要呈现淡紫色接下来使用伪类选择器:hover选择列表框的元素被进入的状态也就是选择鼠标悬停在列表框中的元素上这个状态此时我们将在列表框中被进入/悬停的元素的背景色设置为淡紫色接下来我们使用类型选择器选择列表框QListWidget然后使用子控件选择器::item选择列表框中的元素此时我们设置的样式对于列表框中的所有元素都是生效的接下来使用伪类选择器:selected选择列表框的元素被选择的状态此时我们将在列表框中被选择的元素的背景色设置为比淡紫色深一点的颜色即可运行结果如下所以此时我们使用鼠标进入列表框上的元素也就是使用鼠标悬停在列表框的元素上此时会有一个淡紫色的背景效果同时我们使用鼠标点击选中列表框的元素此时会有一个比淡紫色颜色深一点的颜色的背景效果小编小编其实你说的这些我都懂不就是设置纯色吗也就是选中的区域各个位置的颜色都一样感觉没什么技术含量那么你能不能教教我如何设置渐变色就是从一种颜色渐变到另外一种颜色可以如下那么这里我们就需要用到qlineargradient这个样式属性来设置渐变色了这个渐变的效果是线性渐变也就是每隔几像素颜色就渐变一点直到从这种颜色渐变到另外一种颜色要使用qlineargradient这个样式属性需要填写六个参数什么小编6个参数这么多是的但是都很好理解下面小编来讲解一下qlineargradient的六个参数介绍如下1首先是前两个参数是起点坐标取值非常有限取值要么是0要么是1如上控件左上角的坐标是(0, 0)控件右上角的坐标是(1, 0)控件左下角的坐标是(0, 1)控件右下角的坐标是(1, 1) 关于坐标在第八点Qt坐标系的认识中进行的讲解详情请点击——……1x1起点的横坐标……2y1起点的纵坐标2中间两个参数也是终点坐标取值同样有限取值要么是0要么是1……1x2终点的横坐标……2y2终点的纵坐标3后两个参数描述的是渐变的起始颜色渐变的结束颜色……1stop: 0渐变的起始颜色……2stop: 1渐变的结束颜色由于有起点坐标和终点坐标所以也就意味着渐变是有方向的从起始颜色按照起点坐标到终点坐标的方向渐变到结束颜色所以下面小编就可以举几个例子来帮助大家理解这里的渐变色了1起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 0)起始颜色为淡紫色结束颜色为白色所以按照上图也就是使用淡紫色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色2起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(0, 1)起始颜色为淡紫色结束颜色为白色所以按照上图也就是使用淡紫色作为起始颜色按照从上到下的方向渐变到结束颜色对应的白色3起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 1)起始颜色为淡紫色结束颜色为白色所以按照上图也就是使用淡紫色作为起始颜色按照对角线从左上到右下的方向渐变到结束颜色对应的白色关于渐变色设置的例子还有很多小编挑出来的这三个例子是比较有代表性的相信现在屏幕面前的读者友友已经可以很好的理解渐变色qlineargradient的传参与设置了下面我们就可以来实现一下对于列表框中元素当被鼠标进入/悬停被鼠标选中的时候给列表框中的元素的背景色设置渐变色了QListWidget::item:hover{background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0rgb(255,228,254),stop:1rgb(255,255,255));}QListWidget::item:selected{background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0rgb(255,170,255),stop:1rgb(255,255,255));}所以此时对于选择器我们保持不变即可我们需要改变是对于背景色background-color的设置那么这里对于列表框中的元素被鼠标进入/悬停的时候我们期望使用淡紫色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色所以我们就需要给qlineargradient传参起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 0)起始颜色为淡紫色结束颜色为白色同样的对于列表框中的元素被鼠标选中的时候我们期望使用比淡紫色深一点的颜色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色所以我们就需要给qlineargradient传参起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 0)起始颜色为比淡紫色深一点的颜色结束颜色为白色运行结果如下所以此时我们使用鼠标进入列表框上的元素也就是使用鼠标悬停在列表框的元素上此时这个元素就会以淡紫色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色同时我们使用鼠标点击选中列表框的元素此时这个元素就会以比淡紫色深一点的颜色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色没有问题接下来小编归纳一下自定义列表框中使用的样式属性子控件选择器伪类选择器1::item子控件选择器用于选中列表框中的元素/条目2:hover伪态选择器用于选中控件被鼠标悬停/进入的状态3:selected伪态选择器用于选中控件被鼠标选择的状态4background-color用于设置背景颜色5border用于设置边框6qlineargradient用于设置渐变色需要传入六个参数前两个参数用于传递起始坐标中间两个参数用于传递终点坐标后两个参数用于传递起始颜色和结束颜色二、给菜单栏设置样式同样的我们也可以对菜单栏QMenuBar的样式进行设置所以接下来我们创建一个项目名为qss_14基类为QMainWindow派生类为MainWindow的项目然后点击ui文件进入Qt Designer1【Qt】Qt窗口一窗口概览QMenuBar菜单栏的使用如上我们给MainWindow的菜单栏中添加三个菜单分别叫做菜单菜单2菜单3对于名字为菜单的菜单中我们添加五个菜单项分别叫做111, 222, 333, 444, 555然后在333和444中间添加一个分隔符将菜单项分为111,222,333和444,555这两组那么我们右击MainWindow窗口然后选择改变样式表此时就可以在样式表中对样式进行编辑了小编小编可是设计菜单栏的颜色搭配我感觉我没有艺术细胞搭配不好那么我们该如何搭配颜色呢这里小编介绍一款神器QQ按下ctrlaltA就可以进行QQ截图QQ截图内置了取色器所以我们使用取色器就可以提取出Qt Creator中菜单栏的颜色搭配1关于计算机中的颜色rgb和#QQ截图取色器的讲解在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解详情请点击——如上就是Qt Creator的菜单栏中的颜色搭配对于菜单栏来讲菜单栏的背景颜色是#D5D5D5菜单栏的菜单上的文字颜色是#000000当菜单被选中的时候背景颜色是#5D5E5F文字颜色是#FFFFFF所以此时我们就可以进行设置我们自己菜单栏中的菜单了等等不要说小编抄袭哈这是借鉴在Qt中还是很提倡借鉴的QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}所以我们使用类型选择器选择菜单栏QMenuBar将背景色background-color设置为#D5D5D5然后我们还期望菜单栏中的菜单和菜单之间保持一定的距离所以我们使用spacing将菜单栏上的菜单和菜单的距离设置为5像素1关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——接下来我们就可以设置菜单栏中的菜单了所以此时我们先使用类型选择器选择菜单栏QMenuBar然后再使用子控件选择器::item选择菜单栏上的元素即选择菜单此时我们就可以对菜单栏中的菜单进行样式设置了所以我们使用border-radius将菜单的圆角矩形设置为10像素让菜单的四个角圆一点这样比较美观接下来使用padding设置菜单的内边距设置上内边距和下内边距为3像素设置左内边距和右内边距为10像素这样菜单就可以被撑开让每一个菜单都变大一点同时菜单中的文字就可以和四边保持一定的距离同样比较美观接下来我们使用color将菜单的文字显示的颜色设置为#000000那么我们还要设置当菜单栏中的菜单被鼠标选中的时候的样式所以此时我们先使用类型选择器选择菜单栏QMenuBar然后再使用子控件选择器::item选择菜单栏上的元素即选择菜单。然后再使用伪态选择器:selected选择菜单被选择的状态此时我们就可以对菜单栏中的菜单被鼠标选中的时候的样式进行设置了那么我们此时将背景颜色background-color设置为#5D5E5F然后将文字颜色设置为#FFFFFF即可运行结果如下此时菜单栏及其菜单就比较美观了但是这里的菜单中的菜单项就有点强差人意了注意观察这里的菜单项中的文字距离左侧太大了有点太靠右了我们期望菜单项中的文字适中靠左一点如下QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}所以对于既然菜单项是菜单中的元素所以我们就可以先使用类型选择器选择QMenu然后再使用子控件选择器::item选择菜单项中的菜单即可小编这里既然可以使用类型选择器QMenu选择菜单那么是否是在菜单项中也可以不使用QMenuBar::item这种方式选择菜单项的菜单而是直接使用QMenu选择菜单呢当然可以那么这里为了更好的讲解所以小编对于这两个选择菜单的写法都进行了使用此时我们就可以对菜单中的菜单项进行样式的编写了那么此时我们使用padding设置菜单项内边距即可设置上内边距和下内边距为2像素设置左内边距和右内边距为10像素这样菜单项就可以被撑开让每一个菜单项都变大一点这样的话菜单项中的文字就可以和四边保持一定的距离了比较美观紧接着我们再使用border给菜单项设置边框设置边框的粗细为2像素边框的样式为实线solid边框的颜色为transparent透明色即可运行结果如下此时菜单项中的文字就不在靠右而是可以和四边保持一定的距离了同样的注意观察菜单栏的四边有一个淡淡的2像素的边框呈现实线的透明色也就是有一点微微的白边没有问题但是细心的读者友友可以看到此时小编使用鼠标选中菜单项的时候之前菜单项默认的蓝色背景没有了这就很难受这是为什么呢其实这是由于我们给菜单项设置样式之后系统的默认样式就会被我们给菜单项设置的样式给覆盖掉所以此时小编使用鼠标选中菜单项的时候之前菜单项默认的蓝色背景没有了所以接下来我们想要给被鼠标选中的菜单项设置背景颜色如下10. 此时先不着急我们先使用QQ截图提取一下Qt Creator中菜单项被鼠标选中之后的背景颜色如上是#90C8F6QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}QMenu::item:selected{background-color:#90C8F6;}所以此时我们先使用使用类型选择器选择QMenu然后再使用子控件选择器::item选择菜单项中的菜单接下来再使用伪态选择器:selected选择被鼠标选择的菜单项的状态接下来我们就可以对被鼠标选中的菜单项的样式进行设置了所以我们使用background-color设置菜单项的背景色为#90C8F6即可运行结果如下所以此时小编使用鼠标选中菜单项的时候被鼠标选中的菜单栏就会呈现蓝色背景了当然这些小编需要补充一点如果菜单项没有被选中的时候没有被设置2像素的边框并且我们给菜单项被选中的状态设置的样式中含有2像素的边框此时一旦我们使用鼠标选中了菜单项此时菜单项就会多出2像素的边框那么此时由于菜单项的大小是一定的所以只会向内缩小2像素的距离而菜单项的内边距又是一定的此时菜单项的文字就会出现一种浮动的效果有的场景下我们期望看到这种文字浮动的效果但是有的场景下我们不期望看到这种文字浮动的效果那么该怎么办呢此时我们就可以给菜单项没有被选中的时候设置2像素的透明色transparent边框此时菜单项没有被选中的时候就会呈现2像素的透明边框那么此时由于菜单项的大小是一定的所以只会向内缩小2像素的距离菜单项的文字初始状态下就会被影响那么此时我们使用鼠标选中菜单项那么此时仍然会出现2像素的边框但是相比较而言这里2像素的边框的粗细没有改变仍然是向内缩小2像素的距离不变所以此时菜单项的文字就会处于原来被影响的位置上不变进而也就不会出现菜单向中文字浮动的效果了所以这里解决文字浮动的关键是给菜单项没有被选中的时候设置和被选中的像素边框粗细相同的边框并且将这个边框设置为透明色transparent边框感兴趣的读者友友可以自行尝试一下QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;}QMenu::item:selected{background-color:#90C8F6;border:2px solidrgb(204,202,255);}其实这里小编也可以进行尝试一下那么这里小编将菜单项未被选中的样式中的边框border删除掉然后在菜单项被选中的样式中设置边框border边框的粗细为2像素边框的样式为实线solid边框的颜色为淡蓝色此时我没有给菜单项未选中设置边框给菜单项被选中设置了边框而菜单项的内边距又是一定的那么我们期望演示出文字浮动的效果运行结果如下此时小编选中菜单栏那么菜单栏中的文字就会出现一种浮动效果QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}QMenu::item:selected{background-color:#90C8F6;border:2px solidrgb(204,202,255);}为了消除菜单项中的文字浮动效果此时我们就可以给菜单项没有被选中的时候设置2像素的透明色transparent边框此时菜单项没有被选中的时候就会呈现2像素的透明边框那么此时由于菜单项的大小是一定的所以只会向内缩小2像素的距离菜单项的文字初始状态下就会被影响那么此时我们使用鼠标选中菜单项那么此时仍然会出现2像素的边框但是相比较而言这里2像素的边框的粗细没有改变仍然是向内缩小2像素的距离不变所以此时菜单项的文字就会处于原来被影响的位置上不变进而也就不会出现菜单向中文字浮动的效果了所以这里解决文字浮动的关键是给菜单项没有被选中的时候设置和被选中的像素边框粗细相同的边框并且将这个边框设置为透明色transparent边框运行结果如下此时小编选中菜单栏那么菜单栏中的文字就不会出现浮动效果了无误那么我们仔细来看上面的分割线其实对于分割线我们也可以进行一定的调整如下QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}QMenu::item:selected{background-color:#90C8F6;border:2px solidrgb(204,202,255);}QMenu::separator{height:2px;background-color:rgb(170,170,255);margin:0px 5px;}那么此时我们可以先试用QMenu选中菜单接下来使用子控件选择器::separator选中菜单中的分割线此时我们就可以进行分割线的样式设置了那么我们设置分割线的高度为2像素设置分割线的背景颜色background-color为淡蓝色然后设置分割线的外边距margin中的上外边距和下外边距为0像素左外边距和右外边距为5像素这样比较美观运行结果如下所以此时分割线的粗细颜色外边距就为我们期望的样式了无误接下来小编归纳一下自定义菜单栏中使用的子控件选择器伪类选择器1::item子控件选择器用来选中控件中的元素……1当前面的类型选择器是菜单栏的时候这里选中的元素就是菜单……2当前面的类型选择器是菜单的时候这里选中的元素就是菜单项2:selected伪态选择器用来选择控件的被选择状态……1从菜单栏的菜单上可以看出选择代表的是鼠标悬停在菜单上面当进行鼠标点击的时候代表此时已经进行了选择选择状态会消失……2从菜单中的菜单项可以看出选择代表的是鼠标悬停在菜单项上当进行鼠标点击的时候代表此时已经进行了选择选择状态会消失3:pressed伪态选择器用来选择当前控件被鼠标按压的状态……1而:pressed仅仅表示控件被鼠标的按压所以这里我们要注意区分伪态选择器中的:selected选择和:pressed按压4QMenu::separator子控件选择器用来选择菜单中的分割线三、登录界面的实现同样的我们也可以实现一个如上的登录界面那么在界面上有两个单行输入框一个用于输入账号一个用于输入密码同时还有一个复选框如果勾选那么就是记住密码最后还有一个登录按钮所以我们就可以实现一个登录界面然后使用QSS对这个登录界面进行优化所以接下来我们创建一个项目名为qss_15基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer对于这个登录界面我们可以通过弹出对话框的形式给用户呈现本质上就是再创建一个ui文件这里小编就简单一点直接在Widget界面上实现登录界面所以此时我们拖拽两个左侧的单行输入框QLineEdit设置placeholder分别为请输入账号请输入密码接下来拖拽一个复选框将复选框的文本修改为记住密码然后我们再来拖拽一个按钮将按钮的文本修改为登录即可可是单单凭借我们手动调整这些控件还是太不科学了所以这里我们点击上方红框内的垂直布局管理器QVboxLayout管理这些控件即可1【Qt】常用控件十QLineEditQTextEdit的属性和使用2【Qt】常用控件十八QVBoxLayoutQHBoxLayout的属性和使用布局管理器之间的嵌套如上我们将垂直布局管理器调整至合适的大小即可此时我们一看垂直布局管理器内部的控件大小比例不对那么我们该如何做呢其实通过垂直布局管理器的拉伸系数进行设置调整无法起到作用那么我们能否通过geometry来设置调整控件的尺寸呢嘶我们一看geometry灰了被禁用了为什么呢其实是由于我们将这些控件交给垂直布局管理器来进行管理控件的位置和尺寸由垂直布局管理器自行调整所以用于调整控件尺寸的geometry属性就会被禁用诶小编我记得你之前还带领我们使用过如上的sizePolicy的垂直策略将垂直策略调整为Expanding就可以让控件延展所以此时我们来尝试一下是否可以生效如上将控件sizePolicy的垂直策略调整为Expanding之后确实控件延伸了但是这未免也太延伸了吧不符合我们的预期效果所以我们还是将控件的sizePolicy的垂直策略调整回Fixed此时我们继续向下来看还有最小尺寸minmumSize和最大尺寸maximumSize这两个属性其中的宽度和高度正好可以限定一个控件的尺寸而我们是觉着在行方向上这些控件的高度不太合适所以这里我们可以将这些控件的高度都固定死对于复选框我们不需要进行设置因为复选框维持本身的尺寸即可我们要设置的是两个单行输入框以及登录按钮的尺寸中的高度所以将最小尺寸minmumSize和最大尺寸maximumSize中的高度属性都设置为50像素即可1关于位置尺寸对应的高度和宽度在第一点QWidget的geometry中进行的讲解详情请点击——2关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——如上此时我们再来看处于垂直布局管理器内的这些控件就顺眼多了所以我们该如何使用QSS优化这里的登录界面呢换言之我们该如何让一个界面变好看呢其实最明显的一点就是给这个界面设置背景图片所以此时小编找来了懒羊羊大王lazy-sheep.jpg来充当登录界面的背景图片了屏幕面前的读者友友也可以使用自己喜欢的图片来设置这里登录界面的背景图片而一旦涉及到在项目中使用图片那么我们就要使用qrc机制将图片进行导入了 关于qrc机制在第四点qrc机制中进行的讲解详情请点击——那么观察到如上右图的界面代表我们导入图片成功下面我们就要就将图片通过QSS设置到Widget这个顶层窗口上充当背景图片了可是这样却不行因为Qt中存在限制如果直接给顶层窗口设置背景图片会失效至于原因尚且无从考证那么上有政策下有对策我们也有解决方案我们不把背景图片设置在Widget这个顶层窗口上不就好了我们在Widget窗口下嵌套一层同等大小的QFrame窗口QFrame窗口不是顶层窗口给QFrame窗口设置背景图片可以生效所以就是给垂直布局管理器外头套上一个和Widget窗口一样大的QFrame窗口即可而对于这里的QFrame窗口其实是Widget窗口的子类只不过相对于Widget窗口QFrame窗口新增了的功能例如可以设置形状设置样式设置阴影效果等所以得知了这些之后此时我们点击ui文件进入Qt Designer如上此时左侧的Containers中就有QFrame窗口所以我们拖拽左侧的QFrame窗口然后将垂直布局管理拖拽到QFrame窗口中接下来将QFrame窗口调整至和Widget窗口一样大然后再将垂直布局管理器中拖拽至合适的位置即可此时界面的调整就完成了接下来按照我们之前的习惯就是右击界面然后点击改变样式表开始进行编辑样式了可是此时却不行为什么呢因为在ui文件中对于样式的修改我们习惯在Widget这个顶层窗口中进行修改而此时我们进行右击界面此时界面上表层就是QFrame窗口了别忘了每一个控件都可以被设置样式表所以QFrame窗口也可以设置样式表可是这并不符合我们的期望因为我们期望的是在Widget这个顶层窗口中进行样式表的编辑所以我们如何做呢如上此时在右上角中我们可以看到当前界面上的控件首先是最顶层的Widget窗口接下来就是QFrame窗口紧接着是垂直布局管理器然后就是垂直布局管理器内部的这些控件即两个单行输入框一个复选框一个登录按钮此时我们就可以右击右上角的Widget窗口对应的那一行然后点击改变样式表此时我们进行的修改样式属性的操作就都是在Widget这个顶层窗口中进行的了没有问题QFrame{border-image:url(:/lazy-sheep.jpg);}那么在Qt中如果要给一个控件设置背景图可以使用background-image但是通过background-image这种方式设置的背景图是固定大小的不会随着被设置控件的大小改变给改变所以我们并不推荐使用background-image设置控件的背景图我们更为推荐的是使用border-image设置控件的背景图而通过border-image设置控件的背景图会自动随着控件大小而改变所以我们更为推荐使用border-image设置控件的背景图所以此时我们使用类型选择器选择QFrame窗口然后border-image给QFrame窗口设置背景图即可运行结果如下所以此时结果如上图的右下角此时QFrame窗口上的背景图片就被设置为了懒羊羊还是挺好看的吧不得不说咱懒羊羊大王当背景图片还是挺权威的吧小编的电脑桌面也是使用的懒羊羊大王当做的桌面图片对于上述的界面我们还想优化例如设置圆角矩形字体大小文本颜色等尤其的如上复选框的文本颜色都要和窗沿的融为一体了我们期望将复选框的文本颜色设置为白色所以我们继续使用QSS对界面的样式进行修改如下那么如上其实豆包的登录界面的样式搭配还是挺好看的所以此时我们就使用QQ截图中的取色器来借鉴一下首先对于单行输入框的背景色是#E9EAEC单行输入框中的字体颜色是#000000按钮的背景色是#E0E0E0按钮的文本颜色是#FFFFFF上述是单行输入一进行输入那么按钮的背景色和文字颜色就发生改变那么这里我们将对应的颜色借鉴为我们程序中按钮被按下的颜色即按钮被按压的背景色#323232按钮被按压的文字颜色是#FFFFFF同样的我们还注意到上面的单行输入框和按钮都是圆角的我们也可以借鉴到我们程序中来1关于计算机中的颜色rgb和#QQ截图取色器的讲解在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解详情请点击——QFrame{border-image:url(:/lazy-sheep.jpg);}QLineEdit{color:#000000;background-color:#E9EAEC;padding:0 5px;font-size:20px;border-radius:10px;}QCheckBox{color:white;font-size:15px;}QPushButton{font-size:20px;color:#FFFFFF;background-color:#E0E0E0;border-radius:10px;}QPushButton:pressed{color:#FFFFFF;background-color:#323232;}所以此时我们先使用状态选择器选择单行输入框QLineEdit然后设置文字颜色color为#000000其实也就是白色然后设置背景色background-color为#E9EAEC接下来设置内边距padding也就是上内边距和下内边距为0像素左内边距和右内边距为5像素这样可以让文本和两边保持一定的距离比较美观接下来将文字大小font-size设置为20像素最后给单行输入框设置圆角矩形border-radius为10像素让单行输入框的四个角圆一点接下来我们使用状态选择器选择复选框QCheckBox然后将字体颜色color为白色white按照一贯的设计风格这里对于复选框的文本最好比其它控件的字体大小小一点所以接下来将字体大小font-size设置为15像素即可下面我们就可以使用状态选择器选择按钮QPushButton了接下来将文字大小font-size设置为20像素接下来设置文字颜色color为#FFFFFF然后设置背景色background-color为#E0E0E0最后给按钮设置圆角矩形border-radius为10像素让按钮的四个角圆一点比较美观最后同样的当按钮被点击的时候我们期望也要改变按钮的样式所以此时我们就使用状态选择器选择按钮QPushButton然后再使用伪态选择器选择:pressed选择按钮被按压下的状态那么此时我们使用color设置按钮被按压的文本颜色为#FFFFFF保持不变然后再使用background-color设置按钮被按压的背景颜色为#323232运行结果如下如上我们仔细观察单行输入框的最外边其实有一个淡淡的白边边框我们期望将这个白边边框消除掉那么此时我们进行输入账号没有问题可是在输入密码的时候我们发现密码是明文的我们更期望密码是使用特殊符号进行替代这样保密性强对用户友好接下来复选框显示的文本为白色复选框的文本可以被看到了挺好的复选框可以正常勾选嘶但是对于这里的登录按钮的字体就有点看不清了文字太细了我们来看豆包的按钮其中的字体比较粗所以看得清那么我们也应该将我们的按钮中的字体设置粗一点所以如上我们先选中界面上的输入密码的单行输入框然后右侧属性中找到显示模式echoMode将正常模式Normal调整为密码模式Password此时用户再进行输入密码就会使用特殊符号回显给用户同样的我们也可以增加给用户回显密码的功能对于这个功能小编之前实现过了在第一点QLineEdit中的切换显示密码状态中进行的讲解详情请点击——所以这里小编就不再额外添加演示了感兴趣的读者友友可以自行尝试QFrame{border-image:url(:/lazy-sheep.jpg);}QLineEdit{color:#000000;background-color:#E9EAEC;padding:0 5px;font-size:20px;border:none;border-radius:10px;}QCheckBox{color:white;font-size:15px;}QPushButton{font-size:20px;font-weight:bold;color:#FFFFFF;background-color:#E0E0E0;border-radius:10px;}QPushButton:pressed{color:#FFFFFF;background-color:#323232;}所以对于消除单行输入框的白边边框那么我们在单行输入框的样式设置中在设置圆角矩形border-radius之前先使用border将边框的所有属性设置为none此时白边边框也就没有了那么接下来继续给单行输入框设置圆角矩形border-radius为10像素让单行输入框的四个角圆一点即可对于让按钮显示的字体更粗一点我们可以在按钮的样式设置中使用font-weight设置按钮中的文字的粗细为粗bold即可运行结果如下所以如上两个单行输入框周围淡淡的白边边框没有了此时在输入密码的单行输入框中输入密码此时密码就被特殊符号进行替代回显了然后对于按钮显示的文本也变粗了所以此时我们观察按钮上显示的登录文本就比较明显了四、小结通过之前文章的学习加上文本的学习我们已经对QSS已经有了一个基本的了解与使用了至于更多关于QSS的使用就需要同学们去Qt Assistant中查阅Qt的官方文档进行学习了关于如何查阅小编也已经在之前的文章中讲解过了这里小编就不再赘述下面小编简单的总结一下我们学习到的QSS内容1首先我们学习了QSS是什么也就是类似于前端网页CSS这样设置样式的一种机制我们知道了虽然QSS功能上不如CSS但是使用QSS我们也可以完成很多的工作同样的这里的样式就是指展示给用户看的界面上的所有内容都可以被称为样式被QSS进行设置2接下来我们学习了QSS的基本用法可以针对具体的控件设置QSS样式也可以在main.cpp的main函数中设置全局样式并且学习到了如何对代码和样式进行分离同样也可以在Qt Designer中设置样式保存到ui文件中3紧接着我们学习到了选择器的使用学习了类型选择器类选择器ID选择器并集选择器还有子控件选择器伪态选择器特别的通过伪态选择器可以让我们针对控件的状态进行样式的设置此时在该状态下使用伪态选择器设置样式要比使用事件设置样式要更简单更轻松代码行数要更少4然后我们学习了盒子模型认识到Qt中的每个控件都是一个矩形这个矩形也就是盒子模型盒子模型分为四个部分有内到外依次是内容content内边距padding边框border外边距margin5最后我们基于很多的代码例子学习了很多经常使用的样式属性并且客观的认识到了QSS中支持的样式属性是很多的仅仅靠背是背不下来了的更合理的做法是用到了去Qt官方文档中进行查询当然这也要求我们要对于QSS中一些常用的样式属性要有基本的理解和使用总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路
【Qt】界面优化（四）给列表框，菜单栏设置样式，登录界面的实现，小结
发布时间：2026/5/22 16:16:12
小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、给列表框设置样式二、给菜单栏设置样式三、登录界面的实现四、小结总结前言【Qt】界面优化三盒子模型的介绍和使用给按钮复选框单行输入框设置样式——书接上文 详情请点击——本文会在上文的基础上进行讲解所以对上文不了解的读者友友请点击前方的蓝字链接进行学习本文由小编为大家介绍——【Qt】界面优化四给列表框菜单栏设置样式登录界面的实现小结一、给列表框设置样式如下蓝字链接在我们学习了QSS之后此时我们就可以对控件进行各种各样的自定义了接下来我们就对列表框QListWidget的样式进行设置所以接下来我们创建一个项目名为qss_13基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer1【Qt】常用控件十四QListWidget的属性和使用2【Qt】界面优化一QSS的介绍与基本使用样式与代码分离3【Qt】界面优化二类型选择器类选择器ID选择器并集选择器子控件选择器伪类选择器的介绍和使用4 【Qt】界面优化三盒子模型的介绍和使用给按钮复选框单行输入框设置样式那么我们拖拽一下左侧的列表框QListWidget控件双击列表框进入编辑列表窗口部件界面此时我们添加上111, 222, 333这三个元素便于后面我们进行演示现象运行结果如下所以此时我们使用鼠标进入列表框上的元素也就是使用鼠标悬停在列表框的元素上此时会有一个淡蓝色的背景效果同时我们使用鼠标点击选中列表框的元素此时会有一个蓝色的背景效果那么我们是否可以自定义这两种效果呢可以如下QListWidget::item:hover{background-color:rgb(255,232,255);}QListWidget::item:selected{background-color:rgb(255,190,255);}那么我们右击列表框然后选择改变样式表此时就可以在样式表中对样式进行编辑了首先我们使用类型选择器选择列表框QListWidget然后使用子控件选择器::item选择列表框中的元素此时我们设置的样式对于列表框中的所有元素都是生效的也就是列表框中的任何一个元素被鼠标进入/悬停了都要呈现淡紫色接下来使用伪类选择器:hover选择列表框的元素被进入的状态也就是选择鼠标悬停在列表框中的元素上这个状态此时我们将在列表框中被进入/悬停的元素的背景色设置为淡紫色接下来我们使用类型选择器选择列表框QListWidget然后使用子控件选择器::item选择列表框中的元素此时我们设置的样式对于列表框中的所有元素都是生效的接下来使用伪类选择器:selected选择列表框的元素被选择的状态此时我们将在列表框中被选择的元素的背景色设置为比淡紫色深一点的颜色即可运行结果如下所以此时我们使用鼠标进入列表框上的元素也就是使用鼠标悬停在列表框的元素上此时会有一个淡紫色的背景效果同时我们使用鼠标点击选中列表框的元素此时会有一个比淡紫色颜色深一点的颜色的背景效果小编小编其实你说的这些我都懂不就是设置纯色吗也就是选中的区域各个位置的颜色都一样感觉没什么技术含量那么你能不能教教我如何设置渐变色就是从一种颜色渐变到另外一种颜色可以如下那么这里我们就需要用到qlineargradient这个样式属性来设置渐变色了这个渐变的效果是线性渐变也就是每隔几像素颜色就渐变一点直到从这种颜色渐变到另外一种颜色要使用qlineargradient这个样式属性需要填写六个参数什么小编6个参数这么多是的但是都很好理解下面小编来讲解一下qlineargradient的六个参数介绍如下1首先是前两个参数是起点坐标取值非常有限取值要么是0要么是1如上控件左上角的坐标是(0, 0)控件右上角的坐标是(1, 0)控件左下角的坐标是(0, 1)控件右下角的坐标是(1, 1) 关于坐标在第八点Qt坐标系的认识中进行的讲解详情请点击——……1x1起点的横坐标……2y1起点的纵坐标2中间两个参数也是终点坐标取值同样有限取值要么是0要么是1……1x2终点的横坐标……2y2终点的纵坐标3后两个参数描述的是渐变的起始颜色渐变的结束颜色……1stop: 0渐变的起始颜色……2stop: 1渐变的结束颜色由于有起点坐标和终点坐标所以也就意味着渐变是有方向的从起始颜色按照起点坐标到终点坐标的方向渐变到结束颜色所以下面小编就可以举几个例子来帮助大家理解这里的渐变色了1起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 0)起始颜色为淡紫色结束颜色为白色所以按照上图也就是使用淡紫色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色2起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(0, 1)起始颜色为淡紫色结束颜色为白色所以按照上图也就是使用淡紫色作为起始颜色按照从上到下的方向渐变到结束颜色对应的白色3起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 1)起始颜色为淡紫色结束颜色为白色所以按照上图也就是使用淡紫色作为起始颜色按照对角线从左上到右下的方向渐变到结束颜色对应的白色关于渐变色设置的例子还有很多小编挑出来的这三个例子是比较有代表性的相信现在屏幕面前的读者友友已经可以很好的理解渐变色qlineargradient的传参与设置了下面我们就可以来实现一下对于列表框中元素当被鼠标进入/悬停被鼠标选中的时候给列表框中的元素的背景色设置渐变色了QListWidget::item:hover{background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0rgb(255,228,254),stop:1rgb(255,255,255));}QListWidget::item:selected{background-color:qlineargradient(x1:0,y1:0,x2:1,y2:0,stop:0rgb(255,170,255),stop:1rgb(255,255,255));}所以此时对于选择器我们保持不变即可我们需要改变是对于背景色background-color的设置那么这里对于列表框中的元素被鼠标进入/悬停的时候我们期望使用淡紫色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色所以我们就需要给qlineargradient传参起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 0)起始颜色为淡紫色结束颜色为白色同样的对于列表框中的元素被鼠标选中的时候我们期望使用比淡紫色深一点的颜色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色所以我们就需要给qlineargradient传参起点坐标(x1, y1)对应(0, 0)终点坐标(x2, y2)对应(1, 0)起始颜色为比淡紫色深一点的颜色结束颜色为白色运行结果如下所以此时我们使用鼠标进入列表框上的元素也就是使用鼠标悬停在列表框的元素上此时这个元素就会以淡紫色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色同时我们使用鼠标点击选中列表框的元素此时这个元素就会以比淡紫色深一点的颜色作为起始颜色按照从左到右的方向渐变到结束颜色对应的白色没有问题接下来小编归纳一下自定义列表框中使用的样式属性子控件选择器伪类选择器1::item子控件选择器用于选中列表框中的元素/条目2:hover伪态选择器用于选中控件被鼠标悬停/进入的状态3:selected伪态选择器用于选中控件被鼠标选择的状态4background-color用于设置背景颜色5border用于设置边框6qlineargradient用于设置渐变色需要传入六个参数前两个参数用于传递起始坐标中间两个参数用于传递终点坐标后两个参数用于传递起始颜色和结束颜色二、给菜单栏设置样式同样的我们也可以对菜单栏QMenuBar的样式进行设置所以接下来我们创建一个项目名为qss_14基类为QMainWindow派生类为MainWindow的项目然后点击ui文件进入Qt Designer1【Qt】Qt窗口一窗口概览QMenuBar菜单栏的使用如上我们给MainWindow的菜单栏中添加三个菜单分别叫做菜单菜单2菜单3对于名字为菜单的菜单中我们添加五个菜单项分别叫做111, 222, 333, 444, 555然后在333和444中间添加一个分隔符将菜单项分为111,222,333和444,555这两组那么我们右击MainWindow窗口然后选择改变样式表此时就可以在样式表中对样式进行编辑了小编小编可是设计菜单栏的颜色搭配我感觉我没有艺术细胞搭配不好那么我们该如何搭配颜色呢这里小编介绍一款神器QQ按下ctrlaltA就可以进行QQ截图QQ截图内置了取色器所以我们使用取色器就可以提取出Qt Creator中菜单栏的颜色搭配1关于计算机中的颜色rgb和#QQ截图取色器的讲解在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解详情请点击——如上就是Qt Creator的菜单栏中的颜色搭配对于菜单栏来讲菜单栏的背景颜色是#D5D5D5菜单栏的菜单上的文字颜色是#000000当菜单被选中的时候背景颜色是#5D5E5F文字颜色是#FFFFFF所以此时我们就可以进行设置我们自己菜单栏中的菜单了等等不要说小编抄袭哈这是借鉴在Qt中还是很提倡借鉴的QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}所以我们使用类型选择器选择菜单栏QMenuBar将背景色background-color设置为#D5D5D5然后我们还期望菜单栏中的菜单和菜单之间保持一定的距离所以我们使用spacing将菜单栏上的菜单和菜单的距离设置为5像素1关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——接下来我们就可以设置菜单栏中的菜单了所以此时我们先使用类型选择器选择菜单栏QMenuBar然后再使用子控件选择器::item选择菜单栏上的元素即选择菜单此时我们就可以对菜单栏中的菜单进行样式设置了所以我们使用border-radius将菜单的圆角矩形设置为10像素让菜单的四个角圆一点这样比较美观接下来使用padding设置菜单的内边距设置上内边距和下内边距为3像素设置左内边距和右内边距为10像素这样菜单就可以被撑开让每一个菜单都变大一点同时菜单中的文字就可以和四边保持一定的距离同样比较美观接下来我们使用color将菜单的文字显示的颜色设置为#000000那么我们还要设置当菜单栏中的菜单被鼠标选中的时候的样式所以此时我们先使用类型选择器选择菜单栏QMenuBar然后再使用子控件选择器::item选择菜单栏上的元素即选择菜单。然后再使用伪态选择器:selected选择菜单被选择的状态此时我们就可以对菜单栏中的菜单被鼠标选中的时候的样式进行设置了那么我们此时将背景颜色background-color设置为#5D5E5F然后将文字颜色设置为#FFFFFF即可运行结果如下此时菜单栏及其菜单就比较美观了但是这里的菜单中的菜单项就有点强差人意了注意观察这里的菜单项中的文字距离左侧太大了有点太靠右了我们期望菜单项中的文字适中靠左一点如下QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}所以对于既然菜单项是菜单中的元素所以我们就可以先使用类型选择器选择QMenu然后再使用子控件选择器::item选择菜单项中的菜单即可小编这里既然可以使用类型选择器QMenu选择菜单那么是否是在菜单项中也可以不使用QMenuBar::item这种方式选择菜单项的菜单而是直接使用QMenu选择菜单呢当然可以那么这里为了更好的讲解所以小编对于这两个选择菜单的写法都进行了使用此时我们就可以对菜单中的菜单项进行样式的编写了那么此时我们使用padding设置菜单项内边距即可设置上内边距和下内边距为2像素设置左内边距和右内边距为10像素这样菜单项就可以被撑开让每一个菜单项都变大一点这样的话菜单项中的文字就可以和四边保持一定的距离了比较美观紧接着我们再使用border给菜单项设置边框设置边框的粗细为2像素边框的样式为实线solid边框的颜色为transparent透明色即可运行结果如下此时菜单项中的文字就不在靠右而是可以和四边保持一定的距离了同样的注意观察菜单栏的四边有一个淡淡的2像素的边框呈现实线的透明色也就是有一点微微的白边没有问题但是细心的读者友友可以看到此时小编使用鼠标选中菜单项的时候之前菜单项默认的蓝色背景没有了这就很难受这是为什么呢其实这是由于我们给菜单项设置样式之后系统的默认样式就会被我们给菜单项设置的样式给覆盖掉所以此时小编使用鼠标选中菜单项的时候之前菜单项默认的蓝色背景没有了所以接下来我们想要给被鼠标选中的菜单项设置背景颜色如下10. 此时先不着急我们先使用QQ截图提取一下Qt Creator中菜单项被鼠标选中之后的背景颜色如上是#90C8F6QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}QMenu::item:selected{background-color:#90C8F6;}所以此时我们先使用使用类型选择器选择QMenu然后再使用子控件选择器::item选择菜单项中的菜单接下来再使用伪态选择器:selected选择被鼠标选择的菜单项的状态接下来我们就可以对被鼠标选中的菜单项的样式进行设置了所以我们使用background-color设置菜单项的背景色为#90C8F6即可运行结果如下所以此时小编使用鼠标选中菜单项的时候被鼠标选中的菜单栏就会呈现蓝色背景了当然这些小编需要补充一点如果菜单项没有被选中的时候没有被设置2像素的边框并且我们给菜单项被选中的状态设置的样式中含有2像素的边框此时一旦我们使用鼠标选中了菜单项此时菜单项就会多出2像素的边框那么此时由于菜单项的大小是一定的所以只会向内缩小2像素的距离而菜单项的内边距又是一定的此时菜单项的文字就会出现一种浮动的效果有的场景下我们期望看到这种文字浮动的效果但是有的场景下我们不期望看到这种文字浮动的效果那么该怎么办呢此时我们就可以给菜单项没有被选中的时候设置2像素的透明色transparent边框此时菜单项没有被选中的时候就会呈现2像素的透明边框那么此时由于菜单项的大小是一定的所以只会向内缩小2像素的距离菜单项的文字初始状态下就会被影响那么此时我们使用鼠标选中菜单项那么此时仍然会出现2像素的边框但是相比较而言这里2像素的边框的粗细没有改变仍然是向内缩小2像素的距离不变所以此时菜单项的文字就会处于原来被影响的位置上不变进而也就不会出现菜单向中文字浮动的效果了所以这里解决文字浮动的关键是给菜单项没有被选中的时候设置和被选中的像素边框粗细相同的边框并且将这个边框设置为透明色transparent边框感兴趣的读者友友可以自行尝试一下QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;}QMenu::item:selected{background-color:#90C8F6;border:2px solidrgb(204,202,255);}其实这里小编也可以进行尝试一下那么这里小编将菜单项未被选中的样式中的边框border删除掉然后在菜单项被选中的样式中设置边框border边框的粗细为2像素边框的样式为实线solid边框的颜色为淡蓝色此时我没有给菜单项未选中设置边框给菜单项被选中设置了边框而菜单项的内边距又是一定的那么我们期望演示出文字浮动的效果运行结果如下此时小编选中菜单栏那么菜单栏中的文字就会出现一种浮动效果QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}QMenu::item:selected{background-color:#90C8F6;border:2px solidrgb(204,202,255);}为了消除菜单项中的文字浮动效果此时我们就可以给菜单项没有被选中的时候设置2像素的透明色transparent边框此时菜单项没有被选中的时候就会呈现2像素的透明边框那么此时由于菜单项的大小是一定的所以只会向内缩小2像素的距离菜单项的文字初始状态下就会被影响那么此时我们使用鼠标选中菜单项那么此时仍然会出现2像素的边框但是相比较而言这里2像素的边框的粗细没有改变仍然是向内缩小2像素的距离不变所以此时菜单项的文字就会处于原来被影响的位置上不变进而也就不会出现菜单向中文字浮动的效果了所以这里解决文字浮动的关键是给菜单项没有被选中的时候设置和被选中的像素边框粗细相同的边框并且将这个边框设置为透明色transparent边框运行结果如下此时小编选中菜单栏那么菜单栏中的文字就不会出现浮动效果了无误那么我们仔细来看上面的分割线其实对于分割线我们也可以进行一定的调整如下QMenuBar{background-color:#D5D5D5;spacing:5px;}QMenuBar::item{border-radius:10px;padding:3px 10px;color:#000000;}QMenuBar::item:selected{background-color:#5D5E5F;color:#FFFFFF;}QMenu::item{padding:2px 10px;border:2px solid transparent;}QMenu::item:selected{background-color:#90C8F6;border:2px solidrgb(204,202,255);}QMenu::separator{height:2px;background-color:rgb(170,170,255);margin:0px 5px;}那么此时我们可以先试用QMenu选中菜单接下来使用子控件选择器::separator选中菜单中的分割线此时我们就可以进行分割线的样式设置了那么我们设置分割线的高度为2像素设置分割线的背景颜色background-color为淡蓝色然后设置分割线的外边距margin中的上外边距和下外边距为0像素左外边距和右外边距为5像素这样比较美观运行结果如下所以此时分割线的粗细颜色外边距就为我们期望的样式了无误接下来小编归纳一下自定义菜单栏中使用的子控件选择器伪类选择器1::item子控件选择器用来选中控件中的元素……1当前面的类型选择器是菜单栏的时候这里选中的元素就是菜单……2当前面的类型选择器是菜单的时候这里选中的元素就是菜单项2:selected伪态选择器用来选择控件的被选择状态……1从菜单栏的菜单上可以看出选择代表的是鼠标悬停在菜单上面当进行鼠标点击的时候代表此时已经进行了选择选择状态会消失……2从菜单中的菜单项可以看出选择代表的是鼠标悬停在菜单项上当进行鼠标点击的时候代表此时已经进行了选择选择状态会消失3:pressed伪态选择器用来选择当前控件被鼠标按压的状态……1而:pressed仅仅表示控件被鼠标的按压所以这里我们要注意区分伪态选择器中的:selected选择和:pressed按压4QMenu::separator子控件选择器用来选择菜单中的分割线三、登录界面的实现同样的我们也可以实现一个如上的登录界面那么在界面上有两个单行输入框一个用于输入账号一个用于输入密码同时还有一个复选框如果勾选那么就是记住密码最后还有一个登录按钮所以我们就可以实现一个登录界面然后使用QSS对这个登录界面进行优化所以接下来我们创建一个项目名为qss_15基类为QWidget派生类为Widget的项目然后点击ui文件进入Qt Designer对于这个登录界面我们可以通过弹出对话框的形式给用户呈现本质上就是再创建一个ui文件这里小编就简单一点直接在Widget界面上实现登录界面所以此时我们拖拽两个左侧的单行输入框QLineEdit设置placeholder分别为请输入账号请输入密码接下来拖拽一个复选框将复选框的文本修改为记住密码然后我们再来拖拽一个按钮将按钮的文本修改为登录即可可是单单凭借我们手动调整这些控件还是太不科学了所以这里我们点击上方红框内的垂直布局管理器QVboxLayout管理这些控件即可1【Qt】常用控件十QLineEditQTextEdit的属性和使用2【Qt】常用控件十八QVBoxLayoutQHBoxLayout的属性和使用布局管理器之间的嵌套如上我们将垂直布局管理器调整至合适的大小即可此时我们一看垂直布局管理器内部的控件大小比例不对那么我们该如何做呢其实通过垂直布局管理器的拉伸系数进行设置调整无法起到作用那么我们能否通过geometry来设置调整控件的尺寸呢嘶我们一看geometry灰了被禁用了为什么呢其实是由于我们将这些控件交给垂直布局管理器来进行管理控件的位置和尺寸由垂直布局管理器自行调整所以用于调整控件尺寸的geometry属性就会被禁用诶小编我记得你之前还带领我们使用过如上的sizePolicy的垂直策略将垂直策略调整为Expanding就可以让控件延展所以此时我们来尝试一下是否可以生效如上将控件sizePolicy的垂直策略调整为Expanding之后确实控件延伸了但是这未免也太延伸了吧不符合我们的预期效果所以我们还是将控件的sizePolicy的垂直策略调整回Fixed此时我们继续向下来看还有最小尺寸minmumSize和最大尺寸maximumSize这两个属性其中的宽度和高度正好可以限定一个控件的尺寸而我们是觉着在行方向上这些控件的高度不太合适所以这里我们可以将这些控件的高度都固定死对于复选框我们不需要进行设置因为复选框维持本身的尺寸即可我们要设置的是两个单行输入框以及登录按钮的尺寸中的高度所以将最小尺寸minmumSize和最大尺寸maximumSize中的高度属性都设置为50像素即可1关于位置尺寸对应的高度和宽度在第一点QWidget的geometry中进行的讲解详情请点击——2关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——如上此时我们再来看处于垂直布局管理器内的这些控件就顺眼多了所以我们该如何使用QSS优化这里的登录界面呢换言之我们该如何让一个界面变好看呢其实最明显的一点就是给这个界面设置背景图片所以此时小编找来了懒羊羊大王lazy-sheep.jpg来充当登录界面的背景图片了屏幕面前的读者友友也可以使用自己喜欢的图片来设置这里登录界面的背景图片而一旦涉及到在项目中使用图片那么我们就要使用qrc机制将图片进行导入了 关于qrc机制在第四点qrc机制中进行的讲解详情请点击——那么观察到如上右图的界面代表我们导入图片成功下面我们就要就将图片通过QSS设置到Widget这个顶层窗口上充当背景图片了可是这样却不行因为Qt中存在限制如果直接给顶层窗口设置背景图片会失效至于原因尚且无从考证那么上有政策下有对策我们也有解决方案我们不把背景图片设置在Widget这个顶层窗口上不就好了我们在Widget窗口下嵌套一层同等大小的QFrame窗口QFrame窗口不是顶层窗口给QFrame窗口设置背景图片可以生效所以就是给垂直布局管理器外头套上一个和Widget窗口一样大的QFrame窗口即可而对于这里的QFrame窗口其实是Widget窗口的子类只不过相对于Widget窗口QFrame窗口新增了的功能例如可以设置形状设置样式设置阴影效果等所以得知了这些之后此时我们点击ui文件进入Qt Designer如上此时左侧的Containers中就有QFrame窗口所以我们拖拽左侧的QFrame窗口然后将垂直布局管理拖拽到QFrame窗口中接下来将QFrame窗口调整至和Widget窗口一样大然后再将垂直布局管理器中拖拽至合适的位置即可此时界面的调整就完成了接下来按照我们之前的习惯就是右击界面然后点击改变样式表开始进行编辑样式了可是此时却不行为什么呢因为在ui文件中对于样式的修改我们习惯在Widget这个顶层窗口中进行修改而此时我们进行右击界面此时界面上表层就是QFrame窗口了别忘了每一个控件都可以被设置样式表所以QFrame窗口也可以设置样式表可是这并不符合我们的期望因为我们期望的是在Widget这个顶层窗口中进行样式表的编辑所以我们如何做呢如上此时在右上角中我们可以看到当前界面上的控件首先是最顶层的Widget窗口接下来就是QFrame窗口紧接着是垂直布局管理器然后就是垂直布局管理器内部的这些控件即两个单行输入框一个复选框一个登录按钮此时我们就可以右击右上角的Widget窗口对应的那一行然后点击改变样式表此时我们进行的修改样式属性的操作就都是在Widget这个顶层窗口中进行的了没有问题QFrame{border-image:url(:/lazy-sheep.jpg);}那么在Qt中如果要给一个控件设置背景图可以使用background-image但是通过background-image这种方式设置的背景图是固定大小的不会随着被设置控件的大小改变给改变所以我们并不推荐使用background-image设置控件的背景图我们更为推荐的是使用border-image设置控件的背景图而通过border-image设置控件的背景图会自动随着控件大小而改变所以我们更为推荐使用border-image设置控件的背景图所以此时我们使用类型选择器选择QFrame窗口然后border-image给QFrame窗口设置背景图即可运行结果如下所以此时结果如上图的右下角此时QFrame窗口上的背景图片就被设置为了懒羊羊还是挺好看的吧不得不说咱懒羊羊大王当背景图片还是挺权威的吧小编的电脑桌面也是使用的懒羊羊大王当做的桌面图片对于上述的界面我们还想优化例如设置圆角矩形字体大小文本颜色等尤其的如上复选框的文本颜色都要和窗沿的融为一体了我们期望将复选框的文本颜色设置为白色所以我们继续使用QSS对界面的样式进行修改如下那么如上其实豆包的登录界面的样式搭配还是挺好看的所以此时我们就使用QQ截图中的取色器来借鉴一下首先对于单行输入框的背景色是#E9EAEC单行输入框中的字体颜色是#000000按钮的背景色是#E0E0E0按钮的文本颜色是#FFFFFF上述是单行输入一进行输入那么按钮的背景色和文字颜色就发生改变那么这里我们将对应的颜色借鉴为我们程序中按钮被按下的颜色即按钮被按压的背景色#323232按钮被按压的文字颜色是#FFFFFF同样的我们还注意到上面的单行输入框和按钮都是圆角的我们也可以借鉴到我们程序中来1关于计算机中的颜色rgb和#QQ截图取色器的讲解在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解详情请点击——QFrame{border-image:url(:/lazy-sheep.jpg);}QLineEdit{color:#000000;background-color:#E9EAEC;padding:0 5px;font-size:20px;border-radius:10px;}QCheckBox{color:white;font-size:15px;}QPushButton{font-size:20px;color:#FFFFFF;background-color:#E0E0E0;border-radius:10px;}QPushButton:pressed{color:#FFFFFF;background-color:#323232;}所以此时我们先使用状态选择器选择单行输入框QLineEdit然后设置文字颜色color为#000000其实也就是白色然后设置背景色background-color为#E9EAEC接下来设置内边距padding也就是上内边距和下内边距为0像素左内边距和右内边距为5像素这样可以让文本和两边保持一定的距离比较美观接下来将文字大小font-size设置为20像素最后给单行输入框设置圆角矩形border-radius为10像素让单行输入框的四个角圆一点接下来我们使用状态选择器选择复选框QCheckBox然后将字体颜色color为白色white按照一贯的设计风格这里对于复选框的文本最好比其它控件的字体大小小一点所以接下来将字体大小font-size设置为15像素即可下面我们就可以使用状态选择器选择按钮QPushButton了接下来将文字大小font-size设置为20像素接下来设置文字颜色color为#FFFFFF然后设置背景色background-color为#E0E0E0最后给按钮设置圆角矩形border-radius为10像素让按钮的四个角圆一点比较美观最后同样的当按钮被点击的时候我们期望也要改变按钮的样式所以此时我们就使用状态选择器选择按钮QPushButton然后再使用伪态选择器选择:pressed选择按钮被按压下的状态那么此时我们使用color设置按钮被按压的文本颜色为#FFFFFF保持不变然后再使用background-color设置按钮被按压的背景颜色为#323232运行结果如下如上我们仔细观察单行输入框的最外边其实有一个淡淡的白边边框我们期望将这个白边边框消除掉那么此时我们进行输入账号没有问题可是在输入密码的时候我们发现密码是明文的我们更期望密码是使用特殊符号进行替代这样保密性强对用户友好接下来复选框显示的文本为白色复选框的文本可以被看到了挺好的复选框可以正常勾选嘶但是对于这里的登录按钮的字体就有点看不清了文字太细了我们来看豆包的按钮其中的字体比较粗所以看得清那么我们也应该将我们的按钮中的字体设置粗一点所以如上我们先选中界面上的输入密码的单行输入框然后右侧属性中找到显示模式echoMode将正常模式Normal调整为密码模式Password此时用户再进行输入密码就会使用特殊符号回显给用户同样的我们也可以增加给用户回显密码的功能对于这个功能小编之前实现过了在第一点QLineEdit中的切换显示密码状态中进行的讲解详情请点击——所以这里小编就不再额外添加演示了感兴趣的读者友友可以自行尝试QFrame{border-image:url(:/lazy-sheep.jpg);}QLineEdit{color:#000000;background-color:#E9EAEC;padding:0 5px;font-size:20px;border:none;border-radius:10px;}QCheckBox{color:white;font-size:15px;}QPushButton{font-size:20px;font-weight:bold;color:#FFFFFF;background-color:#E0E0E0;border-radius:10px;}QPushButton:pressed{color:#FFFFFF;background-color:#323232;}所以对于消除单行输入框的白边边框那么我们在单行输入框的样式设置中在设置圆角矩形border-radius之前先使用border将边框的所有属性设置为none此时白边边框也就没有了那么接下来继续给单行输入框设置圆角矩形border-radius为10像素让单行输入框的四个角圆一点即可对于让按钮显示的字体更粗一点我们可以在按钮的样式设置中使用font-weight设置按钮中的文字的粗细为粗bold即可运行结果如下所以如上两个单行输入框周围淡淡的白边边框没有了此时在输入密码的单行输入框中输入密码此时密码就被特殊符号进行替代回显了然后对于按钮显示的文本也变粗了所以此时我们观察按钮上显示的登录文本就比较明显了四、小结通过之前文章的学习加上文本的学习我们已经对QSS已经有了一个基本的了解与使用了至于更多关于QSS的使用就需要同学们去Qt Assistant中查阅Qt的官方文档进行学习了关于如何查阅小编也已经在之前的文章中讲解过了这里小编就不再赘述下面小编简单的总结一下我们学习到的QSS内容1首先我们学习了QSS是什么也就是类似于前端网页CSS这样设置样式的一种机制我们知道了虽然QSS功能上不如CSS但是使用QSS我们也可以完成很多的工作同样的这里的样式就是指展示给用户看的界面上的所有内容都可以被称为样式被QSS进行设置2接下来我们学习了QSS的基本用法可以针对具体的控件设置QSS样式也可以在main.cpp的main函数中设置全局样式并且学习到了如何对代码和样式进行分离同样也可以在Qt Designer中设置样式保存到ui文件中3紧接着我们学习到了选择器的使用学习了类型选择器类选择器ID选择器并集选择器还有子控件选择器伪态选择器特别的通过伪态选择器可以让我们针对控件的状态进行样式的设置此时在该状态下使用伪态选择器设置样式要比使用事件设置样式要更简单更轻松代码行数要更少4然后我们学习了盒子模型认识到Qt中的每个控件都是一个矩形这个矩形也就是盒子模型盒子模型分为四个部分有内到外依次是内容content内边距padding边框border外边距margin5最后我们基于很多的代码例子学习了很多经常使用的样式属性并且客观的认识到了QSS中支持的样式属性是很多的仅仅靠背是背不下来了的更合理的做法是用到了去Qt官方文档中进行查询当然这也要求我们要对于QSS中一些常用的样式属性要有基本的理解和使用总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路
