BlueRoseNote/07-Other/Qt/QtQuick/QtQuick自定义主题以及控件样式.md
2023-06-29 11:55:02 +08:00

3.2 KiB
Raw Blame History

自定义控件样式

请在Qt帮助索引中输入Customizing a Control进行查看
不过实际用下来感觉除非你想自己实现一套效果复杂的UI或是创造一个全新控件比如给UI添加模糊、虚化等ShaderEffect效果。不然不推荐用这个。比如本人就是想把CheckBox的大小改小同时不改变显示样式这个就很难办到。

系统自带的几种主题风格

  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不太灵活所以上述方式仅供参考。
想要看懂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
你可以单独给某一些控件设置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
代码没怎么看Control用的是1.0可以作为参考Github上有关这种UI定制的代码还是比较多建议先去知乎搜索 “请问有哪些优质又开源的qml应用”