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 Updated to NodeBB v4.3 + New Features

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

        2/3

        4 Sept 2021, 00:30

        • Login

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