Flow QML Type: связь с моделью, динамическое добавление и удаление элементов

views, QML, View, flow, view, model, qml, вёрстка qml, Model

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flow {
           id: flow_id
           anchors.top: parent.top
           anchors.horizontalCenter: parent.horizontalCenter
           anchors.margins: 4
           spacing: 10
           width: parent.width/1.5

           Button {
               id: first_button
               Text {
                   id: first_button_text
                   text: "Text"
                   font.pointSize: 15
                   anchors.horizontalCenter: parent.horizontalCenter
                   anchors.verticalCenter: parent.verticalCenter
                   verticalAlignment: Text.AlignVCenter
                   horizontalAlignment: Text.AlignHCenter
               }
               width: first_button_text.width + 12
           }
           Button { text: "items"; font.pointSize: 15 }
           Button { text: "flowing"; font.pointSize: 15 }
           Button { text: "inside"; font.pointSize: 15 }
           Button { text: "a"; font.pointSize: 15 }
           Button { text: "Flow"; font.pointSize: 15 }
           Button { text: "item"; font.pointSize: 15 }
       }


}

Рекомендуємо хостинг TIMEWEB

Stabiles Hosting des sozialen Netzwerks EVILEG. Wir empfehlen VDS-Hosting für Django-Projekte.

Полагаю, что нужно использовать Repeater. Он может формировать объекты из модели. Если добавлять и убирать объекты в модели, то по идее Repeater должен перестраивать объекты во flow.

Здесь уже обсуждался кейс, подобный вашему - ссылка на сообщение

Класс, похоже то что надо, спасибо.

Что-то не получалось, собирался задать вопрос, но вроде разобрался. Пока разбирался сделал кракозябру из кода по ссылке и кода из урока QML - Урок 007. ListView Qml . Не пропадать же добру, пусть будет.

Пояснение: добавил к примеру ListView Qml --> Flow с Repeater'ом. Оба подсосаны к одной модели и в таком виде без ругани работают (пока что) как ожидается.

А вопрос на котором споткнулся решился тем что в репитере text: model.text заменил на text: modelData

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // Number of Button used in text_button
    property int number_of_button: 0

    // Строка с полем где отображается индекс нажатой кнопки
    Row {
        id: row
        height: 50
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right

        //Задаём размещение поля с индексом кнопки
        Rectangle {
            width: ( parent.width / 5)
            height: 50

            // Установливаем текстовое поле для размещения индекса кнопки
            Text {
                id: textField_For_Button_Id
                anchors.fill: parent
                text: ""
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }

        // Кнопка для создания динамических кнопок
        Button {
            id: button_Creation
            text: qsTr("Create Button")
            width: (parent.width / 5) * 2
            height: 50


            // По клику на эту кнопку
            // в модель
            // добавляется объект
            // с заданными параметрами
            onClicked: {
                model_id.append({property_Text_Of_New_Button: "Button " + ( ++number_of_button)})
            }
        }

        // Кнопка для удаления динамических кнопок
        Button {
            id: button_Deletion
            text: qsTr("Delete Button")
            width: (parent.width / 5) * 2
            height: 50

            // Удаляем кнопку по её индексу в ListView
            onClicked: {
                if(textField_For_Button_Id.text != "") {
                    model_id.remove(textField_For_Button_Id.text)
                    textField_For_Button_Id.text = ""
                }
            }
        }
    }

    // Наша модель, которая используется и для ListView
    // и для qml flow type
    ListModel {
        id: model_id
    }

    // ListView это список
    ListView {
        id: listView_id
        model: model_id // Модель прописана тут!
        anchors.top: row.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right

        // Можно было прописать Item тут.
        // Вынесли в component и ссылаемся на его id.
        delegate: component_id
    }

    Component {
        // Вёрстка ОДНОГО объекта
        // который отображается в СПИСКЕ
        // в качестве одного ЭЛЕМЕНТА списка
        id: component_id
        Item {
            id: item_id
            anchors.left: parent.left
            anchors.right: parent.right
            height: 40

            // в этом ЭЛЕМЕНТЕ будет одна кнопка
            Button {
                anchors.fill: parent
                anchors.margins: 5

                // _"самое интересное"_
                // задаём свойству text переменную
                text: property_Text_Of_New_Button

                // по клику
                // отдаём в текстовое поле
                // ListView-индекс элемента
                onClicked: {
                    textField_For_Button_Id.text = index
                }
            }
        }
    }

    Flow {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: 4
        spacing: 10

        Repeater {
            model: model_id
            Rectangle {
                width: textMetrics_id.tightBoundingRect.width + 20
                height: textMetrics_id.tightBoundingRect.height + 10
                color: "gray";
                radius: 5;
                Text {
                    id: currentText_id
                    anchors.centerIn: parent
                    text: modelData;
                }
                TextMetrics {
                    id:     textMetrics_id
                    font:   currentText_id.font
                    text:   currentText_id.text
                }
            }
        }
    }
}