qt quick qml 之颜色(color) 渐变色(gradient)

qml 中 color 支持颜色格式 "blue"、"red" 或者 "#AARRGGBB" 或者 Qt.rgba()方法。

Gradient 渐变色通过两个或多个颜色值来指定，GradientStop 来指定颜色值(0.0-1.0) 和位置position(0.0-1.0)

 

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
   Rectangle{
       id:color_1;
       width: 50;
       height: 50;
       anchors.left: parent;
       color:"red";
   }
   Rectangle{
       id:color_2;
       width: 50;
       height: 50;
       anchors.left: color_1.right;
       anchors.leftMargin: 4;
       color:"#800000B0";
   }
   Rectangle{
       id:color_3;
       width: 50;
       height: 50;
       anchors.left: color_2.right;
       anchors.leftMargin: 4;
       color: Qt.rgba(0.5,0.3,0.2,1.0);

   }
   Rectangle{
       width: 50;
       height: 50;
       anchors.left: color_3.right;
       anchors.leftMargin: 4;
       gradient:Gradient{
           GradientStop{position: 0.0;color:"red";}
           GradientStop{position: 0.2;color:"palegreen";}
           GradientStop{position: 0.5;color:"#ffe4b5";}
       }
   }

}