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.cellHeightColumn { 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: 5Button { 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.