CODEWITHSUNDEEP
qtqmlgrid-layoutqt-quick
Deepti
Deepti

Reputation: 119

How to add children inside gridlayout dynamically in Qt quick QML code

I want to add controls at runtime, e.g. a certain number of TextField items added to a GridLayout. I've tried to use Repeater like in the code below (some code skipped for brevity). 

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    width: 400
    height: 400

    GridLayout {
        id : gridmain

        Repeater {
            id:gridgenerate
            TextField{
                id:leditfill
                font.pointSize: 10
                placeholderText: index +1
                focus: true;
            }
        }
    }
}

The Repeater is populated via a JS function:

function gameview() {
    console.log("grid")
    gridmain.rows = 10
    gridmain.columns = 10
    gridgenerate.model = gridmain.rows * gridmain.columns
    gridgenerate.forceActiveFocus()
}

Is this the correct approach? How do I get focus on first TextField of the Gridlayout?

Upvotes: 2

Views: 3045

Answers (2)

Miguel Angel Pons
Miguel Angel Pons

Reputation: 1152

its' a good aproach. you can do it dinamicaly (like a gridView)

function gameview() {
    console.log("grid")

    gridgenerate.model = 0 //destroy all items created by repeater

    gridmain.rows = 10
    gridmain.columns = 10
    gridgenerate.model =  buttonModel.count //add new items, using ListModel

}


ListModel {
    id:buttonModel
    ListElement {
        color: "red"
        cols:2
        rows:2
        name: "B1"
    }
}

    Repeater {
          id:gridgenerate
          property var listobjects:[]
          Rectangle{
              id:button
              color :buttonModel.get(index).color
            }
        }

Upvotes: 0

Jairo
Jairo

Reputation: 886

Almost done. Remove gridgenerate.forceActiveFocus() and set TextField focus property to true if it's the first item: index == 0.

GridLayout {
  id : gridmain

  Repeater {
    id:gridgenerate

    TextField{
        id:leditfill
        font.pointSize: 10
        placeholderText: index +1
        focus: index == 0 // only first item get focus
    }
}

Upvotes: 1

Related Questions