兼容Qt4/Qt5版本Qml控件RoundRectangle

发表于

可设置矩形圆角位置的控件。

RoundRectangle 备注
导入方法 文件导入
兼容性 QtQuick 1.x
QtQuick 2.x
继承 Rectangle

属性

描述

  • 通过设置一个radiusCorners值，可控制圆角方向。
    1
    2
    3
    4
    5
    6
    RoundRectangle {
        width: 100; height: 50
        color: "lightblue"
        radius: 10
        radiusCorners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom
    }

示例

在这里插入图片描述

属性文档

  • radiusCorners: int
    设置圆角位置。
  • radiusCorners可使用的值:
常量 值 描述
Qt.AlignLeft 0x0001 与左边缘对齐
Qt.AlignRight 0x0002 与右边缘对齐
Qt.AlignTop 0x0020 与顶部对齐
Qt.AlignBottom 0x0040 与底部对齐
  • radiusCorners可使用的组合值范围:
radiusCorners 效果
0 在这里插入图片描述
Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom
(默认值)		 在这里插入图片描述
Qt.AlignLeft | Qt.AlignTop | Qt.AlignBottom
Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom 在这里插入图片描述
Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop 在这里插入图片描述
Qt.AlignLeft | Qt.AlignRight | Qt.AlignBottom 在这里插入图片描述

关于更新

  • 文章首发于微信公众号你才小学生
  • 后续更新于Qtbig哥(qtbig.com)

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/**********************************************************
Author: Qtbig哥
WeChat Official Accounts Platform: nicaixiaoxuesheng (文章首发)
Website: qtbig.com(后续更新)
Email:  2088201923@qq.com
QQ交流群: 732271126
LISCENSE: MIT
**********************************************************/
import QtQuick 2.0

Rectangle {
    id: root
    property int radiusCorners: Qt.AlignLeft | Qt.AlignRight | Qt.AlignTop | Qt.AlignBottom /* Default: */
    /*
                            Qt.AlignLeft |      Qt.AlignLeft |      Qt.AlignRight |     Qt.AlignLeft |      Qt.AlignLeft |
                            Qt.AlignRight |     Qt.AlignTop |       Qt.AlignTop |       Qt.AlignRight |     Qt.AlignRight |
              None:0        Qt.AlignTop |       Qt.AlignBottom      Qt.AlignBottom      Qt.AlignTop         Qt.AlignBottom
                            Qt.AlignBottom
        *****************     *************       ***************   ***************       *************     *****************
        *               *    *             *     *              *   *              *     *             *    *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *   *               *   *               *   *               *   *               *   *               *
        *               *    *             *     *              *   *              *    *               *    *             *
        *****************     *************       ***************   ***************     *****************     *************
    */

    Repeater {
        model: [ {
                x: 0,
                y: 0,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: 0,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignTop),
                radius: root.radius
            },
            {
                x: 0,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignLeft | Qt.AlignBottom),
                radius: root.radius
            },
            {
                x: root.width - root.radius,
                y: root.height - root.radius,
                visible: internal.aligns(Qt.AlignRight | Qt.AlignBottom),
                radius: root.radius
            } ]

        Rectangle {
            x: modelData.x; y: modelData.y
            width: modelData.radius; height: width
            visible: !modelData.visible
            color: parent.color
        }
    }

    QtObject {
        id: internal

        function aligns(direction) {
            return (root.radiusCorners & direction) === direction
        }
    }
}