如何在Qt快速QML代碼中動態添加子元素到gridlayout中

Question

我想在運行時添加控件，例如將一定數量的TextField項目添加到GridLayout 。 我嘗試在下面的代碼中使用Repeater （為簡潔起見，跳過了一些代碼）。

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;
            }
        }
    }
}

通過JS函數填充Repeater ：

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

這是正確的方法嗎？ 我如何專注於Gridlayout第一個TextField ？

Answer 1

快完成了 刪除gridgenerate.forceActiveFocus()並將TextField focus屬性設置為true（如果它是第一項）： 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
    }
}

Answer 2

這是一個很好的方法。 你可以做到極致（就像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
            }
        }