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

Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Полагаю, что нужно использовать 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
                }
            }
        }
    }
}