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

### 如何在 QML 中创建自定义窗口边框 为了实现QML 中创建带有自定义样式的 `ApplicationWindow` 边框,可以通过移除默认的窗口装饰并手动添加所需的视觉元素和交互逻辑。 #### 移除默认窗口装饰 通过设置 `flags` 属性为 `Qt.FramelessWindowHint` 可以去掉系统的标准窗口边界[^3]: ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Window 2.15 Window { visible: true width: 800 height: 600 flags: Qt.FramelessWindowHint // 自定义内容... } ``` #### 添加自定义标题栏与按钮 一旦去掉了原生边框,则需自行构建顶部区域用于拖拽移动窗体及控制最小化/最大化/关闭等功能。这里展示一个简单的例子来说明如何做到这一点: ```qml Rectangle { color: "#4CAF50" height: 40 anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right MouseArea { id: titleBarMouseArea anchors.fill: parent onPressed: { window.startSystemMove(); // 开始系统级别的移动操作 } } RowLayout { spacing: 10 anchors.verticalCenter: parent.verticalCenter anchors.rightMargin: 10 anchors.right: parent.right Repeater { model: ["minimize", "maximizeRestore", "close"] Button { text: modelData === "minimize" ? "-" : (modelData === "maximizeRestore" ? u"\u25a1" : "×") onClicked: { switch(modelData){ case "minimize": window.showMinimized(); break; case "maximizeRestore": if(window.visibility !== Window.Maximized) window.showMaximized(); else window.showNormal(); break; default: window.close(); } } } } } } ``` 上述代码片段展示了如何利用矩形作为模拟标题条,并在其内部放置三个按钮分别对应于最小化、最大化恢复以及关闭动作。同时设置了鼠标点击事件处理器以便响应用户的输入行为。 对于窗口尺寸调整方面,在较新的 Qt 版本里(如 Qt5.15),可以直接调用 `startSystemResize()` 方法配合不同的方向参数轻松完成四周边缘的手动拉伸处理[^2]: ```qml // 假设有一个名为 edgeResizer 的 MouseArea 组件位于窗口底部中央位置 edgeResizer.onPressed: { var edges = Qt.BottomEdge; // 或者其他合适的边缘组合 window.startSystemResize(edges); } ``` 以上就是关于如何在 QML实现完全定制化的应用程序窗口外观及其基本交互特性的介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cpp_learners

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值