时间戳

首页 > 解决方案 > 有没有办法在 QML 的网格中重复一行？

qt - 有没有办法在 QML 的网格中重复一行？

问题描述

我是 QML 的新手。Note您可以通过替换和FixedNote来重现以下示例Button。我试图让最后一行重复可变次数。当用户单击“添加和弦”时，我想添加最后一行的另一个重复，当用户单击“删除和弦”时，我想添加删除最后一行。我的直觉（最后一行的嵌套中继器）似乎不起作用？

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Justly")
    ScrollView {
        anchors.fill: parent
        Column {
            spacing: 20
            Row {
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: 5
                TextField {
                    anchors.verticalCenter: parent.verticalCenter
                    placeholderText: qsTr("100")
                    width: 50
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "bpm"
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "with key starting at"
                }
                TextField {
                    anchors.verticalCenter: parent.verticalCenter
                    placeholderText: qsTr("440")
                    width: 60
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "hz"
                }

            }
            Row {
                spacing: 20
                anchors.horizontalCenter: parent.horizontalCenter
                Grid {
                    id: grid
                    columns: 3
                    spacing: 15
                    anchors.verticalCenter: parent.verticalCenter
                    horizontalItemAlignment: Grid.AlignHCenter
                    verticalItemAlignment: Grid.AlignVCenter
                    Text {
                        text: "Chord"
                    }
                    Text {
                        text: "Key"
                    }
                    Repeater{
                        id: voice_names
                        model: 1
                        TextField {
                            placeholderText: model.index + 1
                            width: 70
                        }
                    }
                    Button {
                        text: "Play"
                    }
                    FixedNote { }
                    Repeater {
                        id: voice_notes
                        model: 1
                        Note { }
                    }
                }
                Column {
                    spacing: 5
                    anchors.verticalCenter: parent.verticalCenter
                    Button {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "Add voice"
                        onClicked: {
                            grid.columns = grid.columns + 1
                            voice_names.model = voice_names.model + 1
                            voice_notes.model = voice_notes.model + 1
                        }
                    }
                    Button {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "Remove voice"
                        onClicked: {
                            voice_names.model = voice_names.model - 1
                            voice_notes.model = voice_notes.model - 1
                            grid.columns = grid.columns - 1
                        }
                    }
                }
            }
            Column {
                spacing: 5
                anchors.horizontalCenter: parent.horizontalCenter
                Button {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "Add chord"
                    onClicked: {
                        // chords.model = chords.model + 1
                    }
                }
                Button {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "Remove chord"
                    onClicked: {
                        // chords.model = chords.model - 1
                    }
                }
            }
        }
    }
}

标签： qtqml

解决方案

据我了解，您正在尝试创建一个TextField项目矩阵。你的直觉是对的，你可以使用两个嵌套的中继器。一个生成行，另一个生成列。

这是一个如何做到这一点的示例。有两个属性来保存行数和列数，然后将此属性用作中继器的模型：

import QtQuick 2.12
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

Item {
  anchors.fill: parent
  anchors.margins: 30

  property int numRows: 4
  property int numCols: 5

  Column {
    spacing: 10

    Text {
      height: 50
      text: "QML input matrix demo"
      font.bold: true
      font.pixelSize: 20
    }

    Row {
        spacing: 10

        Text {
          width: 70
          text: " " 
        }

        Repeater {
          model: numCols

          delegate: Text {
            width: 70
            text: "Col " + index 
          }
        }
      }

    Repeater {
      model: numRows

      delegate: Row {
        spacing: 10

        property int rIndex: index

        Text {
          width: 70
          anchors.verticalCenter: parent.verticalCenter
          text: "Row " + index 
        }

        Repeater {
          model: numCols

          delegate: TextField {

            property int cIndex: index

            width: 70
            text: rIndex + "," + cIndex 
          }
        }
      }
    }

    Item {
      height: 50
      width: 1
    }

    Row {
      spacing: 5

      Button {
        text: "Add col"
        onClicked: numCols = numCols + 1
      }

      Button {
        text: "Remove col"
        onClicked: numCols = numCols - 1
      }

      Button {
        text: "Add row"
        onClicked: numRows++
      }

      Button {
        text: "Remove row"
        onClicked: numRows--
      }
    }
    }
}

这也是该片段的工作版本： https ://cutes.io/project/Kg

推荐阅读