qml 2 Rectangle

最新推荐文章于 2024-11-15 22:11:31 发布

安逸凡

最新推荐文章于 2024-11-15 22:11:31 发布

阅读量139

点赞数

文章标签： qt

本文链接：https://blog.csdn.net/anyifanzheng/article/details/131759007

版权

该文演示了如何使用QtQuick进行图形界面设计，包括Rectangle组件的使用，如设置颜色、边框、圆角、旋转和缩放等属性，以及利用anchors进行布局管理，如居中、相对位置和间距设定。

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

Rectangle：

坐标：

这里的坐标原点在左上角，向右x+ 向下y+

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    //opacity :0.8

    Rectangle
    {
        anchors.centerIn: parent
        id:name1
        width: 100
        height: 50
        x:50
        z:100
        color: "#000000"
        border.width: 5  //边框的大小
        border.color: "red"  //边框的颜色
        radius: 10          //圆角
    }

    Rectangle
    {
        x:50
        y:50
        width: 50
        height: 50
        color: "black"
        rotation: 80//旋转
        scale: 2  //缩放
    }

    Rectangle
    {
        width: 100
        height: 50
        y:20
        color: "red"
        anchors.left: name1.right   //当前控件的左边等于name1控件的右边
        anchors.margins: 20

        anchors.top: name1.top   //当前控件的上边等于name1控件的上边
        anchors.topMargin: 5     //当前控件的上边和name1上边差5
    }
}

运行效果：

在这里插入图片描述

代码解析：

anchors.centerIn:parent 居中父类窗口，这里的父类窗口是Window == （如果当前控件中有这个那么，x，y会失效）==
X：偏置，相对于0，0
Z：当前控件的”高度“，如果一个控件有z这个参数，一个没有，那么有z参数的控件会显示在没有z参数的上面，如果都没有会按照代码顺序来排，后写的在上面，如果都有z参数谁的值小谁在上面
border.width:边框的大小，（边框大小算在控件的大小内）
border.color: 边框颜色
radius:圆角大小
rotation: 旋转角度
scale:缩放
anchors.left: name1.right ：当前控件的左边等于name1控件的右边
anchors.margins: 20：当前控件和name1控件的间距是20 == 得和上一行配合使用 ==
anchors.top: name1.top ：当前控件的上边等于name1控件的上边
anchors.topMargin: 5 ：当前控件的上边和name1上边差5 == 得和上一行配合使用 ==