need ideas on styling a ListView

[jeremy_k]

@mzimmers said in need ideas on styling a ListView:

I think I got it (sorry for the lengthy code include, but I wanted to show everything):

// Roundlist.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    height: parent.height
    width: parent.width

As a style guide, never reference parent or anything outside of the component. Let the instantiator impose its constraints. Use implicitWidth and implicitHeight to specify reasonable defaults.

[TomZ]

Apologies if this is answered, I only read the first 2 posts of this long topic.

I worked on something very similar just last month and the QML is really simple. (full).

delegate: Item {
  height: 80
  clip: true
  Rectangle {
    // we always have the rounded circles, but if we should not see them, 
    // we move them out of the clipped area.
    height: {
         var h = 80;
         if (index == 0)
             h += 20
         if (index == MAX) // donno, bottom check.
            h += 20
        return h;
      }
      radius: 20
      y: index == 0 ? 0 : -20
  }
}

[mzimmers]

@jeremy_k said in need ideas on styling a ListView:

As a style guide, never reference parent or anything outside of the component. Let the instantiator impose its constraints. Use implicitWidth and implicitHeight to specify reasonable defaults.

Understood. How do you handle a case where the instantiator doesn't know the height, because (for example) there might be a variable number of rows? I'm hoping to make this reusable.

[jeremy_k]

@mzimmers said in need ideas on styling a ListView:

@jeremy_k said in need ideas on styling a ListView:

As a style guide, never reference parent or anything outside of the component. Let the instantiator impose its constraints. Use implicitWidth and implicitHeight to specify reasonable defaults.

Understood. How do you handle a case where the instantiator doesn't know the height, because (for example) there might be a variable number of rows? I'm hoping to make this reusable.

implicitHeight:

If width or height is not specified, an item's effective size will be determined by its implicitWidth or implicitHeight.

However, if an item is the child of a layout, the layout will determine the item's preferred size using its implicit size. In such a scenario, the explicit width or height will be ignored.

The default implicit size for most items is 0x0, however some items have an inherent implicit size which cannot be overridden, for example, Image and Text.

Setting the implicit size is useful for defining components that have a preferred size based on their content

[mzimmers]

@jeremy_k I see. So, this seems to work:

StackLayout {

    Home {}
    Equipment {}
    Rectangle {
        Layout.fillHeight: true
        Layout.fillWidth: true

        Roundlist {
            width: parent.width
        }
    }
}

// Roundlist.qml
Item {
    implicitHeight: activityView.height + (rect1.rectRadius * 2)
    ...

And I can live with this, though it seems weird to set the height in once place, and the width in another. Is there a cleaner way to do this?

[mzimmers]

@TomZ thanks for the reply. I think I prefer my implementation for my particular purposes, but I like elements of yours as well.

[jeremy_k]

@mzimmers said in need ideas on styling a ListView:

And I can live with this, though it seems weird to set the height in once place, and the width in another. Is there a cleaner way to do this?

The component can set implicitWidth as well, and probably should. Otherwise you might end up with a 0-width item that renders correctly on its own, but is overlapped when used in a row layout of some form.

[mzimmers]

@jeremy_k said in need ideas on styling a ListView:

The component can set implicitWidth as well, and probably should.

I'll do that -- just wondering whether there was any way to derive a value from the caller. But I guess the width value is just that, so...that's what I'll use. I'll just pick some value for the implicitWidth that hopefully will never get used.

Thanks for all the help...I think I'm done with this one.

[jeremy_k]

FontMetrics could provide an implicitWidth value based on the model's data. I presume that Text does something similar.

[mzimmers]

For anyone who might be reading this for an answer to their own question, I looked at @TomZ 's solution, and realized that I had a bug in my delegate - my text centering wasn't taking the rounded corners effectively adding height to the top and bottom rows. I had to alter my delegate:

Component {
    id: activityDelegate
    Rectangle {
        height: {
            var h = rect1.rowHeight;
            if (index === 0 || index === (activityModel.count - 1))
                h -= rect1.radius
            return h;
        }
        width: rect1.width
        color: rect1.color
        Text {
            text: model.parameter
            anchors {
                left: parent.left
                leftMargin: parent.height / 2
                verticalCenter: parent.verticalCenter
                verticalCenterOffset: {
                    var o = 0;
                    if (index === 0)
                        o -= (radius / 2)
                    else if (index === (activityModel.count - 1))
                        o += (radius / 2)
                    return o;
                }
            }

            font.pixelSize: 14
            font.bold: true
        }
        Styledswitch {
            id: onOff
            visible: model.switchVisible
            anchors {
                right: parent.right
                rightMargin: parent.height / 2
                verticalCenter: parent.verticalCenter
            }
        }
    }
}

As always, if this doesn't look right, please let me know, and I'll fix it.