QML--Rectangle

cpp 复制代码
    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
     }

展示效果

cpp 复制代码
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")
      }//键盘信息回车
 }

展示效果

cpp 复制代码
	//应用锚点
    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"
    }

展示效果

cpp 复制代码
    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"
            }
        }//渐变
    }

展现效果

cpp 复制代码
//实现自定义边框
//新建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
    }
}

展现效果

相关推荐
Sylvia-girl4 小时前
Java——抽象类
java·开发语言
Yana.nice6 小时前
Bash函数详解
开发语言·chrome·bash
tomorrow.hello8 小时前
Java并发测试工具
java·开发语言·测试工具
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
老胖闲聊8 小时前
Python I/O 库【输入输出】全面详解
开发语言·python
她说人狗殊途9 小时前
java.net.InetAddress
java·开发语言
天使day9 小时前
Cursor的使用
java·开发语言·ai
Dxy123931021610 小时前
Python ExcelWriter详解:从基础到高级的完整指南
开发语言·python
源代码•宸12 小时前
C++高频知识点(十三)
开发语言·c++·经验分享·面经
wa的一声哭了12 小时前
python基础知识pip配置pip.conf文件
java·服务器·开发语言·python·pip·risc-v·os