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

展现效果

相关推荐
侃侃_天下3 天前
最终的信号类
开发语言·c++·算法
echoarts3 天前
Rayon Rust中的数据并行库入门教程
开发语言·其他·算法·rust
Aomnitrix3 天前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
每天回答3个问题3 天前
UE5C++编译遇到MSB3073
开发语言·c++·ue5
伍哥的传说3 天前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
小莞尔3 天前
【51单片机】【protues仿真】 基于51单片机八路抢答器系统
c语言·开发语言·单片机·嵌入式硬件·51单片机
我是菜鸟0713号3 天前
Qt 中 OPC UA 通讯实战
开发语言·qt
JCBP_3 天前
QT(4)
开发语言·汇编·c++·qt·算法
Brookty3 天前
【JavaEE】线程安全-内存可见性、指令全排序
java·开发语言·后端·java-ee·线程安全·内存可见性·指令重排序
百锦再3 天前
[特殊字符] Python在CentOS系统执行深度指南
开发语言·python·plotly·django·centos·virtualenv·pygame