兼容Qt4/Qt5版本Qml控件Triangle

发表于

三角形控件(Triangle)，等腰直角三角形。底是高的两倍。

插图

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

示例

1
2
3
Triangle {
    anchors.centerIn: parent
}

属性

  • width：设置三角形的等宽。
  • color：设置三角形的颜色。

源码

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
//#if Qt4
//import QtQuick 1.0
//#else
import QtQuick 2.0
//#endif

Item {
    id: root
    property alias color: triangle.color
    implicitWidth: 100
    implicitHeight: implicitWidth

    width: implicitWidth
    height: width

    clip: true
    rotation: -45

    Rectangle {
        id: triangle
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: parent.height/2
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: -parent.width/2
        width: Math.sqrt(root.width * root.width * 2)
        height: width
        color: "#4cbeff"
        rotation: 45
    }
}

关于更多

  • 公众号Qt君回复Qml控件获取更多内容。