Timeline (like Facebook) with GridView

[morker]

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();

}
@

[DeeeZ]

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.