QML 完全模拟飞书日程界面（一）

QML完全模仿飞书日程界面（一）

首先先贴一个飞书的日程界面截图

---

然后再贴一个本期要模仿的部分

---

---

前言

分为四个部分，今天这个复位按钮，切换日期按钮，显示当前年份月份日期的label,用于切换日月周的tabbar

---

一、复位按钮部分

代码如下：

    Button {
        id: _resetBtn
        anchors{
            top: parent.top
            topMargin: 16
            left: parent.left
            leftMargin: 16
        }
        width: 60
        height: 32
        background: Rectangle {
            color: parent.hovered ? "#DCDFE5" : _resetBtn.checked ? "white" : "#E8F2FF"
            border.width: 1
            border.color: "#1962FF"
            radius: 4
        }
        contentItem :Text {
            color: "#1962FF"
            anchors{
//                //!这样写是为了居中
                top: parent.top
                topMargin: 6
                left: parent.left
                leftMargin: 16

            }
            font.family: "PingFang SC"
            font.pixelSize: 14
            text: "今天"
            opacity: 1
        }
        onClicked: {
            _root.gotoToday()
        }
    }

---

二、切换日期按钮

代码如下：

    Rectangle{
        id: _lastAndNextMonthBtn
        color: "transparent"
        border.width: 1
        border.color: "#DCDFE5"
        anchors{
            top: parent.top
            topMargin: 16
            left: _resetBtn.right
            leftMargin: 12
        }
        radius: 4
        width: 65
        height: 32
        Button {
            text: "<"
            anchors{
                top: parent.top
                topMargin: 0
                left: parent.left
                leftMargin: 2
            }
            width: 32
            background: Rectangle {
                color: parent.hovered ? "#DCDFE5" : "#FFFFFF"
                anchors{
                    fill: parent
                    margins: 3
                    leftMargin: 0
                }
                radius: 4
            }
            font.family: "PingFang SC"
            font.pixelSize: 14
            onClicked: {
                _root.gotoLastMonth()
            }
        }
        Rectangle{
            color: "#DCDFE5"
            width: 1
            anchors{
                verticalCenter: parent.verticalCenter
                horizontalCenter: parent.horizontalCenter
            }
            height: parent.height - 8
        }
        Button {
            text: ">"
            anchors{
                top: parent.top
                topMargin: 0
                right: parent.right
                rightMargin: -1
            }
            width: 32
            background: Rectangle {
                color: parent.hovered ? "#DCDFE5" : "white"
                anchors{
                    fill: parent
                    margins: 3
                    leftMargin: 0
                }
                radius: 4
            }
            font.family: "PingFang SC"
            font.pixelSize: 14
            onClicked: {
                _root.gotoNextMonth()
            }
        }
    }

---

三、显示当前年份月份日期的label

代码如下：

    Text {
        width: 92
        height: 23
        anchors{
            top: parent.top
            topMargin: 20
            left: _lastAndNextMonthBtn.right
            leftMargin: 12
        }
        verticalAlignment: Qt.AlignVCenter
        font.family: "PingFang SC"
        text: currentDate_Year + "年" + currentDate_Month + "月"
        renderType: Text.NativeRendering
        font.pixelSize: 20
        font.bold: false
        antialiasing: true
    }

暂且只写了年和月，后续会把日和今天都补充上

---

四、用于切换日月周的tabbar

代码如下：

Rectangle{
        width: 212
        height: 32
        anchors{
            top: parent.top
            topMargin: 16
            right: parent.right
            rightMargin: 16
        }
        border.color:  "#DCDFE5"
        border.width: 1
        radius: 6
        TabBar {
            id: _bar
            anchors.fill: parent
            anchors.margins: 1
            font.family: "PingFang SC"
            font.pixelSize: 14
            background: Rectangle {
                radius: 6
                color: "#FFFFFF"
            }

            Repeater {
                model: ["日", "周", "月"]

                TabButton {
                    text: modelData
                    contentItem: IconLabel {
                        text: parent.text
                        font: parent.font
                        color: parent.checked ? "#1962FF" : "#1F2329"
                    }
                    background: Rectangle{
                        radius: 4
                        anchors.fill: parent
                        anchors.margins: 3
                        anchors.bottomMargin: 5
                        color: parent.hovered ? "#DCDFE5" : parent.checked ? "#E8F2FF" : "#FFFFFF"
                    }
                }
            }
        }
    }

---

总结

先从最简单的开始，下一期模仿单天的日期显示如下：

—————————本文严禁转载—————————