“线性渐变”阻碍了 QML 中的所有底层项目

Posted

技术标签:

【中文标题】“线性渐变”阻碍了 QML 中的所有底层项目【英文标题】:"Linear gradient" hampers all underlying items in QML 【发布时间】:2020-08-14 17:03:34 【问题描述】:

我想为我的应用使用Client-side Decoration,并为标题栏的背景渐变添加了以下代码:

Page 
    anchors.fill: parent
    header: ToolBar 
        LinearGradient 
            anchors.fill: parent
            gradient: Gradient 
                GradientStop  position: 0.0; color: "#555555" 
                GradientStop  position: 1.0; color: "black" 
            
        

但它妨碍了所有底层按钮,而且搜索栏也变得毫无用处。 但是当我使用ToolBarbackground 属性时没有问题:

background: 
         color: "#31333600"

有没有办法降低标题栏背景?

*我在LinearGradient之后添加了按钮和TextField

【问题讨论】:

【参考方案1】:

首先,确保您使用的是 Quick Controls 2 工具栏并按照此处的说明对其进行自定义:

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-toolbar

例如:

Page 
    anchors.fill: parent
    header: ToolBar 
        background: LinearGradient 
            implicitHeight: 40
            gradient: Gradient 
                GradientStop  position: 0.0; color: "#555555" 
                GradientStop  position: 1.0; color: "black" 
            
        
    

这里有一些关于implicitHeight 的文档:

https://doc.qt.io/qt-5/qml-qtquick-item.html#implicitHeight-prop

工具栏将从背景的implicitHeight 设置其隐式高度。

【讨论】:

implicitHeight 是什么意思?我找不到任何文档。 doc.qt.io/qt-5/qml-qtquick-item.html#implicitHeight-prop

以上是关于“线性渐变”阻碍了 QML 中的所有底层项目的主要内容,如果未能解决你的问题,请参考以下文章

Canvas 线性渐变原理详解

CSS中的渐变——线性渐变

一手遮天 Android

Canvas使用渐变之-线性渐变详解

如何给SVG填充和描边应用线性渐变

渐变色