通过样式设置控件风格

触摸屏的按钮可以通过插入图片来改变风格样式使画面更丰富。但由于不同按钮的长宽比也有不同，使用相同图片作背景会存在圆角变形的情况，在PS里重新切图也会比较费事。在编辑画面的过程偶然发现了样式这个东西，可以通过只改样式来实现美化控件的作用。我做了一些简单的样式（自己看着还行），分享给大家，希望能给大家提供一点思路。

下面分享样式代码。

底部导航栏按钮样式
QSSPushButton, QSSButton{
/*边框*/
        border:1px solid #4FC7F8;
/*背景*/

        background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #58C4F4, stop:0.4 #2791DD,stop:0.6 #1070D9,  stop:1 #1070D9);

/*字体颜色*/
        color:#fff;
/*圆角*/
        border-radius:0px;
}
QSSPushButton:hover, QSSButton:hover{
        border:1px solid #EEFDBC;
        background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #B4DD3E, stop:0.4 #B4DD3E,stop:0.6 #75C00C,  stop:1 #71AD07);
}
QSSPushButton:checked, QSSPushButton:focus, QSSPushButton:pressed,
QSSButton:checked, QSSButton:focus, QSSButton:pressed{
        background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #B4DD3E, stop:0.4 #B4DD3E,stop:0.6 #75C00C,  stop:1 #71AD07);

        color:#000;
}


侧边导航栏按钮样式
QSSPushButton, QSSButton{
        border:1px solid #ccc;
        background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #F8F8F8, stop:0.4 #ECECEC,stop:0.6 #E0E0E0,  stop:1 #F1F1F1);
        color:#000;
        border-radius:0px;
}
QSSPushButton:hover, QSSButton:hover{
        border:1px solid #4FC7F8;
        background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #56C2F7, stop:0.4 #338FE5,stop:0.6 #1272C8,  stop:1 #1192F0);

        color:#fff;
}
QSSPushButton:checked, QSSPushButton:focus, QSSPushButton:pressed,
QSSButton:checked, QSSButton:focus, QSSButton:pressed{
         border:1px solid #4FC7F8;
        background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #56C2F7, stop:0.4 #338FE5,stop:0.6 #1272C8,  stop:1 #1192F0);
        color:#fff;
}



输入框样式（数值IO域）
QSSLineEdit {
    color: #0E8BDC;
    background:#ffffff;
    border-bottom: 2px solid #efefef;

        border-right: 2px solid #efefef;
        border-top:1px solid #aaa;
        border-left:1px solid #aaa;
        border-radius:0px;
}
QSSLineEdit:hover, QSSLineEdit:focus {
    border: 2px solid #4b81ba;
}



文本标签
没有样式
外观->背景色：#F2F2F2


按钮
QSSButton {
        border:2px solid rgb(217,217,217);
/*白色背景*/

        background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgb(227,227,227), stop:1 rgb(250,250,250));
/*红色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #DF6F6F, stop:1 #CC4348);*/
/*蓝色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #58C4F4, stop:0.4 #2791DD,stop:0.6 #1070D9,  stop:1 #1070D9);*/
/*橙色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #FB9F04,stop:0.4 #F09224, stop:0.6 #e37301,stop:1 #D45800);*/
/*绿色背景background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #B4DD3E, stop:0.4 #B4DD3E,stop:0.6 #75C00C,  stop:1 #71AD07);*/
        color:#111;

        border-radius:8px;
}

文本标签不填文字作渐变背景
QSSLabel {
        color: #fff;
        background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 #2CD8D5,stop:0.56 #C5C1FF stop:1 #FFBAC3);
}

文本标签不填文字作透明背景
QSSLabel {
        color: #fff;
        background: rgba(0,0,0,20%);
}

免责声明：内容为网友自行发布或者来自互联网资源或者参考文献，如果侵犯了您的权益，请联系站长 1304546267@qq.com，我们会及时删除侵权内容，感谢您的理解！

可惜无法根据变量值选择样式： 我按下按钮后，变量值改变，按钮颜色根据变量值改变，被样式覆盖了

