Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

formatting list items for width



  • Hi all -

    I have a QML display that looks like this:
    loadsamplesheet2.PNG

    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:

    sample.PNG

    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:
    sample.PNG

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

Log in to reply