import QtQuick 2.4 import QtQuick.Window 2.2 import QtQuick.Controls 1.2 Window { id : mainWindow visible: true width: 800 height: 480 property real gridListWidth : (width * 0.60) property real gridListHeight : (height * 0.50) property real gridCellSpacing : (height * 0.004) property real gridCellHeight : (height * 0.039) property real gridCellWidth : (width * 0.20) Rectangle { id : rectBackground anchors.fill: parent color : "white" ListView { id : ls width: mainWindow.gridListWidth height: mainWindow.gridListHeight clip : true headerPositioning: ListView.OverlayHeader spacing : mainWindow.gridCellSpacing model: ListModel { ListElement { name: "Bill Smith" number: "555 3264" hairColor: "red" } ListElement { name: "John Brown" number: "484 7789" hairColor: "blue" } ListElement { name: "Sam Wise" number: "284 1547" hairColor: "yellow" } } header : Row { spacing : mainWindow.gridCellSpacing Rectangle { width : mainWindow.gridCellWidth height : mainWindow.gridCellHeight color : "blue" Text { anchors.centerIn: parent color : "white" text: "Name" } } Rectangle { width : mainWindow.gridCellWidth height : mainWindow.gridCellHeight color : "blue" Text { anchors.centerIn: parent color : "white" text: "Number" } } Rectangle { width : mainWindow.gridCellWidth height : mainWindow.gridCellHeight color : "blue" Text { anchors.centerIn: parent color : "white" text: "Hair Color" } } } delegate: Row { spacing : mainWindow.gridCellSpacing Rectangle { width : mainWindow.gridCellWidth height : mainWindow.gridCellHeight color : "red" Text { anchors.centerIn: parent color : "white" text: name } } Rectangle { width : mainWindow.gridCellWidth height : mainWindow.gridCellHeight color : "red" Text { anchors.centerIn: parent color : "white" text: number } } Rectangle { width : mainWindow.gridCellWidth height : mainWindow.gridCellHeight color : "red" Text { anchors.centerIn: parent color : "white" text: hairColor } } } } } }