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

展现效果

相关推荐
HAH-HAH1 小时前
【Python 入门】(2)Python 语言基础(变量)
开发语言·python·学习·青少年编程·个人开发·变量·python 语法
递归不收敛2 小时前
一、Java 基础入门:从 0 到 1 认识 Java(详细笔记)
java·开发语言·笔记
zhangfeng11333 小时前
win7 R 4.4.0和RStudio1.25的版本兼容性以及系统区域设置有关 导致Plots绘图面板被禁用,但是单独页面显示
开发语言·人工智能·r语言·生物信息
姓刘的哦3 小时前
Qt中的QWebEngineView
数据库·c++·qt
SundayBear4 小时前
QT零基础入门教程
c++·qt
子午4 小时前
Python的uv包管理工具使用
开发语言·python·uv
HMBBLOVEPDX5 小时前
C++(静态函数)
开发语言·c++
dpxiaolong6 小时前
RK3588 Android12默认移除导航栏
开发语言·python
Pocker_Spades_A6 小时前
Python快速入门专业版(二十九):函数返回值:多返回值、None与函数嵌套调用
服务器·开发语言·python
良木林6 小时前
浅谈原型。
开发语言·javascript·原型模式