formatting list items for width

mzimmers

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...

mzimmers

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.

fcarney

You might have to qualify the name of the object that holds columnWidths:

object.columnWidths[index]

Is it giving any errors on columnWidths?

mzimmers

@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.

mzimmers

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.

mzimmers

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]
            ...