Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ListView draws each item on top of each other. What am I doing wrong?
Forum Updated to NodeBB v4.3 + New Features

ListView draws each item on top of each other. What am I doing wrong?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 1.0k Views
  • 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.
  • T Offline
    T Offline
    tapirath
    wrote on last edited by
    #1

    Below code produces list view as shown in the screenshot. Probably I'm missing something very trivial but I can't figure out what?

    alt text

    import QtQuick 2.0
    
    ListModel {
        ListElement {
            flag: "us"
            name: "USA"
            strength: "5"
        }
        ListElement {
            flag: "fr"
            name: "France"
            strength: "4"
        }
        ListElement {
            flag: "nl"
            name: "Netherlands"
            strength: "2"
        }
    }
    
    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
    
        Component {
            id: countryItem
    
            Item {
                Text {
                    text: name + " " + flag + " " + strength
                }
            }
        }
    
        ListView {
            anchors {
                fill: parent
            }
            model: TestModel{}
            delegate: countryItem
        }
    }
    
    J.HilkJ 1 Reply Last reply
    0
    • T tapirath

      Below code produces list view as shown in the screenshot. Probably I'm missing something very trivial but I can't figure out what?

      alt text

      import QtQuick 2.0
      
      ListModel {
          ListElement {
              flag: "us"
              name: "USA"
              strength: "5"
          }
          ListElement {
              flag: "fr"
              name: "France"
              strength: "4"
          }
          ListElement {
              flag: "nl"
              name: "Netherlands"
              strength: "2"
          }
      }
      
      import QtQuick 2.9
      import QtQuick.Window 2.2
      
      Window {
          visible: true
          width: 640
          height: 480
      
          Component {
              id: countryItem
      
              Item {
                  Text {
                      text: name + " " + flag + " " + strength
                  }
              }
          }
      
          ListView {
              anchors {
                  fill: parent
              }
              model: TestModel{}
              delegate: countryItem
          }
      }
      
      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      hi @tapirath
      give your countryItem -component a height, and preferably a width as well and you should be fine


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      1 Reply Last reply
      1
      • T Offline
        T Offline
        tapirath
        wrote on last edited by
        #3

        Works perfectly thanks

        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