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

展现效果

相关推荐
iCxhust4 小时前
c# U盘映像生成工具
开发语言·单片机·c#
yangzhi_emo4 小时前
ES6笔记2
开发语言·前端·javascript
emplace_back5 小时前
C# 集合表达式和展开运算符 (..) 详解
开发语言·windows·c#
jz_ddk5 小时前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
萧曵 丶6 小时前
Rust 所有权系统:深入浅出指南
开发语言·后端·rust
xiaolang_8616_wjl6 小时前
c++文字游戏_闯关打怪2.0(开源)
开发语言·c++·开源
收破烂的小熊猫~6 小时前
《Java修仙传:从凡胎到码帝》第四章:设计模式破万法
java·开发语言·设计模式
nananaij6 小时前
【Python进阶篇 面向对象程序设计(3) 继承】
开发语言·python·神经网络·pycharm
阿蒙Amon7 小时前
为什么 12 版仍封神?《C# 高级编程》:从.NET 5 到实战架构,进阶者绕不开的必修课
开发语言·c#