qml 矩形 rectangle

最新推荐文章于 2024-07-23 16:33:57 发布

朴勇佑

最新推荐文章于 2024-07-23 16:33:57 发布

阅读量853

点赞数 1

分类专栏： qt

本文链接：https://blog.csdn.net/yongwoozzang/article/details/111239361

版权

qt 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了使用QML实现矩形的基础代码，包括边框样式、渐变色效果以及图形保真（antialiasing）属性的应用。通过实例展示了如何设置矩形的尺寸、颜色、边框和渐变，并讨论了antialiasing的启用与禁用对视觉效果的影响。

摘要由CSDN通过智能技术生成

基础代码

效果图

在这里插入图片描述

代码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
    }
}