如何设置Qt Quick Controls2的风格

Posted 2023-04-12

1
Qt Quick Controls2的默认风格是一种朴素，轻量的风格，这种风格体现在控件的所有方面。其好处就是能够最大程度提高你的App性能
2
Qt Quick还根据谷歌提出的Material Design设计规则，提供了一套界面精美诱人的风格方案，相对默认风格来说，这种风格会更消耗系统资源
3
Qt Quick还根据微软提出的Universal Design设计规则，提供了一套界面精美诱人的风格方案，相对默认风格来说，这种风格会更消耗系统资源
4
配置应用程序界面风格的一种方法是在C++源文件的main.c中，通过QQuickStyle的静态方法setStyle来设置，比如下面的代码将App风格设置为Material Design
5
另一种配置程序界面风格的方法是使用配置文件qtquickcontrols2.conf
该配置文件最终会作为程序的资源文件被编译进程序当中，下面的配置代码指定了目标程序使用Material Design规则，并且主题为light。为了使该配置文件生效，该文件必须被编译进应用程序中，作为程序的资源文件
6
使用Material Style，需要import QtQuick.Controls.Material 2.0
其附加属性有：
1. accent，color类型，表示重点色，默认是Material.Pink
2. primary，color类型，表示优选色，默认是 Material.Indigo
3. backbround，color类型，表示背景色，默认由主题指定（light或者dark）
4. elevation，int类型，表示海拔高度，值越大，阴影越深，该值与具体控件相关
5. foreground，color类型，表示前景色，默认值由主题指定（light或者dark）
6. theme，枚举类型，表示主题，默认是Material.Light，也可修改为Material.Dark
所有的属性都可以被任何Item或者Window单独设置，且可以传递给子对象Item。可以在QML文档中设置，也可以在配置文件中设置全局的，但是在QML文档中设置的优先级更高
7
系统预定义的颜色有很多，并且在不同的主题下有不同的表现。
Material Style有一个附件方法：
color color(enumeration predefined, enumeration shade)
可以返回一个实际有效的color值，这个值由预定义的Material color和用户指定的阴影值给出，shade缺省为Material.Shade500 参考技术A 1、想在板子上运行用QT编好的程序，必须要在PC的linux系统里用QT编吗看 不需要.但是必须经过交叉编译. (window 无法进行交叉编译.) 2、在windows系统里编好的QT程序，经过交叉编译后能直接运行在板子上吗看还是板子需要弄个QT环境啥的?就是往里。
qt designer是用来设计Qt的C++代码界面的。designer也有源代码，就是***.ui那个文件，编译的时候，编译器把***.ui转换成moc_****.cpp合并到代码中了。
但是开发C++界面对某些用户有难度，所以，在Qt现有的代码基础上进行扩展，增加了一个QtQuick库。QtQuick的代码不是C++，而是qml脚本（类似于网页中的javascript）。QtQuick完成qml脚本到c++的转换（就像网页中的javascript不需要编译，可以直接运行一样）。这样不需要编译，就可以直接改脚本来实现功能，在嵌入式设备里用起来很方便。

Qt Quick Controls 2.14 如何设置ScrollView的样式

【中文标题】Qt Quick Controls 2.14 如何设置ScrollView的样式

【英文标题】：Qt Quick Controls 2.14 how to style ScrollView

【发布时间】：2020-09-15 17:02:16

【问题描述】：

目前尚不清楚如何设置 QML ScrollView 的样式。 我希望 ScrollView 具有以下样式，但将错误 style 作为无效属性。

import QtQuick 2.0
import QtQuick.Controls 2.14
import QtQuick.Controls.Styles 1.4

ScrollView 
    style: ScrollViewStyle 
        handle: Rectangle 
            implicitWidth: 50
            implicitHeight: 30
            color: "red"
        
        scrollBarBackground: Rectangle 
            implicitWidth: 50
            implicitHeight: 30
            color: "black"
        
        decrementControl: Rectangle 
            implicitWidth: 50
            implicitHeight: 30
            color: "green"
        
        incrementControl: Rectangle 
            implicitWidth: 50
            implicitHeight: 30
            color: "blue"
        
    
    //...

更新：

import QtQuick 2.0
import QtQuick.Controls 2.14

ScrollView 
    id: myScrollView
    width: 700
    height: parent.height
    clip: true

    ScrollBar.vertical: ScrollBar 
        id: scrollBar
        parent: myScrollView.parent
        policy: ScrollBar.AlwaysOn
        anchors.top: myScrollView.top
        anchors.left: myScrollView.right
        anchors.bottom: myScrollView.bottom
        height: myScrollView.availableHeight

        contentItem: Rectangle 
            implicitWidth: 16
            implicitHeight: 10
            anchors.leftMargin: 10

            radius: 16
            color: "blue"
        
    

    ListView 
        id: myListView
        anchors.fill: parent

    .... Rest of the code ....

通过上面的代码，我可以获得垂直滚动条的样式，但是通过这段代码，我看到了两个滚动条。一种是浅灰色的，尺寸很小，一种是蓝色的，按照上面的样式。

蓝色滚动条的高度也不符合样式。

【参考方案1】：

您将 Qt Quick Controls 1 与 Qt Quick Controls 2 混淆了。QQC2 不使用style 属性。这是docs。 ScrollView 的基本思想是您可以更改 background 以及附加的 ScrollBar。

ScrollView 
    background: ... // This changes what's drawn in the background

    ScrollBar.vertical: ScrollBar  ... 
    ScrollBar.horizontal: ScrollBar  ... 

ScrollBar 本身也可以通过更改background 或contentItem 来自定义。

ScrollBar 
    background: ... // Change the background of the scrollbar
    contentItem: ... // Change the scroll indicator

更新：实际上，我在尝试时看到了与您相同的行为。我只是在关注文档，所以那里可能存在 Qt 错误。好消息是，由于您只是想滚动ListView，ScrollView 实际上是不必要的。你可以这样做：

    ListView 
        id: listView
        width: 200
        height: 200
        model: 100
        clip: true
        delegate: ItemDelegate 
            text: modelData
        

        ScrollBar.vertical: ScrollBar 
            background: Rectangle  color: "red" 
            contentItem: Rectangle  implicitWidth: 10; implicitHeight: 10; color: "blue" 
        
    

这次我自己试过了，效果很好。

【讨论】：

对于ScrollBar.vertical: ScrollBar ... 的行出现错误Cannot assign a value directly to a grouped property

确保删除此行：import QtQuick.Controls.Styles 1.4。来自QQC1。

谢谢，但是当我添加 contentItem: 并将颜色设置为红色（用于测试）时进行测试，我没有看到设置了红色，甚至我的滚动指示器变得非常小并且我的列表没有滚动。

添加了代码 sn-p。我可以将样式设置为滚动条，但现在我看到两个垂直滚动条。一种符合我的风格，一种我认为是默认的。