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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.