Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. General talk
  3. Brainstorm
  4. need ideas on styling a ListView
Forum Update on Tuesday, May 27th 2025

need ideas on styling a ListView

Scheduled Pinned Locked Moved Solved Brainstorm
27 Posts 4 Posters 4.5k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • jeremy_kJ Online
    jeremy_kJ Online
    jeremy_k
    wrote on last edited by
    #2

    I've done this by overlaying a transparent Rectangle with a border and a radius.

    Eg

    ListView {
        Rectangle {
            color: "transparent"
            anchors.fill: parent
            border {
                radius: 1
                color: "black"
                width: 1
            }
        }
    }
    

    Asking a question about code? http://eel.is/iso-c++/testcase/

    mzimmersM 1 Reply Last reply
    0
    • jeremy_kJ jeremy_k

      I've done this by overlaying a transparent Rectangle with a border and a radius.

      Eg

      ListView {
          Rectangle {
              color: "transparent"
              anchors.fill: parent
              border {
                  radius: 1
                  color: "black"
                  width: 1
              }
          }
      }
      
      mzimmersM Offline
      mzimmersM Offline
      mzimmers
      wrote on last edited by
      #3

      @jeremy_k interesting idea. I was thinking along similar lines (though kind of backwards) -- put a rectangle behind the list, and color the Rectangle the desired color of the list entries. Then each list entry would be a transparent rectangle (with all the stuff I need to put into it). The only problem here is -- can I change the color of the spacing between the items?

      Thanks...

      1 Reply Last reply
      0
      • jeremy_kJ Online
        jeremy_kJ Online
        jeremy_k
        wrote on last edited by
        #4

        I had presumed that this was an item view, for no apparent reason.

        If there's no scrolling, putting the Rectangle behind sounds fine. Transparent items with Rectangles to draw the dividers could work. A LineShape is another option. It might be easier to use an Image background for everything but the text.

        Asking a question about code? http://eel.is/iso-c++/testcase/

        mzimmersM 1 Reply Last reply
        0
        • jeremy_kJ jeremy_k

          I had presumed that this was an item view, for no apparent reason.

          If there's no scrolling, putting the Rectangle behind sounds fine. Transparent items with Rectangles to draw the dividers could work. A LineShape is another option. It might be easier to use an Image background for everything but the text.

          mzimmersM Offline
          mzimmersM Offline
          mzimmers
          wrote on last edited by
          #5

          @jeremy_k said in need ideas on styling a ListView:

          I had presumed that this was an item view, for no apparent reason.

          That's correct. The idea was to put the ListView within the Rectangle.

          I'm still new to using ListView, so this idea may be untenable.

          jeremy_kJ JoeCFDJ 2 Replies Last reply
          0
          • mzimmersM mzimmers

            @jeremy_k said in need ideas on styling a ListView:

            I had presumed that this was an item view, for no apparent reason.

            That's correct. The idea was to put the ListView within the Rectangle.

            I'm still new to using ListView, so this idea may be untenable.

            jeremy_kJ Online
            jeremy_kJ Online
            jeremy_k
            wrote on last edited by
            #6

            @mzimmers said in need ideas on styling a ListView:

            @jeremy_k said in need ideas on styling a ListView:

            I had presumed that this was an item view, for no apparent reason.
            

            That's correct. The idea was to put the ListView within the Rectangle.

            I'm still new to using ListView, so this idea may be untenable.

            I don't think so, but it may be overkill. Will there always be the same 4 fields, and does adding the compexity of an item model make sense? I have encountered deployed products that had list views for data which all fit in on screen. How did I know? Someone forgot to set Flickable.boundsBehavior or the equivalent in other frameworks to Flickable.StopAtBounds.

            Another idea is to draw the rounded corned via an Image or Canvas in the delegate that is hidden if index !== 0 and index !== count -1.

            Asking a question about code? http://eel.is/iso-c++/testcase/

            mzimmersM 1 Reply Last reply
            0
            • mzimmersM mzimmers

              @jeremy_k said in need ideas on styling a ListView:

              I had presumed that this was an item view, for no apparent reason.

              That's correct. The idea was to put the ListView within the Rectangle.

              I'm still new to using ListView, so this idea may be untenable.

              JoeCFDJ Offline
              JoeCFDJ Offline
              JoeCFD
              wrote on last edited by
              #7

              @mzimmers
              is this easier?
              https://stackoverflow.com/questions/29779347/wrapping-listview-inside-rectangle

              mzimmersM 1 Reply Last reply
              0
              • jeremy_kJ jeremy_k

                @mzimmers said in need ideas on styling a ListView:

                @jeremy_k said in need ideas on styling a ListView:

                I had presumed that this was an item view, for no apparent reason.
                

                That's correct. The idea was to put the ListView within the Rectangle.

                I'm still new to using ListView, so this idea may be untenable.

                I don't think so, but it may be overkill. Will there always be the same 4 fields, and does adding the compexity of an item model make sense? I have encountered deployed products that had list views for data which all fit in on screen. How did I know? Someone forgot to set Flickable.boundsBehavior or the equivalent in other frameworks to Flickable.StopAtBounds.

                Another idea is to draw the rounded corned via an Image or Canvas in the delegate that is hidden if index !== 0 and index !== count -1.

                mzimmersM Offline
                mzimmersM Offline
                mzimmers
                wrote on last edited by
                #8

                @jeremy_k no, it won't always be the same number of items in the list, nor will all lists be composed of the same component. I think a standard ListModel/ListView is in order here; I just need a way to put a rectangle behind the rendered area.

                1 Reply Last reply
                0
                • JoeCFDJ JoeCFD

                  @mzimmers
                  is this easier?
                  https://stackoverflow.com/questions/29779347/wrapping-listview-inside-rectangle

                  mzimmersM Offline
                  mzimmersM Offline
                  mzimmers
                  wrote on last edited by
                  #9

                  @JoeCFD that's not quite what I want. What I think I need is:

                  1. a Rectangle with the color I would normally use in my delegate. This would have the rounded corners. (z: 1)
                  2. another Rectangle with height = (first rectangle - (firstRectangleRadius * 2), vertically centered. This Rectangle would be colored to represent the dividers. (z: 2)
                  3. my ListView elements, with the same color as the first Rectangle. (z: 3)

                  But I don't know how to code this. When I try to introduce the first Rectangle, it hides my list, even if I use the z values.

                  JoeCFDJ 1 Reply Last reply
                  0
                  • mzimmersM mzimmers

                    @JoeCFD that's not quite what I want. What I think I need is:

                    1. a Rectangle with the color I would normally use in my delegate. This would have the rounded corners. (z: 1)
                    2. another Rectangle with height = (first rectangle - (firstRectangleRadius * 2), vertically centered. This Rectangle would be colored to represent the dividers. (z: 2)
                    3. my ListView elements, with the same color as the first Rectangle. (z: 3)

                    But I don't know how to code this. When I try to introduce the first Rectangle, it hides my list, even if I use the z values.

                    JoeCFDJ Offline
                    JoeCFDJ Offline
                    JoeCFD
                    wrote on last edited by JoeCFD
                    #10

                    @mzimmers I do not think that is a good idea. Delegates are made for rows. Your round corners are global settings.
                    Normally you use alternative colors in listview(just like in tables) to display different rows. Pretty much standard practice. Therefore, no dividers are needed.

                    mzimmersM jeremy_kJ 2 Replies Last reply
                    0
                    • JoeCFDJ JoeCFD

                      @mzimmers I do not think that is a good idea. Delegates are made for rows. Your round corners are global settings.
                      Normally you use alternative colors in listview(just like in tables) to display different rows. Pretty much standard practice. Therefore, no dividers are needed.

                      mzimmersM Offline
                      mzimmersM Offline
                      mzimmers
                      wrote on last edited by
                      #11

                      @JoeCFD OK, but isn't there some way to put the two Rectangles I mentioned behind the entire ListView?

                      1 Reply Last reply
                      0
                      • jeremy_kJ Online
                        jeremy_kJ Online
                        jeremy_k
                        wrote on last edited by
                        #12
                        import QtQuick 2.15
                        import QtQuick.Window 2.15
                        
                        Window {
                            width: 640
                            height: 480
                            visible: true
                        
                            Rectangle {
                                id: background
                                anchors.fill: parent
                                color: "blue"
                            }
                        
                            ListView {
                                model: 10
                                anchors.centerIn: parent
                                height: parent.height / 2
                                width: parent.width / 2
                                spacing: 2
                                boundsBehavior: Flickable.StopAtBounds
                        
                                delegate: Rectangle {
                                    height: 10
                                    width: ListView.view.width
                                    Text {
                                        text: index
                                        anchors.centerIn: parent
                                    }
                                }
                        
                                Rectangle {
                                    anchors.centerIn: parent.contentItem
                                    border.width: 15
                                    border.color: background.color
                                    width: parent.contentItem.width + border.width * 2
                                    height: parent.contentItem.height + border.width * 2
                                    radius: border.width * 2
                                    color: "transparent"
                                }
                            }
                        }
                        

                        Asking a question about code? http://eel.is/iso-c++/testcase/

                        mzimmersM 1 Reply Last reply
                        1
                        • jeremy_kJ jeremy_k
                          import QtQuick 2.15
                          import QtQuick.Window 2.15
                          
                          Window {
                              width: 640
                              height: 480
                              visible: true
                          
                              Rectangle {
                                  id: background
                                  anchors.fill: parent
                                  color: "blue"
                              }
                          
                              ListView {
                                  model: 10
                                  anchors.centerIn: parent
                                  height: parent.height / 2
                                  width: parent.width / 2
                                  spacing: 2
                                  boundsBehavior: Flickable.StopAtBounds
                          
                                  delegate: Rectangle {
                                      height: 10
                                      width: ListView.view.width
                                      Text {
                                          text: index
                                          anchors.centerIn: parent
                                      }
                                  }
                          
                                  Rectangle {
                                      anchors.centerIn: parent.contentItem
                                      border.width: 15
                                      border.color: background.color
                                      width: parent.contentItem.width + border.width * 2
                                      height: parent.contentItem.height + border.width * 2
                                      radius: border.width * 2
                                      color: "transparent"
                                  }
                              }
                          }
                          
                          mzimmersM Offline
                          mzimmersM Offline
                          mzimmers
                          wrote on last edited by
                          #13

                          @jeremy_k that's getting really close to what I need. Now, regarding the background rectangle, how best to set its height to the effective height of the ListView instead of filling the Window?

                          Thanks!

                          jeremy_kJ 1 Reply Last reply
                          0
                          • mzimmersM mzimmers

                            @jeremy_k that's getting really close to what I need. Now, regarding the background rectangle, how best to set its height to the effective height of the ListView instead of filling the Window?

                            Thanks!

                            jeremy_kJ Online
                            jeremy_kJ Online
                            jeremy_k
                            wrote on last edited by
                            #14
                                ListView {
                                    id: listView
                                    model: 10
                                    anchors.centerIn: parent
                                    height: parent.height / 2
                                    width: parent.width / 2
                                    spacing: 2
                                    boundsBehavior: Flickable.StopAtBounds
                            
                                    delegate: Rectangle {
                                        height: 10
                                        width: ListView.view.width
                                    }
                            
                                    Rectangle {
                                        anchors.fill: overlay
                                        color: "blue"
                                        z: -1
                                    }
                                    Rectangle {
                                        id: overlay
                                        anchors.centerIn: parent.contentItem
                                        border.width: 15
                                        border.color: "blue"
                                        width: parent.contentItem.width + border.width * 2
                                        height: parent.contentItem.height + border.width * 2
                                        radius: border.width * 2
                                        color: "transparent"
                                    }
                                }
                            

                            Asking a question about code? http://eel.is/iso-c++/testcase/

                            1 Reply Last reply
                            0
                            • JoeCFDJ JoeCFD

                              @mzimmers I do not think that is a good idea. Delegates are made for rows. Your round corners are global settings.
                              Normally you use alternative colors in listview(just like in tables) to display different rows. Pretty much standard practice. Therefore, no dividers are needed.

                              jeremy_kJ Online
                              jeremy_kJ Online
                              jeremy_k
                              wrote on last edited by
                              #15

                              @JoeCFD said in need ideas on styling a ListView:

                              @mzimmers I do not think that is a good idea. Delegates are made for rows. Your round corners are global settings.

                              DelegateChooser, explicit use of a Loader, or hiding/showing items that are always present are all viable techniques.

                              Going this route, I might do something like:

                              ListView {
                                  delegate: Rectangle {
                                      id: d
                                      Image {
                                          source: d.index == 0 ? topCorner
                                                  : d.index == (d.ListView.view.count - 1) ? bottomCorner
                                                  : undefined
                                      }
                              }
                              

                              Normally you use alternative colors in listview(just like in tables) to display different rows. Pretty much standard practice. Therefore, no dividers are needed.

                              That's a common design choice, but certainly not universal. Wanting a different appearance isn't unreasonable.

                              Asking a question about code? http://eel.is/iso-c++/testcase/

                              1 Reply Last reply
                              0
                              • mzimmersM Offline
                                mzimmersM Offline
                                mzimmers
                                wrote on last edited by
                                #16

                                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
                                
                                    Rectangle {
                                        id: rect1
                                        property real rectRadius: 5.0
                                        property real rowHeight: 60.0
                                        property real rowSpacing: 3.0
                                
                                        height: activityView.height + (rectRadius * 2)
                                        width: parent.width
                                        radius: rect1.rectRadius
                                        anchors {
                                            horizontalCenter: parent.horizontalCenter
                                            verticalCenter: parent.verticalCenter
                                        }
                                        color: 'white'
                                
                                        Rectangle {
                                            id: rect2
                                            height: activityView.height
                                            width: rect1.width
                                            anchors.verticalCenter: rect1.verticalCenter
                                            color: mainWindow.color
                                
                                            ListModel {
                                                id: activityModel
                                                ListElement { text: "aaa" }
                                                ListElement { text: "bbb" }
                                                ListElement { text: "ccc" }
                                                ListElement { text: "ddd" }
                                                ListElement { text: "eee" }
                                            }
                                
                                            Component {
                                                id: activityDelegate
                                                Rectangle {
                                                    height: rect1.rowHeight
                                                    width: rect1.width
                                                    color: rect1.color
                                                    Text {
                                                        text: model.text
                                                        anchors {
                                                            horizontalCenter: parent.horizontalCenter
                                                            verticalCenter: parent.verticalCenter
                                                        }
                                                    }
                                                }
                                            }
                                
                                            ListView {
                                                id: activityView
                                                implicitHeight: contentItem.childrenRect.height
                                                width: rect1.width
                                                spacing: rect1.rowSpacing
                                                clip: true
                                                model: activityModel
                                                delegate: activityDelegate
                                
                                            }
                                        }
                                    }
                                }
                                

                                It works by itself, though I'm having problem embedding it in a ColumnLayout - instead of appearing inline, it overlays the other items. It should look something like this:
                                good.PNG
                                But it comes out like this (please ignore the different text in the rows):
                                actual.PNG
                                Here's how I'm trying to use it (heavily edited):

                                Flickable {
                                	id: flickable
                                	Layout.fillHeight: true
                                	Layout.fillWidth: true
                                	clip: true
                                	contentHeight: pumpStuff.height
                                
                                	ColumnLayout {
                                		id: pumpStuff
                                		height: parent.height
                                		width: flickable.width - (scroller.width * 2)
                                
                                		RowLayout {
                                			id: actions
                                		}
                                
                                		Text {
                                			id: parameters
                                		}
                                
                                		Roundlist {}
                                
                                		RowLayout {
                                			id: activities
                                		}
                                	}
                                	ScrollBar.vertical: ScrollBar {
                                		id: scroller
                                		policy: ScrollBar.AlwaysOn//AsNeeded
                                	}
                                }
                                

                                Any idea why this is happening?

                                Thanks...

                                jeremy_kJ 2 Replies Last reply
                                0
                                • mzimmersM mzimmers

                                  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
                                  
                                      Rectangle {
                                          id: rect1
                                          property real rectRadius: 5.0
                                          property real rowHeight: 60.0
                                          property real rowSpacing: 3.0
                                  
                                          height: activityView.height + (rectRadius * 2)
                                          width: parent.width
                                          radius: rect1.rectRadius
                                          anchors {
                                              horizontalCenter: parent.horizontalCenter
                                              verticalCenter: parent.verticalCenter
                                          }
                                          color: 'white'
                                  
                                          Rectangle {
                                              id: rect2
                                              height: activityView.height
                                              width: rect1.width
                                              anchors.verticalCenter: rect1.verticalCenter
                                              color: mainWindow.color
                                  
                                              ListModel {
                                                  id: activityModel
                                                  ListElement { text: "aaa" }
                                                  ListElement { text: "bbb" }
                                                  ListElement { text: "ccc" }
                                                  ListElement { text: "ddd" }
                                                  ListElement { text: "eee" }
                                              }
                                  
                                              Component {
                                                  id: activityDelegate
                                                  Rectangle {
                                                      height: rect1.rowHeight
                                                      width: rect1.width
                                                      color: rect1.color
                                                      Text {
                                                          text: model.text
                                                          anchors {
                                                              horizontalCenter: parent.horizontalCenter
                                                              verticalCenter: parent.verticalCenter
                                                          }
                                                      }
                                                  }
                                              }
                                  
                                              ListView {
                                                  id: activityView
                                                  implicitHeight: contentItem.childrenRect.height
                                                  width: rect1.width
                                                  spacing: rect1.rowSpacing
                                                  clip: true
                                                  model: activityModel
                                                  delegate: activityDelegate
                                  
                                              }
                                          }
                                      }
                                  }
                                  

                                  It works by itself, though I'm having problem embedding it in a ColumnLayout - instead of appearing inline, it overlays the other items. It should look something like this:
                                  good.PNG
                                  But it comes out like this (please ignore the different text in the rows):
                                  actual.PNG
                                  Here's how I'm trying to use it (heavily edited):

                                  Flickable {
                                  	id: flickable
                                  	Layout.fillHeight: true
                                  	Layout.fillWidth: true
                                  	clip: true
                                  	contentHeight: pumpStuff.height
                                  
                                  	ColumnLayout {
                                  		id: pumpStuff
                                  		height: parent.height
                                  		width: flickable.width - (scroller.width * 2)
                                  
                                  		RowLayout {
                                  			id: actions
                                  		}
                                  
                                  		Text {
                                  			id: parameters
                                  		}
                                  
                                  		Roundlist {}
                                  
                                  		RowLayout {
                                  			id: activities
                                  		}
                                  	}
                                  	ScrollBar.vertical: ScrollBar {
                                  		id: scroller
                                  		policy: ScrollBar.AlwaysOn//AsNeeded
                                  	}
                                  }
                                  

                                  Any idea why this is happening?

                                  Thanks...

                                  jeremy_kJ Online
                                  jeremy_kJ Online
                                  jeremy_k
                                  wrote on last edited by
                                  #17

                                  Unexpected overlapping is frequently a lack of sizing in the outermost item in a component. Eg:

                                  Item {
                                      Rectangle { width: 100; height: 100 }
                                  }
                                  

                                  Asking a question about code? http://eel.is/iso-c++/testcase/

                                  1 Reply Last reply
                                  0
                                  • mzimmersM mzimmers

                                    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
                                    
                                        Rectangle {
                                            id: rect1
                                            property real rectRadius: 5.0
                                            property real rowHeight: 60.0
                                            property real rowSpacing: 3.0
                                    
                                            height: activityView.height + (rectRadius * 2)
                                            width: parent.width
                                            radius: rect1.rectRadius
                                            anchors {
                                                horizontalCenter: parent.horizontalCenter
                                                verticalCenter: parent.verticalCenter
                                            }
                                            color: 'white'
                                    
                                            Rectangle {
                                                id: rect2
                                                height: activityView.height
                                                width: rect1.width
                                                anchors.verticalCenter: rect1.verticalCenter
                                                color: mainWindow.color
                                    
                                                ListModel {
                                                    id: activityModel
                                                    ListElement { text: "aaa" }
                                                    ListElement { text: "bbb" }
                                                    ListElement { text: "ccc" }
                                                    ListElement { text: "ddd" }
                                                    ListElement { text: "eee" }
                                                }
                                    
                                                Component {
                                                    id: activityDelegate
                                                    Rectangle {
                                                        height: rect1.rowHeight
                                                        width: rect1.width
                                                        color: rect1.color
                                                        Text {
                                                            text: model.text
                                                            anchors {
                                                                horizontalCenter: parent.horizontalCenter
                                                                verticalCenter: parent.verticalCenter
                                                            }
                                                        }
                                                    }
                                                }
                                    
                                                ListView {
                                                    id: activityView
                                                    implicitHeight: contentItem.childrenRect.height
                                                    width: rect1.width
                                                    spacing: rect1.rowSpacing
                                                    clip: true
                                                    model: activityModel
                                                    delegate: activityDelegate
                                    
                                                }
                                            }
                                        }
                                    }
                                    

                                    It works by itself, though I'm having problem embedding it in a ColumnLayout - instead of appearing inline, it overlays the other items. It should look something like this:
                                    good.PNG
                                    But it comes out like this (please ignore the different text in the rows):
                                    actual.PNG
                                    Here's how I'm trying to use it (heavily edited):

                                    Flickable {
                                    	id: flickable
                                    	Layout.fillHeight: true
                                    	Layout.fillWidth: true
                                    	clip: true
                                    	contentHeight: pumpStuff.height
                                    
                                    	ColumnLayout {
                                    		id: pumpStuff
                                    		height: parent.height
                                    		width: flickable.width - (scroller.width * 2)
                                    
                                    		RowLayout {
                                    			id: actions
                                    		}
                                    
                                    		Text {
                                    			id: parameters
                                    		}
                                    
                                    		Roundlist {}
                                    
                                    		RowLayout {
                                    			id: activities
                                    		}
                                    	}
                                    	ScrollBar.vertical: ScrollBar {
                                    		id: scroller
                                    		policy: ScrollBar.AlwaysOn//AsNeeded
                                    	}
                                    }
                                    

                                    Any idea why this is happening?

                                    Thanks...

                                    jeremy_kJ Online
                                    jeremy_kJ Online
                                    jeremy_k
                                    wrote on last edited by jeremy_k
                                    #18

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

                                    Asking a question about code? http://eel.is/iso-c++/testcase/

                                    mzimmersM 1 Reply Last reply
                                    1
                                    • TomZT Offline
                                      TomZT Offline
                                      TomZ
                                      wrote on last edited by
                                      #19

                                      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
                                        }
                                      }
                                      mzimmersM 1 Reply Last reply
                                      1
                                      • jeremy_kJ 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.

                                        mzimmersM Offline
                                        mzimmersM Offline
                                        mzimmers
                                        wrote on last edited by
                                        #20

                                        @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_kJ 1 Reply Last reply
                                        0
                                        • mzimmersM 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_kJ Online
                                          jeremy_kJ Online
                                          jeremy_k
                                          wrote on last edited by jeremy_k
                                          #21

                                          @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

                                          Asking a question about code? http://eel.is/iso-c++/testcase/

                                          mzimmersM 1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved