118 lines
3.2 KiB
Markdown
118 lines
3.2 KiB
Markdown
|
## 自定义控件样式
|
|||
|
|
请在Qt帮助索引中输入Customizing a Control进行查看<br>
|
|||
|
|
不过实际用下来感觉除非你想自己实现一套效果复杂的UI或是创造一个全新控件，比如：给UI添加模糊、虚化等ShaderEffect效果。不然不推荐用这个。比如本人就是想把CheckBox的大小改小，同时不改变显示样式，这个就很难办到。<br>
|
|||
|
|
## 系统自带的几种主题风格
|
|||
|
|
1. Default Style
|
|||
|
|
2. Fusion Style
|
|||
|
|
3. Imagine Style
|
|||
|
|
4. Material Style
|
|||
|
|
5. Universal Style
|
|||
|
|
其中Imagine Style是使用图片定制风格，图片需要按照指定的命名来放置，具体操作请看文档：
|
|||
|
|
http://doc.qt.io/qt-5/qtquickcontrols2-imagine.html
|
|||
|
|
|
|||
|
|
### 在c++中使用QQuickStyle
|
|||
|
|
```
|
|||
|
|
QQuickStyle::setStyle("Material");
|
|||
|
|
```
|
|||
|
|
具体内容请在帮助索引中搜索 QQuickStyle
|
|||
|
|
### 命令行中设置
|
|||
|
|
```
|
|||
|
|
./app -style material
|
|||
|
|
```
|
|||
|
|
### 在Qt的环境变量中设置
|
|||
|
|
```
|
|||
|
|
QT_QUICK_CONTROLS_STYLE=universal ./app
|
|||
|
|
```
|
|||
|
|
### 使用配置文件
|
|||
|
|
```
|
|||
|
|
[Controls]
|
|||
|
|
Style=Material
|
|||
|
|
```
|
|||
|
|
官方的gallery案例用的是这种。
|
|||
|
|
网上有个哥们用的是：
|
|||
|
|
```
|
|||
|
|
if (sty == "mat") {
|
|||
|
|
qputenv("QT_QUICK_CONTROLS_CONF", ":/qtquickcontrols2material.conf");
|
|||
|
|
} else {
|
|||
|
|
qputenv("QT_QUICK_CONTROLS_CONF", ":/qtquickcontrols2universal.conf");
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
本人用的是gallery案例中的方式，感觉通过设置环境变量来指定对应的conf不太灵活，所以上述方式仅供参考。<br>
|
|||
|
|
想要看懂conf文件需要看以下两篇文档
|
|||
|
|
## Qt Quick Controls 2 Configuration File
|
|||
|
|
文档：http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
|
|||
|
|
在默认情况下将文件放置于:/qtquickcontrols2.conf（也就是根目录）就会生效（需要设置QQuickStyle）
|
|||
|
|
### Controls Section
|
|||
|
|
Style：定义全局控件样式
|
|||
|
|
### XXXX Section
|
|||
|
|
对对应的style进行设置
|
|||
|
|
### Font Configuration
|
|||
|
|
设置字体,有以下几个属性：
|
|||
|
|
1. Family
|
|||
|
|
2. PointSize
|
|||
|
|
3. PixelSize
|
|||
|
|
4. StyleHint
|
|||
|
|
5. Weight
|
|||
|
|
6. Style
|
|||
|
|
### Palette Configuration
|
|||
|
|
Palette我不太清楚是干什么的
|
|||
|
|
## Material Style
|
|||
|
|
文档：http://doc.qt.io/qt-5/qtquickcontrols2-material.html#material-theme-attached-prop<br>
|
|||
|
|
你可以单独给某一些控件设置style,以下是对应的属性：
|
|||
|
|
### accent
|
|||
|
|
```
|
|||
|
|
Button {
|
|||
|
|
text: qsTr("Button")
|
|||
|
|
highlighted: true
|
|||
|
|
Material.accent: Material.Orange
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
### background
|
|||
|
|
```
|
|||
|
|
Button {
|
|||
|
|
text: qsTr("Button")
|
|||
|
|
highlighted: true
|
|||
|
|
Material.background: Material.Teal
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
### elevation
|
|||
|
|
控制阴影的属性
|
|||
|
|
```
|
|||
|
|
Pane {
|
|||
|
|
width: 120
|
|||
|
|
height: 120
|
|||
|
|
|
|||
|
|
Material.elevation: 6
|
|||
|
|
|
|||
|
|
Label {
|
|||
|
|
text: qsTr("I'm a card!")
|
|||
|
|
anchors.centerIn: parent
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
### foreground
|
|||
|
|
```
|
|||
|
|
Button {
|
|||
|
|
text: qsTr("Button")
|
|||
|
|
Material.foreground: Material.Pink
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
### primary
|
|||
|
|
### theme
|
|||
|
|
三个可选项：
|
|||
|
|
1. Material.Light
|
|||
|
|
2. Material.Dark
|
|||
|
|
3. Material.System
|
|||
|
|
```
|
|||
|
|
Pane {
|
|||
|
|
Material.theme: Material.Dark
|
|||
|
|
|
|||
|
|
Button {
|
|||
|
|
text: qsTr("Button")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
## 自定义主题
|
|||
|
|
文档：http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#creating-a-custom-style
|
|||
|
|
推荐：http://www.cnblogs.com/Fuss/archive/2015/03/20/4353698.html<br>
|
|||
|
|
代码没怎么看，Control用的是1.0，可以作为参考，Github上有关这种UI定制的代码还是比较多，建议先去知乎搜索 “请问有哪些优质又开源的qml应用”
|