Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Timeline (like Facebook) with GridView



  • Hi,

    I'm working on a timeline to present my data. There is on the left side content in the middle is a line and on the right side is content agin.

    A draft: http://de.tinypic.com/r/165c7r/8

    What is the best approach for my GridView?

    Alternative one:

    @...
    Component {
    id: timelineDelegate
    Item {
    width: grid.cellWidth; height: grid.cellHeight

            Column {
                anchors.fill: parent
                spacing: 20
    
                Button { id: deviceImageButton; iconSource: deviceImage; visible: elementVisible; anchors.horizontalCenter: parent.horizontalCenter; onClicked: setVisibleEffect(euroText, kwhText, timeText) }
                Text { id: euroText; text: euro; font.pointSize: 12; visible: false; anchors.horizontalCenter: parent.horizontalCenter }
                Text { id: kwhText; text: kwh; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter }
                Text { id: timeText; text: time; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter }
    
                Rectangle {
                    id: dateRectangle
                    color: "#808080"
                    Text { id: dataText; text: date; visible: true; anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.horizontalCenter; }
    

    // width: childrenRect.width
    // height: childrenRect.height
    }

                move: Transition {
                    NumberAnimation { properties: "x,y"; duration: 2000 }
                }
            }
        }
    }
    
    GridView {
        id: grid
        flickableDirection: Flickable.AutoFlickDirection
    
        anchors.fill: parent
        cellWidth: grid.width/3
        cellHeight: grid.height/3
        anchors.margins: 100
    
        // flow: GridView.LeftToRight
    
        delegate: timelineDelegate
        model: timelineModel
    }
    

    }@

    Or alternative 2, to use multiple columns:

    @
    GridView {
    id: gridView1
    anchors.fill: parent
    delegate: Item {
    id: item1
    x: 5
    height: 50
    Column {
    id: column3
    width: 100
    height: 100
    spacing: 5

                Button { id: deviceImageButtonLeft; iconSource: deviceImage; visible: elementVisible; anchors.horizontalCenter: parent.horizontalCenter; onClicked: setVisibleEffect(euroText, kwhText, timeText) }
                Text { id: euroTextLeft; text: euro; font.pointSize: 12; visible: false; anchors.horizontalCenter: parent.horizontalCenter }
                Text { id: kwhTextLeft; text: kwh; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter }
                Text { id: timeTextLeft; text: time; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter }
            }
    
            Column {
                id: column1
                x: 0
                y: 0
                width: 100
                height: 100
                anchors.horizontalCenter: parent.horizontalCenter
    
                Rectangle {
                    id: dateRectangle
                    color: "#808080"
                    Text { id: dataText; text: date; visible: true; anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.horizontalCenter; }
                }
            }
    
            Column {
                id: column2
                x: 0
                y: 0
                width: 100
                height: 100
                anchors.right: parent.right
                anchors.rightMargin: 0
    
                Button { id: deviceImageButtonRight; iconSource: deviceImage; visible: elementVisible; anchors.horizontalCenter: parent.horizontalCenter; onClicked: setVisibleEffect(euroText, kwhText, timeText) }
                Text { id: euroTextRight; text: euro; font.pointSize: 12; visible: false; anchors.horizontalCenter: parent.horizontalCenter }
                Text { id: kwhTextRight; text: kwh; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter }
                Text { id: timeTextRight; text: time; visible: false; font.pointSize: 12; anchors.horizontalCenter: parent.horizontalCenter }
            }
        }
    

    @

    Setting my c++ model (works with alternative 1):

    @
    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);
    // qmlRegisterType<Client>("UriTest", 1,0, "Testxx");
    // qmlRegisterType<Timeline>("com.taraSystems.whatsOnClient.Timeline", 1,0, "TestTimeline");

    TimelineModel model;
    model.addDevice(Timeline("content/image/devices/water_heater.png", "1,80 €", "0,80 kWh", "16:00 - 16:45", true));
    model.addDevice(Timeline("03 August 2014", false));
    model.addDevice(Timeline(false));
    
    model.addDevice(Timeline(false));
    model.addDevice(Timeline("02 August 2014", false));
    model.addDevice(Timeline("content/image/devices/water_heater.png", "1,80 €", "0,80 kWh", "16:00 - 16:45", true));
    
    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("timelineModel", &model);
    
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    
    return app.exec();
    

    }
    @



  • I don't check you code but I will do this using a Flickable element.
    This flickable is composed of a Repeater using a model
    When the scrollbar of the flickbale is "near then end", you just add need element in the model.


Log in to reply