qml 矩形 rectangle

基础代码

效果图

代码1

注:边框宽度或高度是矩形的大小向里的，假设矩形宽度为100边框宽度为30，那么有效宽度为70

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    
    
    visible: true
    width: 350
    height: 200
    title: qsTr("main.qml")

    Rectangle {
    
    
        width: 100              //宽度
        height: 100             //高度
        color: "red"            //填充颜色
        border.color: "black"   //边框颜色
        border.width: 5         //边框宽度
        radius: 10              //边框角度(单位:度 即90为圆)
    }
}

代码2 border的另一种写法

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    
    
    visible: true
    width: 350
    height: 200
    title: qsTr("main.qml")

    Rectangle {
    
    
        width: 100              //宽度
        height: 100             //高度
        color: "red"            //填充颜色

        /* 效果跟上面代码一样 */
        border{
    
    
            color: "black"      //边框颜色
            width: 5            //边框宽度
        }

        radius: 10              //边框角度(单位:度 即90为圆)
    }
}

渐变色

效果图

代码

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    
    
    visible: true
    width: 350
    height: 400
    title: qsTr("main.qml")

    Rectangle {
    
    
        y: 0; width: 80; height: 80
        color: "lightsteelblue"
    }

    Rectangle {
    
    
        y: 100; width: 80; height: 80
        
        //渐变色
        gradient: Gradient {
    
    
            GradientStop {
    
     position: 0.0; color: "lightsteelblue" } //开始颜色

            /*中间可以加无数个点，position范围为0.0~1.0*/

            GradientStop {
    
     position: 1.0; color: "blue" }           //结束颜色
        }
    }

    Rectangle {
    
    
        y: 200; width: 80; height: 80
        rotation: 90
        gradient: Gradient {
    
    
            GradientStop {
    
     position: 0.0; color: "lightsteelblue" }
            GradientStop {
    
     position: 1.0; color: "blue" }
        }
    }
}

渐变色库资源使用

效果图

代码

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    
    
    visible: true
    width: 350
    height: 200
    title: qsTr("main.qml")

    //渐变色库资源方法1
    Rectangle {
    
    
        y: 0; width: 80; height: 80
        gradient: Gradient.NightFade
    }

    //渐变色库资源方法2
    Rectangle {
    
    
        y: 100; width: 80; height: 80
        gradient: "NightFade"
    }
}

antialiasingc(图形保真)属性

默认为true

效果图

第一个rectangle的antialiasingc为false
第二个rectangle的antialiasingc为true，看起来更平滑

代码

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    
    
    visible: true
    width: 350
    height: 600
    title: qsTr("main.qml")

    //antialiasing默认为true
    Rectangle {
    
    
        antialiasing: false
        y: 0; width: 200; height: 200
        color:"blue"
        radius: 90
    }

    Rectangle {
    
    
        y: 300; width: 200; height: 200
        color:"blue"
        radius: 90
    }
}