企业网站建设都需要什么准备,集团网站目标,平台页面设计,商业网站建设所用软件文章目录 1、概念2、基本语法3、给控件应用QSS设置4、选择器1、子控件选择器2、伪类选择器 5、样式属性box model 6、实例7、登录界面 1、概念
参考了CSS#xff0c;都是对界面的样式进行设置#xff0c;不过功能不如CSS强大。
可通过QSS设置样式#xff0c;也可通过C代码… 文章目录 1、概念2、基本语法3、给控件应用QSS设置4、选择器1、子控件选择器2、伪类选择器 5、样式属性box model 6、实例7、登录界面 1、概念
参考了CSS都是对界面的样式进行设置不过功能不如CSS强大。
可通过QSS设置样式也可通过C代码设置样式但QSS使用优先级更高。
2、基本语法
创建QWidget项目 选择器表明是要对哪个widget即控件进行设置。属性名属性值这个键值对就是具体的设置
比如 Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui-setupUi(this);ui-pushButton-setStyleSheet(QPushButton { color: red; });
}对一个控件进行设置后这个控件的子控件也会应用该设置。如果要对界面中每个按钮都设置那么就可以设置界面的样式
this-setStyleSheet(QPushButton { color: red; });这样是对界面中所有按钮进行设置。这是对于界面这个控件的设置而全局设置在main.cpp中写方便维护。
#include widget.h#include QApplicationint main(int argc, char *argv[])
{QApplication a(argc, argv);// a表示整个应用程序a.setStyleSheet(QPushButton { color: red; });Widget w;w.show();return a.exec();
}如果全局和控件设置中都写了对按钮的设置两个设置一样那么按照控件的设置来显示。
如果两个设置不一样比如全局设置了颜色而控件设置中是大小那么最终的样式就是既有大小又有颜色这是叠加即CSS的层叠性QSS也有这个性质。
3、给控件应用QSS设置
通常来说QSS代码会放到单独的文件中除非代码很简单那可以直接和C代码放在一起。
通过qrc来管理样式文件。手动创建一个qss空文件改扩展名为qss即可然后添加到qrc中路径设置为根目录。
编写qss文件
QPushButton {color: red;
}main.cpp中引入qss文件
#include widget.h#include QApplication
#include QFileQString loadQSS()
{QFile file(:/style.qss);file.open(QFile::ReadOnly);QString style file.readAll();file.close();return style;
}int main(int argc, char *argv[])
{QApplication a(argc, argv);a.setStyleSheet(loadQSS());Widget w;w.show();return a.exec();
}QSS中更方便也实用的方法是在ui文件里写右键控件改变样式表。
QPushButton { color: red; }样式表里这样写就设置上了。不过这样排查起来比较麻烦。
4、选择器
选择所有的widget是*在之前的按钮选择中QPushButton就是选择所有的PushButton和其子控件.QPushButton是选择所有的PushButton不包含子控件。 QString style QPushButton { color: red; };style #pushButton_2 { color: green; };style QLineEdit, QLabel { color: orange; };id选择器优先级比类型选择器优先级更高。
1、子控件选择器
一个控件有哪些子控件查看Qt文档 // main.cppQString style QComboBox::down-arrow { image: url(:/down.png); };
a.setStyleSheet(style);2、伪类选择器
这个选择器选择的是控件的状态
常见伪类选择器 unchecked则表示未被选中的状态。更多的查看文档。
对一个按钮设置 QString style QPushButton { color: red; };style QPushButton:hover { color: green; };a.setStyleSheet(style);当然这个也可以通过事件来写。
5、样式属性
查看文档并非所有的控件都可以设置样式。
box model 图中自外向内分别是外边距边框内边距内容。Qt中每个widget都是矩形。 复合属性表示一个属性有多个子属性比如margin有上下左右四个方向可设置。
6、实例
按钮样式
// 样式表QPushButton {font-size: 20px;border: 2px solid rgb(170, 85, 255);border-radius: 10px;
}QPushButton:pressed {background-color: rgb(170, 85, 255);
}复选框样式
在项目的qrc里保存好几个图标
QCheckBox {font-size: 20px;
}QCheckBox::indicator {vidth: 20px;height: 20px;
}QCheckBox::indicator:unchecked {image: 选择添加资源
}QCheckBox::indicator:unchecked:hover {image: 选择添加资源
}QCheckBox::indicator:unchecked:pressed {image: 选择添加资源
}QCheckBox::indicator:checked {image: 选择添加资源
}QCheckBox::indicator:checked:hover {image: 选择添加资源
}QCheckBox::indicator:checked:pressed {image: 选择添加资源
}单选框同样写法。
输入框样式 QLineEdit {border-vidth: 2px;border-color: rgb(170, 170, 255);border-style: solid;border-radius: 20px;padding-left: 10px; color: rgb(85, 0, 255);font-size: 18;selection-color: rgb(255, 170, 255);
}selection-color设置选中文本时的文字颜色。
列表框样式
QListWidget::item:hover {background-color: rgb(170, 255, 127);
}QListWidget::item:selected {background-color: rgb(170, 85, 255);
}渐变色需要x1y1x2y2参数坐标取值都是0或1比如x1y1都是0x2y2都是1那么就是从左上到右下的渐变。
QListView::item:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FAFBFE, stop: 1, #DCDEF1);
}QListView::item:selected {border: 1px solid #6a6ea9;background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #6a6ea9, stop: 1, #888dd9);
}菜单样式
创建QMainwindow项目 QMenuBar {background-color: white;spacing: 3px;
}QMenuBar::item {border-radius: 10px;padding: 3px 10px;background-color: rgb(170, 255, 127);
}QMenuBar::item:selected {background-color: rgb(170, 170, 0);
}QMenu::item {border: 2px solid transparent;padding: 2px 10px;
}QMenu::item:selected {border: 2px solid green;
}QMenu::separator {height: 2px;background-color: orange;margin: 0 4px;
}QMenuBar::item表示选中菜单栏中的元素spacing表示菜单之间的间隔border的transparent能让在选中菜单项时菜单项的文字不会移动一下其操作是在没被选中时加了无颜色边框做到和被选中时同样的设置separator是在设置分隔线。
7、登录界面
创建一个QWidget界面放两个Line EditRadio ButtonPushButton到界面上。通过最左上角的按钮把它们放到一块。 输入框和按钮的最小高度和最大高度都设为50。 给上面的控件套一个和窗口大小一样的QFrame控件在QFrame中设置背景图。设置背景图有background-imageborder-image前者设置固定大小的图片后者设置的图片可以随控件大小而变化。右击右上角区域的QWidget改变样式表
QFrame {border-image: url(:/clouds.jpg);
}QLineEdit {color: #8d98a1;background-color: #405361;padding: 0 5px;font-size: 20px;border: none;border-radius: 10px;
}QCheckBox {color: white;font-size: 18px;
}QPushButton {font-size: 20px;color: white;background-color: #555;border-radius: 10px;
}QPushButton:pressed {color: blakc;background-color: rgb(0, 255, 0);
}两个输入框的placeholderText改为请输入用户名请输入密码密码那个框的echoMode改为Password。
结束。
