后天八卦图 QML

后天八卦图

import QtQuick 2.10

import QtQuick.Window 2.10

Window {

    visible: true

    width: 480

    height: 640

    title: qsTr("后天八卦图")

    Text {

        anchors.topMargin: 10

        anchors.top: parent.top

        anchors.horizontalCenter: parent.horizontalCenter

        text: "后天八卦图"

        font.pointSize: 36

    }

    PathView {

        width: 360

        height: 360

        anchors.centerIn: parent

        model: ListModel {

            ListElement { value: "001"; caption: "震 三"}

            ListElement { value: "110"; caption: "巽 四"}

            ListElement { value: "101"; caption: "离 九"}

            ListElement { value: "000"; caption: "坤 二"}

            ListElement { value: "011"; caption: "兑 七"}

            ListElement { value: "111"; caption: "乾 六"}

            ListElement { value: "010"; caption: "坎 一"}

            ListElement { value: "100"; caption: "艮 八"}

        }

        delegate: Rectangle {

            width: 60

            height: 90

            Column {

                width: parent.width

                height: parent.height - 30

                spacing: 5

                Repeater {

                    model: 3

                    Rectangle {

                        width: parent.width

                        height: (parent.height - 10) / 3

                        color: value.slice(index,index + 1)==="1"?"red":"black"

                        Rectangle {

                            width: parent.width / 5

                            height: parent.height

                            anchors.centerIn: parent

                            visible: value.slice(index,index + 1)==="0"

                        }

                    }

                }

            }

            Text {

                font.bold: true

                font.pointSize: 16

                anchors.bottom: parent.bottom

                anchors.horizontalCenter: parent.horizontalCenter

                color: "black"

                text: caption

            }

        }

        path: Path {

            startX: 0

            startY: 180

            PathArc {

                x: 360

                y: 180

                radiusX: 180

                radiusY: 180

            }

            PathArc {

                x: 0

                y: 180

                radiusX: 180

                radiusY: 180

            }

        }

    }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 界面 主窗口界面设计 标题栏:直接设Window-Title属性;Window-icon属性可加图标。底部状态栏:...
    码园老农阅读 3,819评论 1 13
  • 那些不相信鸡汤,不相信付出就有回报,对着别人的成功只是羡慕却不行动,对着别人的努力冷嘲热讽的人,怎么会有成功的动力...
    喆喆巫阅读 277评论 0 0
  • 「啊!為什麼?」一個人癱坐在地上叫喊著。TA滿臉淚光,表情帶著悲傷絕望的望著前方的几個人。在中間那個人穿著一件被...
    紅煙阅读 302评论 0 0
  • 自从写日记,记录生活,记录自己的心情后加上看书,和大林生活后,和之前的感情的失败,家庭的事情,都让我有足够的时间去...
    曾曾的麻麻阅读 93评论 0 0