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. Create button component inside scrool view list
Forum Update on Monday, May 27th 2025

Create button component inside scrool view list

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 331 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.
  • N Offline
    N Offline
    Nathan Miguel
    wrote on 3 Sept 2021, 23:50 last edited by
    #1

    i have a scroll view and i want to add button from loop and edit your text

    bb982ec0-6efd-4468-a656-93554773abc4-image.png

    I created a qml form file, but i dont now how to add it using code

    af96c65d-752b-47a0-a681-81d64386fb44-image.png

    E 1 Reply Last reply 4 Sept 2021, 00:30
    0
    • N Nathan Miguel
      3 Sept 2021, 23:50

      i have a scroll view and i want to add button from loop and edit your text

      bb982ec0-6efd-4468-a656-93554773abc4-image.png

      I created a qml form file, but i dont now how to add it using code

      af96c65d-752b-47a0-a681-81d64386fb44-image.png

      E Offline
      E Offline
      eyllanesc
      wrote on 4 Sept 2021, 00:30 last edited by eyllanesc 9 Apr 2021, 00:32
      #2

      @Nathan-Miguel

      A trivial solution is to use Component.createObject to create the buttons and add it to a ColumnLayout:

      import QtQuick 2.15
      import QtQuick.Controls 2.15
      import QtQuick.Layouts 1.15
      
      ApplicationWindow {
          visible: true
          width: 100
          height: 100
          ScrollView {
              anchors.fill: parent
              ColumnLayout {
                  id: columnLayout
              }
          }
          property Component buttonProvider: Button {
          }
          Component.onCompleted: {
              for(let i=0; i < 10; ++i){
                  var button = buttonProvider.createObject(columnLayout)
                  button.text = i
              }
          }
      }
      

      On the other hand, another better solution is to use a model together with a Repeater since if the model is modified, the text of the buttons is modified for example.

      import QtQuick 2.15
      import QtQuick.Controls 2.15
      import QtQuick.Layouts 1.15
      
      ApplicationWindow {
          visible: true
          width: 100
          height: 100
          ListModel {
              id: listModel
              Component.onCompleted: {
                  for (let i = 0; i < 10; ++i) {
                      listModel.append({
                          "value": i
                      });
                  }
              }
          }
          ScrollView {
              anchors.fill: parent
              ColumnLayout {
                  Repeater {
                      model: listModel
                      Button {
                          text: model.value
                          width: 100
                          height: 100
                      }
                  }
              }
          }
      }
      

      If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

      N 1 Reply Last reply 4 Sept 2021, 02:58
      1
      • E eyllanesc
        4 Sept 2021, 00:30

        @Nathan-Miguel

        A trivial solution is to use Component.createObject to create the buttons and add it to a ColumnLayout:

        import QtQuick 2.15
        import QtQuick.Controls 2.15
        import QtQuick.Layouts 1.15
        
        ApplicationWindow {
            visible: true
            width: 100
            height: 100
            ScrollView {
                anchors.fill: parent
                ColumnLayout {
                    id: columnLayout
                }
            }
            property Component buttonProvider: Button {
            }
            Component.onCompleted: {
                for(let i=0; i < 10; ++i){
                    var button = buttonProvider.createObject(columnLayout)
                    button.text = i
                }
            }
        }
        

        On the other hand, another better solution is to use a model together with a Repeater since if the model is modified, the text of the buttons is modified for example.

        import QtQuick 2.15
        import QtQuick.Controls 2.15
        import QtQuick.Layouts 1.15
        
        ApplicationWindow {
            visible: true
            width: 100
            height: 100
            ListModel {
                id: listModel
                Component.onCompleted: {
                    for (let i = 0; i < 10; ++i) {
                        listModel.append({
                            "value": i
                        });
                    }
                }
            }
            ScrollView {
                anchors.fill: parent
                ColumnLayout {
                    Repeater {
                        model: listModel
                        Button {
                            text: model.value
                            width: 100
                            height: 100
                        }
                    }
                }
            }
        }
        
        N Offline
        N Offline
        Nathan Miguel
        wrote on 4 Sept 2021, 02:58 last edited by
        #3

        @eyllanesc tanks a looott

        6b26e01d-b0e2-455c-ac87-63f45d15f375-image.png

        1 Reply Last reply
        0

        3/3

        4 Sept 2021, 02:58

        • Login

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