Solved formatting list items for width
-
Hi all -
I have a QML display that looks like this:
I'd like to give the name column some extra space, taking it from the source and synthesis date columns. The QML file is a bit of a mystery to me, though. I've pared it down to the essentials (I hope) for inclusion here:
//Viewmodel needs to give data on a row by row basis delegate: Component { id: dataDelegate Row { id: data // we must store the DELEGATE index before it gets shadowed by Repeater index! property int delegateIdx: index function getRowData(updaterHack, index) { return viewModel.rowData(index) } Repeater { model: currentData.length + extraCols_ Rectangle { width: cellWidth height: cellHeight Text { visible: index < currentData.length text: { if (index < currentData.length) { currentData[index] } else { "" } } anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter
So, I see where the entire row is formatted, but how do I go about formatting the elements within the repeater?
I'm sure I've left out a lot of important information, so please...ask away!
Thanks...
-
Well, I've made some progress. Using:
property int cellWidth: width / (viewModel.header().length + extraCols_) property variant columnWidths: [cellWidth * 2, cellWidth / 3, cellWidth * 2 / 3, cellWidth] ... Repeater { // passing in the 'throwaway' updater is a hack to ensure that the view updates model: currentData.length + extraCols_ Rectangle { width: if (index < currentData.length) { columnWidths[index] } else { cellWidth }
I now can control the allocated widths for the columns. (I realize this is a hack, but I'm more technician than developer on this project.)
For some reason, I can't apply this to the header, though:
Repeater { id: headerRow Button { id: headerButton background: Rectangle { id: headerRect Text { id: textbox width: columnWidths[index]
Produces this:
Any ideas on how to fix this would be appreciated...thanks.
-
You might have to qualify the name of the object that holds columnWidths:
object.columnWidths[index]
Is it giving any errors on columnWidths?
-
@fcarney I didn't have to qualify my array for the repeating rows:
Item { id: root property variant columnWidths: [cellWidth * 2, cellWidth / 3, cellWidth * 2 / 3, cellWidth] ListView { id: table width: parent.width Component { id: headerDelegate Row { id: headers Repeater { id: headerRow Button { width: cellWidth background: Rectangle { Text { id: textbox width: columnWidths[index] // doesn't work here. delegate: Component { id: dataDelegate Row { Repeater { Rectangle { width: columnWidths[index] // works here.
As far as errors...that's something else I'm having problems with. I simply cannot get any console.log output to display. That makes debugging this stuff even more difficult.
-
I should mention: when I don't apply a width setting to my header elements, the screen looks like this:
I'd like "Source" to be over the I/U column, and "Synthesis Date" to be moved over a bit.
-
Found the problem: the width formatting needed to be applied at the Button level, not at the Text level:
Repeater { id: headerRow model: currentHeaders.length + extraCols_ Button { id: headerButton width: columnWidths[index] ...