你可能是在找全局样式。
资源->全局样式->添加新样式
工程设置->起始样式选择新样式
这样弄会改掉所有默认样式的控件，个人觉得不太好用。可惜不能在样式里选择自己定义的样式

感谢楼主分享 !

代码怎么保存为固定样式

做的很漂亮，就是这个代码看起来太复杂了

居然还可以这样，挺好的

这个画面太精致了。点赞

非常实用，感谢分享

为什么水滴社区不能做一个收藏帖子的功能,这样就可以收藏了

关键词：样式、控件、风格、按钮、插入图片、圆角变形、PS、切图、编辑画面、美化、免责声明

大纲：
1. 引言
2. 插入图片进行按钮风格样式设置的问题
   2.1 不同按钮长宽比导致的圆角变形
   2.2 PS重新切图的繁琐操作
3. 发现并使用样式进行控件风格美化
   3.1 什么是样式
   3.2 样式的优势与应用
4. 个人设计的一些简单样式分享
5. 总结

正文：
1. 引言
在触摸屏上，我们经常使用按钮来进行交互操作。为了使界面更加丰富，我们可以通过插入图片来改变按钮的风格样式。然而，不同按钮的长宽比可以导致插入的图片出现圆角变形的问题，而使用PS进行重新切图又相对繁琐。在编辑画面的过程中，我偶然发现了样式这一功能，可以通过调整样式来实现控件的美化效果。在本文中，我将分享一些我个人设计的简单样式，并希望能给大家提供一些思路。

2. 插入图片进行按钮风格样式设置的问题
2.1 不同按钮长宽比导致的圆角变形
在使用插入图片来设置按钮风格样式时，不同按钮的长宽比会导致插入的图片出现圆角变形的问题。由于按钮的形状可能是矩形、正方形或其他非标准形状，而插入的图片通常是矩形的，因此在按钮上显示的图片就会出现变形。这种变形影响了按钮的美观度，并且给用户带来了不好的体验。

2.2 PS重新切图的繁琐操作
为了解决圆角变形的问题，一种常见的做法是使用Photoshop（PS）等工具对插入的图片进行重新切图。但是，这个过程相对繁琐，需要准确地测量按钮的尺寸，然后在PS中手动调整切图的尺寸和角度，最后再将切好的图片插入到按钮中。这种方法不仅耗费时间，还需要一定的PS技术。

3. 发现并使用样式进行控件风格美化
3.1 什么是样式
在编辑画面的过程中，我偶然发现了样式这个功能。样式可以理解为一组预定义的属性集合，用于定义控件的外观和行为。它可以包括背景颜色、边框样式、字体大小和颜色等属性。通过使用样式，我们可以快速而方便地改变控件的风格样式，无需手动调整每个按钮的属性，从而节省时间和精力。

3.2 样式的优势与应用
使用样式进行控件风格美化具有以下优势：
- 灵活性：样式可以随时修改和更新，从而实现不同风格的切换。
- 统一性：通过使用统一的样式，可以使界面上的按钮风格保持一致，增强用户的可识别性。
- 易用性：使用样式只需要简单的操作，即可实现控件风格的改变，无需繁琐的重新切图操作。

4. 个人设计的一些简单样式分享
在使用样式进行控件风格美化的过程中，我设计了一些简单的样式，并将其分享给大家。这些样式包括背景颜色、阴影效果、边框样式等。通过应用这些样式，可以让按钮在外观上更加吸引人，从而提升用户的使用体验。同时，我也希望通过分享这些样式，给大家提供一些创作思路和灵感，以便大家可以根据自己的需求进行定制化的控件风格设置。

5. 总结
通过样式设置控件的风格样式，是一种快速、灵活、方便的方法。与传统的插入图片和重新切图相比，使用样式可以节省时间和精力，并且保持按钮风格的统一性。在设计过程中，我们可以根据自己的需求和创意进行样式的定制，以达到更好的美化效果。希望本文能给大家带来一些思路和启发，使大家在控件风格设置上有更多的选择和创造力。最后，再次声明本文内容的来源和版权归属，感谢大家的理解和支持。
                                                                                                                                                                                                                                                 以上内容来自  AI机器人，如需继续对话，则在此回答下“点击回复” 或者 在提问时  “@机器人”！禁止 "黄赌毒及政治敏感"，违者封号，严重者 提交 网警公安部门。本站不对内容真实性负责，AI机器人有时候会乱说一通……

