基于Qt Qml實現(xiàn)時間軸組件

更新時間：2025年01月16日 15:10:21 作者：夢起丶

時間軸組件是現(xiàn)代用戶界面中常見的元素,用于按時間順序展示事件,本文主要為大家詳細介紹了如何使用Qml實現(xiàn)一個簡單的時間軸組件,需要的可以參考下

寫在前面

時間軸組件是現(xiàn)代用戶界面中常見的元素，用于按時間順序展示事件。

本文將介紹如何使用 Qml 實現(xiàn)一個靈活且可定制的時間軸組件,并探討其設(shè)計思路和實現(xiàn)細節(jié)。

效果圖

組件概述

我們實現(xiàn)的時間軸組件具有以下特點：

支持自定義節(jié)點樣式：可以設(shè)置節(jié)點的圖標(biāo)、背景顏色、邊框顏色等。
支持自定義線條樣式：可以設(shè)置線條的顏色和寬度。
支持自定義時間顯示格式：可以設(shè)置時間的顯示格式和字體樣式。
支持自定義內(nèi)容樣式：可以設(shè)置內(nèi)容的背景顏色、邊框顏色、字體樣式等。
支持正序和倒序排列：可以根據(jù)時間戳對事件進行正序或倒序排列。

實現(xiàn)細節(jié)

1. 組件結(jié)構(gòu)

時間軸組件的核心是一個 ListView，它用于展示所有的事件項。每個事件項由三個部分組成：

節(jié)點：表示事件的時間點，可以是圖標(biāo)或圓形背景。
線條：連接相鄰事件的節(jié)點。
內(nèi)容：顯示事件的具體內(nèi)容和時間。

2. 屬性定義

組件提供了多個屬性來定制時間軸的外觀和行為：

節(jié)點樣式：defaultNodeIconColor、defaultNodeBackgroundRadius、defaultNodeBackgroundColor、defaultNodeBorderColor、defaultNodeBorderWidth。
線條樣式：defaultLineColor、defaultLineWidth。
時間樣式：defaultTimeFont、defaultTimeFontColor、defaultTimeFormat。
內(nèi)容樣式：defaultContentFormat、defaultContentFont、defaultContentFontColor、defaultContentBackgroundRadius、defaultContentBackgroundColor、defaultContentBorderColor、defaultContentBorderWidth。

3. 數(shù)據(jù)模型

時間軸組件使用 ListModel 來存儲事件數(shù)據(jù)。每個事件項包含以下屬性：

timestamp：事件的時間戳。
content：事件的內(nèi)容。
nodeOptions：節(jié)點的樣式選項。
lineOptions：線條的樣式選項。
timeOptions：時間的樣式選項。
contentOptions：內(nèi)容的樣式選項。

4. 事件項的添加和排序

組件提供了 append 函數(shù)來添加新的事件項，并根據(jù)時間戳進行排序。sort 函數(shù)用于對現(xiàn)有的事件項進行重新排序。

function append(object) {
    __initOptions(object);

    let index = 0;
    let rowCount = listModel.count;
    for (let i = 0; i < rowCount; i++) {
        if (root.reverse) {
            if (listModel.get(i).__timestamp < object.__timestamp) {
                index = i + 1;
            } else break;
        } else {
            if (listModel.get(i).__timestamp > object.__timestamp) {
                index = i + 1;
            } else break;
        }
    }
    listModel.insert(index, object);
}

function sort() {
    let rowCount = listModel.count;
    for (let i = 0; i < rowCount; i++) {
        for (let j = 0; i + j < rowCount - 1; j++) {
            if (root.reverse) {
                if (listModel.get(j).__timestamp > listModel.get(j + 1).__timestamp) {
                    listModel.move(j, j + 1, 1);
                }
            } else {
                if (listModel.get(j).__timestamp < listModel.get(j + 1).__timestamp) {
                    listModel.move(j, j + 1, 1);
                }
            }
        }
    }
}

5. 事件項的渲染

每個事件項通過 Loader 動態(tài)加載節(jié)點、線條和內(nèi)容組合組件：

Loader {
    id: lineLoader
    active: index !== (listModel.count - 1)
    width: nodeLoader.width
    height: parent.height - nodeLoader.height
    anchors.top: nodeLoader.bottom
    sourceComponent: lineDelegate
    property var lineOptions: __lineOptions
}

Loader {
    id: nodeLoader
    sourceComponent: nodeDelegate
    property var nodeOptions: __nodeOptions
}

Loader {
    id: contentLoader
    anchors.left: nodeLoader.right
    anchors.leftMargin: 10
    anchors.right: parent.right
    sourceComponent: contentDelegate
    property var content: __content
    property var contentOptions: __contentOptions
    property var timestamp: __timestamp
    property var timeOptions: __timeOptions
}

如何使用

我們可以像使用標(biāo)準(zhǔn)的 qml 元素一樣使用時間軸組件：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 800
    height: 600
    title: "Timeline Example"

    Timeline {
        id: timeline
        width: 400
        anchors.top: row.bottom
        anchors.topMargin: 10
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        defaultNodeBackgroundColor: "transparent"
        defaultNodeBorderWidth: 1
        defaultTimeFormat: "yyyy-MM-dd hh:mm:ss"
        initModel: [
            {
                timestamp: new Date(2024, 7, 1, 1),
                content: "更新 Github 模板 1",
                nodeOptions: { icon: "\uf27b" }
            },
            {
                timestamp: new Date(2024, 7, 7, 11),
                content: "更新 Github 模板 2",
                nodeOptions: { backgroundColor: "blue" },
                lineOptions: { color: "red" }
            },
            {
                timestamp: new Date(2024, 7, 7, 16),
                content: "更新 Github 模板 2",
                lineOptions: { width: 5 }
            },
            {
                timestamp: new Date(2024, 7, 9, 5, 30),
                content: "更新 Github 模板 3"
            },
            {
                timestamp: new Date(2024, 7, 12, 9),
                timeOptions: {
                    font: { family: "華文彩云", pointSize: 12 },
                    fontColor: "green",
                    format: "yyyy-MM-dd hh:mm:ss:zzz"
                },
                content: "更新 Github 模板 4",
            },
            {
                timestamp: new Date(2024, 7, 12, 18, 30),
                content: "更新 Github 模板 5",
                contentOptions: {
                    font: { family: "微軟雅黑", pointSize: 14 },
                    fontColor: "red",
                    backgroundColor: "#ddd"
                }
            },
            {
                timestamp: new Date(2024, 7, 17, 5, 35),
                content: "更新 Github 模板 6 ===================================",
                contentOptions: {
                    borderColor: "#ddd"
                }
            }
        ]
    }
}