Init

07-Other/Qt/QtQuick/QtQuick自定义主题以及控件样式.md

@@ -0,0 +1,118 @@
+## 自定义控件样式
+请在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应用”