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

Create button component inside scrool view list

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 325 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 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

    eyllanescE 1 Reply Last reply
    0
    • N Nathan Miguel

      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

      eyllanescE Offline
      eyllanescE Offline
      eyllanesc
      wrote on last edited by eyllanesc
      #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
      1
      • eyllanescE eyllanesc

        @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 last edited by
        #3

        @eyllanesc tanks a looott

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

        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