关键词：样式设置、控件风格、触摸屏按钮、插入图片、背景、圆角变形、PS、切图、美化控件

文章大纲：
1. 引言
   - 介绍通过样式设置控件风格的方法和目的。
2. 插入图片与风格样式
   - 解释如何使用插入图片来改变控件风格样式。
   - 提到不同按钮的长宽比对使用相同图片作背景的影响。
3. 样式的功能与优势
   - 简述样式的作用和优势，如节省时间和提高美观度。
4. 制作样式的方法
   - 提及在编辑画面中发现样式这个功能。
   - 介绍通过改变样式来实现美化控件的方法。
5. 分享样式示例
   - 具体展示一些自己设计的样式，以提供思路和参考。
6. 结语
   - 强调免责声明和感谢读者的理解和支持。

正文：

1. 引言
通过样式设置控件风格是一种常见的方法，可以使触摸屏按钮的画面更丰富，增加用户的视觉享受。在实际应用中，我们常常会遇到一个问题，即不同按钮的长宽比不同，使用相同的图片作为背景会导致按钮的圆角变形。为了解决这一问题，我们可以尝试使用样式设置来改变控件的风格样式。本文将介绍使用样式设置的方法，并分享一些简单的样式示例，希望能为大家提供一些思路。

2. 插入图片与风格样式
在触摸屏按钮中，我们可以通过插入图片来改变按钮的风格样式。然而，由于不同按钮的长宽比存在差异，使用相同图片作为背景会导致圆角变形的情况。解决这一问题的方法之一是在PS等图像处理软件中重新切图，但这需要耗费一定的时间和精力。另一种更为简便的方法是使用样式设置来实现控件的美化。

3. 样式的功能与优势
样式设置具有很多功能和优势。首先，通过样式设置，我们可以快速而方便地改变控件的风格样式，节省了重新切图的时间和精力。其次，样式设置可以保持控件的圆角等效果不变形，避免了由于图片拉伸导致的不美观的问题。此外，样式设置还能够给控件添加渐变、阴影等效果，进一步提升控件的美观度。

4. 制作样式的方法
在编辑画面的过程中，我们可以通过样式设置来实现美化控件的效果。要制作一个样式，我们可以先选择一个按钮，然后在样式设置中进行操作。通过改变按钮的背景颜色、渐变、阴影、字体等属性，我们可以轻松地调整控件的风格样式。在制作样式的过程中，我们还可以保存样式，方便以后直接应用在其他按钮上。

5. 分享样式示例
下面是一些我自己设计的样式示例，供大家参考和借鉴。首先是一个简洁明快的样式，背景颜色为蓝色，字体为白色，给人一种清新的感觉。其次是一个高雅典雅的样式，背景采用渐变效果，字体使用了优美的字体，整体给人一种高贵的氛围。最后是一个时尚个性的样式，背景为黑色，字体使用了鲜艳的橙色，营造出一种前卫的感觉。这些样式仅作为参考，大家可以根据自己的需求和喜好进行调整和定制。

6. 结语
通过样式设置控件风格是一种简便而有效的方法。本文介绍了使用样式设置来改变控件风格样式的方法和优势，并分享了一些样式示例。希望这些内容能为大家提供一些思路和参考，让大家在实际应用中能够更好地美化控件。最后，再次强调免责声明，如果文章内容侵犯了您的权益，请及时与我们联系，我们将及时删除侵权内容。感谢您的理解和支持！
                                                                                                                                                                                                                                                 以上内容来自  AI机器人，如需继续对话，则在此回答下“点击回复” 或者 在提问时  “@机器人”！禁止 "黄赌毒及政治敏感"，违者封号，严重者 提交 网警公安部门。本站不对内容真实性负责，AI机器人有时候会乱说一通……