Создавать компоненты QML динамически внутри повторителя

Question

У меня есть ListModel, элементы которой имеют информацию о типе данных.Я использую это в Repeater для отображения метки и компонента в соответствии с типом данных, но я не знаю, как изменить этот TextField (в случае типа «TEXT») с помощью;например, кнопка для вызова файла диалога в случае «ИЗОБРАЖЕНИЕ»;или TextField с маской для double в случае, если я получаю тип данных "REAL".Как я могу это сделать?

Вот мой код:

Repeater {
    id: r2
    model: ListModel {
      ListElement {
        nombreCampo: "Name"
        datoValor: "John Doe"
        tipoDato: "TEXT"
      }

      ListElement {
        nombreCampo: "Birth Date"
        datoValor: "19910101"
        tipoDato: "DATE"
      }

      ListElement {
        nombreCampo: "Photo"
        datoValor: "whatever.jpg"
        tipoDato: "IMAGE"
      }

      ListElement {
        nombreCampo: "Height"
        datoValor: "1.55"
        tipoDato: "REAL"
      }
    } 

    Text {
      text: nombreCampo
    }

    // this would go well with "TEXT" but not with "DATE" (where I'd prefer a datepicker) 
    // or with "IMAGE" (where I'd prefer a button to call a file dialog).
    // so this is the part where I need to generate it according to the case
    TextField {
        text: datoValor
        placeholderText: nombreCampo
        onTextChanged: {
            r2.model.get( index ).datoValor = this.text;
        }

    }
}

Заранее спасибо.

Answer 1

Я бы использовал загрузчик внутри вашего делегата.

Column{
    Repeater{
        model: // your model
        delegate: Loader{
            anchors{
                right: parent.right
                left: parent.left
            }
            sourceComponent: {
                if(tipoDato=== "TEXT")      {return textFieldComponent;}
                else if(tipoDato=== "DATE") {return datePickerComponent;}
                else if(tipoDato=== "IMAGE"){return imagePickerPickerComponent;}
                else if(tipoDato=== "REAL") {return floatPickerComponent;}
            }
        }
    }
}

// Component definition

Component{
    id: textFieldComponent
    // Define your component here
}
Component{
    id: datePickerComponent
    // Define your component here
}
Component{
    id: imagePickerPickerComponent
    // Define your component here
}
Component{
    id: floatPickerComponent
    // Define your component here
}

Если вы используете этот пример, учтите, что каждый компонент должен иметь свою высоту, а верхний родительский столбец должен иметь свою ширину, определенную вчтобы правильно оформить все предметы.

Answer 2

В Qt 5.12 вы можете использовать DelegateChooser + DelegateChoice :

import QtQuick 2.7
import QtQuick.Controls 2.3
import Qt.labs.qmlmodels 1.0

ApplicationWindow {
    width: 500
    height: 500
    visible: true

    Column {
        anchors.fill: parent
        Repeater {
            id: r2
            model: ListModel {
                ListElement {
                    nombreCampo: "Name"
                    datoValor: "John Doe"
                    tipoDato: "TEXT"
                }

                ListElement {
                    nombreCampo: "Birth Date"
                    datoValor: "19910101"
                    tipoDato: "DATE"
                }

                ListElement {
                    nombreCampo: "Photo"
                    datoValor: "whatever.jpg"
                    tipoDato: "IMAGE"
                }

                ListElement {
                    nombreCampo: "Height"
                    datoValor: "1.55"
                    tipoDato: "REAL"
                }
            }

            delegate: DelegateChooser {
                role: "tipoDato"
                DelegateChoice {
                    roleValue: "DATE"
    //                delegate: SomeDatePicker {
    //                    date: datoValor
    //                }
                }
                DelegateChoice {
                    roleValue: "IMAGE"
                    delegate: Button {
                        text: "Select image"
                    }
                }
                DelegateChoice {
                    roleValue: "TEXT"
                    delegate: TextField {
                        text: model.datoValor
                    }
                }
                DelegateChoice {
                    roleValue: "REAL"
                    delegate: TextField {
                        text: model.datoValor
                        // inputMask: ...
                    }
                }
            }
        }
    }
}

В более ранних версиях вы можете использовать Loader ивыберите source / sourceComponent на основе данных модели.