QML--Rectangle

    Rectangle {
      x: 100
      y: 100
      z: 1  //显示顺序
      width: 100
      height: 100
      color: "red"
      border.color: "black"
      border.width: 5
      radius: 10
     }

    Rectangle {
      x: 120
      y: 120
      width: 100
      height: 100
      color: "blue"
      border.color: "black"
      border.width: 5
      radius: 10
     }

展示效果

Rectangle {
      x: 120
      y: 120
      width: 100
      height: 100
      color: "blue"
      border.color: "black"
      border.width: 5
      radius: 10
      focus: true //获取到当前焦点

      MouseArea{
          anchors.fill: parent
          onClicked: {
              console.log("on clicked")
          }
      }//鼠标点击事件

      Keys.onReturnPressed: {
        console.log("on return pressed")
      }//键盘信息回车
 }

展示效果

	//应用锚点
    Rectangle {
        id: rect1
        width: 100
        height: 50
        color: "black"
    }

    Rectangle {
        id: rect2
        width: 100
        height: 50
        anchors.left: rect1.right
        anchors.leftMargin: 20
        color: "blue"
    }

    Rectangle {
        id: rect3
        width: 100
        height: 50
        anchors.top: rect1.bottom
        anchors.topMargin: 20
        color: "red"
    }

展示效果

    Rectangle {
        id: rect1
//        anchors.fill: parent //填充满
        width: 100
        height: 50
        color: "black"
        anchors.horizontalCenter: parent.horizontalCenter //水平居中
        anchors.verticalCenter: parent.verticalCenter //垂直居中

        scale: 2 //长宽放缩
        rotation:  90 // 旋转角度

        gradient: Gradient{
            GradientStop{
                position: 0.0;
                color: "lightsteelblue"
            }
            GradientStop{
                position: 1.0
                color: "blue"
            }
        }//渐变
    }

展现效果

//实现自定义边框
//新建MyRectangle.qml文件
import QtQuick 2.0

Rectangle{
    id: borderRect
    width: 200
    height: 100
    property int myTopMargin: 0//对外接口
    property int myBottomMargin: 0
    property int myLeftMargin: 0
    property int myRightMargin: 0
    color: "black"
    Rectangle{
        id: innerRect
        color: "blue"
        anchors.fill: parent
        anchors.topMargin: myTopMargin
        anchors.bottomMargin: myBottomMargin
        anchors.leftMargin: myLeftMargin
        anchors.rightMargin: myRightMargin
    }
}

展现效果