qml 知识点 Rectangle的属性1_qml rectangle 设置1侧边框的颜色

import QtQuick 2.15
import QtQuick.Window 2.15
 
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    opacity:1
 
 
    Rectangle{
        z:1  //两个层叠控件 通过z轴 调整
        x:30
        y:30
        id:rect1
        width:100
        height:50
        color: "black"
        focus:true
        //anchors.fill: parent //充满父控件
        MouseArea{
 
          anchors.fill:parent
          //点击事件
          onClicked: {
              console.log("on click")
              parent.focus
          }
        }
        //捕获键盘return事件
        Keys.onReturnPressed: {
            console.log("on Return Pressed")
        }
 
    }
    //通过坐标偏移 获取控件的坐标
    Rectangle{
        x:rect1.x+rect1.width +20
        y:rect1.y
        id:rect2
        width:100
        height:50
        color: "blue"
        focus:false
 
    }
    //通过瞄点 获取控件坐标
    Rectangle{
        id:rect3
        width:100
        height:50
        color: "blue"
        focus:false
        anchors.left:rect2.right
        anchors.leftMargin: 20
        anchors.top: rect2.top
    }
 
    //通过瞄点 获取控件坐标
    Rectangle{
        id:rect4
        width:100
        height:50
        color: "blue"
        focus:false
        anchors.top:rect1.bottom  //获取另外一个控件的底部
        anchors.topMargin: 20 //Margin 为控件和控件间隙
        anchors.left:rect1.left
    }
 
    //通过anchors
    Rectangle{
        id:rect5
        width:100
        height:100
        color: "blue"
        focus:false  //是否可以有焦点 无焦点 不能捕获 鼠标事件
        scale:0.8 //缩放比 放大比例
        rotation: 120 //翻转30°
        border.width: 3 //边框线宽
        border.color: "black" //边框 颜色
        radius:15  //弧度
        opacity:1 //透明都
        //渐变色
        gradient: Gradient{
           GradientStop{ position: 0.0; color: "#FFFF0000";}
           GradientStop{ position: 0.3; color: "#FFFFA000";}
           GradientStop{ position: 0.5; color: "#A0FF4000";}
           GradientStop{ position: 1.0; color: "#FF800FFF";}
        }
 
 
        //和父控件对齐方式 居中对齐 等价 anchors.centerIn: parent
        anchors.horizontalCenter:parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
 
    }
 
 
}