QML渐变色

 Rectangle {
        id: tab_btn
        width: 80
        height: parent.height
        color: "black"
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#292929" }
            GradientStop { position: 1.0; color: "#828282" }
        }
     Row{
    ....//color全为“gray”
  
    } }

 

转载于:https://www.cnblogs.com/judes/p/11277672.html

对于在QML中创建不规则形状渐变色,可以使用ShaderEffect元素和自定义着色器来实现。下面是一个示例代码,展示了如何创建一个具有不规则形状的渐变色效果: ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 ApplicationWindow { visible: true width: 400 height: 400 Rectangle { width: 200 height: 200 ShaderEffect { anchors.fill: parent property variant source: ShaderEffectSource { sourceItem: parent hideSource: false } property real gradientStart: 0.3 property real gradientEnd: 0.7 fragmentShader: " varying lowp vec2 qt_TexCoord0; uniform sampler2D source; void main() { vec4 color = texture2D(source, qt_TexCoord0); // 计算渐变的位置 float gradientPos = (qt_TexCoord0.x - gradientStart) / (gradientEnd - gradientStart); // 应用渐变 color.rgb *= mix(vec3(1, 1, 1), vec3(1, 0, 0), gradientPos); gl_FragColor = color; } " } } } ``` 在上面的示例中,我们使用了一个矩形作为背景,并在其上应用了一个ShaderEffect元素。ShaderEffect元素使用了一个自定义的着色器(fragmentShader),其中通过计算纹理坐标和渐变位置来应用渐变色效果。你可以根据需要自定义渐变的起始和结束位置,以及渐变色的具体表现。 请注意,为了使ShaderEffect生效,我们还使用了ShaderEffectSource元素作为其输入源。这允许ShaderEffect使用矩形作为纹理输入,以便在其上应用着色器的效果。 希望这个示例能够帮助你创建不规则形状的渐变色效果!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值