快捷導(dǎo)航

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

更新時(shí)間：2025年01月16日 15:10:21 作者：夢(mèng)起丶

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

寫(xiě)在前面

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

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

效果圖

組件概述

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

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

實(shí)現(xiàn)細(xì)節(jié)

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

時(shí)間軸組件的核心是一個(gè) ListView，它用于展示所有的事件項(xiàng)。每個(gè)事件項(xiàng)由三個(gè)部分組成：

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

2. 屬性定義

組件提供了多個(gè)屬性來(lái)定制時(shí)間軸的外觀和行為：

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

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

時(shí)間軸組件使用 ListModel 來(lái)存儲(chǔ)事件數(shù)據(jù)。每個(gè)事件項(xiàng)包含以下屬性：

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

4. 事件項(xiàng)的添加和排序

組件提供了 append 函數(shù)來(lái)添加新的事件項(xiàng)，并根據(jù)時(shí)間戳進(jìn)行排序。sort 函數(shù)用于對(duì)現(xiàn)有的事件項(xiàng)進(jì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. 事件項(xiàng)的渲染

每個(gè)事件項(xiàng)通過(guò) Loader 動(dòng)態(tài)加載節(jié)點(diǎn)、線(xiàn)條和內(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 元素一樣使用時(shí)間軸組件：

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"
                }
            }
        ]
    }
}