main.qml

import QtQuick 2.14
import QtQuick.Shapes 1.14

import QtQuick.Controls 1.1
//import QtQuick.Controls 2.14 // no vertical scrollbar when using 2.14

ApplicationWindow {
    id: myApp

    visible: true
    width: 500
    height: 350
    title: qsTr("QML Gantt Test")

    // visual styles
    readonly property int barHeight: 40
    readonly property int innerBarHeight: barHeight - 2
    readonly property int taskInfoWidth: 152
    readonly property color backgroundColor: "#ccc"

    // states
    readonly property int futureDistance: 100 // space left to the time axis (the unknown future)
    property int fullGanttSpace: sim.ticks + futureDistance
    property int posInTime: sim.ticks
    property ListModel taskModel: sim.taskModel // [{taskName, ranges[{start, duration},...]},...]

    // Simulates fix amount of tasks + ongoing activity
    TaskSimulation
    {
        id:sim
        intervalInMsec: 50
        taskCount: 10
    }

    Component.onCompleted: {
        sim.start()
    }

    Rectangle{
        id: ganttArea
        height: 300
        clip: true
        width: 450
        anchors.centerIn: parent

        color: backgroundColor

        ListView{
            id: ganttNameView // vertical List with Names and Gantt Ranges

            anchors.fill: parent

            interactive: false
            contentY: ganttView.contentY
            model: taskModel
            delegate: Rectangle{
                width: ganttNameView.width
                height: barHeight
                Rectangle{
                    color: backgroundColor
                    width: parent.width
                    height: innerBarHeight
                    Text{
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        text: taskName
                    }
                }
            }

            Rectangle{
                id: rangeArea

                height: parent.height
                width: parent.width - taskInfoWidth
                x: taskInfoWidth
                color: backgroundColor

                ScrollView{ // Activity list
                    id: mainScroll
                    anchors.fill: parent

                    ListView{
                        id: ganttView

                        height: parent.height
                        contentWidth: fullGanttSpace
                        model: taskModel

                        delegate: Rectangle{
                            width: ganttView.width
                            height: barHeight

                            color: backgroundColor

                            Repeater {
                                model: ranges
                                Rectangle {
                                    x: model.start
                                    y: height / 2.0

                                    width: model.duration
                                    height: innerBarHeight/2.0

                                    border.width: 1
                                    color: "lightblue"
                                }
                            }


                            Shape {
                                ShapePath {
                                    strokeColor: "green"
                                    strokeWidth: 2

                                    startX: posInTime
                                    startY: 0

                                    PathLine { x: posInTime; y: ganttView.height }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}