当前位置: 首页 > news >正文

QML 自定义矩形框Rectangle,实现四个边框自定义大小

一、自定义矩形

效果图

边框大小为:左2 上2 右5 下10

简单来说,就是定义两个矩形,一个在外边一个在内部;

再通过设置他们的边距,即可设置相应的边框宽度;

1.编码

新建空的qml文件

MyRectangle.qml

import QtQuick 2.0

Rectangle {
    id: borderRect
    property int innerTopMargin: 0        // 上边距
    property int innerBottomMargin: 0     // 下边距
    property int innerLeftMargin: 0       // 左边距
    property int innerRightMargin: 0      // 右边距
    property string innerColor: "white"   // 矩形颜色
    property string bodercolor: "black"   // 边框颜色

    width: 100
    height: 50
    color: innerColor

    Rectangle {
        id: innerRect
        color: bodercolor

        anchors.fill: parent    // 填充满父类
        anchors.topMargin: innerTopMargin
        anchors.bottomMargin: innerBottomMargin
        anchors.leftMargin: innerLeftMargin
        anchors.rightMargin: innerRightMargin
    }
}

2.使用

// 自定义矩形                                                 
MyRectangle {                                               
    height: 100                                             
    width: 200                                              
                                                            
    innerTopMargin: 2       // 顶部边框大小                       
    innerBottomMargin: 10   // 底部                           
    innerLeftMargin: 2      // 左边                           
    innerRightMargin: 5     // 右边                           
                                                            
    bodercolor: "black"    // 边框颜色                         
    innerColor: "yellow"     // 矩形颜色                          
                                                            
    // 居中                                                   
    anchors.verticalCenter: parent.verticalCenter           
    anchors.horizontalCenter: parent.horizontalCenter       
    //anchors.centerIn: parent                              
}                                                  

二、九宫格

可以使用矩形的相对位置,去设置一个九宫格出来;

即 以下这四个属性

anchors.top        anchors.left        anchors.right        anchors.bottom

源码如下:

import QtQuick 2.9
import QtQuick.Window 2.2

import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "white"


    MyRectangle {
        id: rect1
        x: 50
        y: 50
        height: 50
        width: 100

        innerTopMargin: 2       // 顶部边框大小
        innerBottomMargin: 10   // 底部
        innerLeftMargin: 2      // 左边
        innerRightMargin: 5     // 右边

        bodercolor: "black"    // 边框颜色
        innerColor: "yellow"     // 矩形颜色
    }

    MyRectangle {
        id: rect2
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.left: rect1.right
        anchors.leftMargin: 5
    }

    MyRectangle {
        id: rect3
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.left: rect2.right
        anchors.leftMargin: 5
    }

    MyRectangle {
        id: rect4
        x: rect1.x
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect1.bottom
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect5
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect2.bottom
        anchors.left: rect4.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }


    MyRectangle {
        id: rect6
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect3.bottom
        anchors.left: rect5.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect7
        x: rect1.x
        y: rect1.y
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect4.bottom
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect8
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect5.bottom
        anchors.left: rect7.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }

    MyRectangle {
        id: rect9
        width: rect1.width
        height: rect1.height

        innerTopMargin: rect1.innerTopMargin
        innerBottomMargin: rect1.innerBottomMargin
        innerLeftMargin: rect1.innerLeftMargin
        innerRightMargin: rect1.innerRightMargin

        bodercolor: rect1.bodercolor
        innerColor: rect1.innerColor

        anchors.top: rect6.bottom
        anchors.left: rect8.right
        anchors.leftMargin: 5
        anchors.topMargin: 5
    }
}

http://www.dtcms.com/a/24838.html

相关文章:

  • 反射机制的简单示例
  • pytorch预训练模型下载保存路径更改
  • 【干货教程】DeepSeek R1+Open WebUI构建RAG检索增强知识库的实战教程
  • 《DeepSeek Janus Pro 7B:多模态人工智能大模型部署全攻略》
  • 用 UniApp 打造新颖美观的弹出框
  • C#多线程
  • UEFI Spec 学习笔记---11 - Protocols — UEFI Driver Model(1)
  • 嵌入式音视频开发(二)ffmpeg音视频同步
  • 大一计算机的自学总结:前缀树(字典树、Trie树)
  • 【Ai】辅助编程利器:Cline、Continue
  • 大数据组件(四)快速入门实时数据湖存储系统Apache Paimon(1)
  • #渗透测试#批量漏洞挖掘#Apache Log4j反序列化命令执行漏洞
  • 基于AdaIN的实时图像风格迁移-照片艺术化
  • 初识LLMs
  • 第四十三篇——零和博弈(鞍点理论):如何找到双方的平衡点?
  • 【Linux系统】生产者消费者模型:基于阻塞队列 BlockingQueue
  • 【笔记】LLM|Ubuntu22服务器极简本地部署DeepSeek+API使用方式
  • 使用apt-rdepends制作软件离线deb安装包
  • 网站搭建基本流程
  • RK3568平台开发系列讲解(PWM篇)SG90 舵机驱动实验
  • 蓝桥杯题目(36进制)
  • Recall(召回率)和 Precision(精确率) 的区别和F1分数
  • UML顺序图的建模方法及应用示例
  • 一、《重学设计模式》-设计模式简介
  • 3.9 用户反馈智能分析实战:从情感识别到产品优化的闭环设计指南
  • 低代码(Low Code)全解析:从概念到应用,从选择到价值
  • Spring框架-AOP
  • 【C语言】C语言 食堂自动化管理系统(源码+数据文件)【独一无二】
  • 【git】已上传虚拟环境的项目更改成不再上传虚拟环境
  • cmake:定位Qt的ui文件