М
МаркГленJuly 27, 2020, 7:35 a.m.

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

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

Надо: подтягивать из с++ список слов, делать из них кнопки. Ширина кнопок соответствует ширине текста. При заполнении одной строки (ряда) - переход на следующую.

С передачей данных из с++, сигналами и слотами, вроде пока понятно. На данный момент затруднения с вёрсткой. ListView и GridView не подходят.

Подходит Flow QML Type, но с ним нельзя работать как с моделью-представлением. Или можно?

https://doc.qt.io/qt-5/qml-qtquick-flow.html

Как динамически добавлять-убирать элементы Flow?

И как применить свойства для каждого элемента Flow, как в данном случае это сделано для первого id: first_button

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


}

Как ещё можно было бы, я думаю: создать Row определённой ширины, добавлять в него кнопки и следить за суммой ширины кнопок, если ширина кнопок (с учётом margin конечно) на следующей итерации больше ширины Row то создавать следующий Row и так далее. Опять же, я не представляю как это сделать на практике. С model->view всё было как-то проще.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

3
Evgenii Legotckoi
  • July 27, 2020, 8:31 a.m.
  • (edited)
  • The answer was marked as a solution.

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

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

    М
    • July 27, 2020, 9:01 a.m.

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

      М
      • July 27, 2020, 3:52 p.m.

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

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

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

      qml_flow

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

        Comments

        Only authorized users can post comments.
        Please, Log in or Sign up
        AD

        C ++ - Test 004. Pointers, Arrays and Loops

        • Result:50points,
        • Rating points-4
        m

        C ++ - Test 004. Pointers, Arrays and Loops

        • Result:80points,
        • Rating points4
        m

        C ++ - Test 004. Pointers, Arrays and Loops

        • Result:20points,
        • Rating points-10
        Last comments
        i
        innorwallNov. 14, 2024, 12:07 p.m.
        Circuit switching and packet data transmission networks Angioedema 1 priligy dapoxetine
        i
        innorwallNov. 14, 2024, 11:42 a.m.
        How to Copy Files in Linux If only females relatives with DZ offspring were considered these percentages were 23 order priligy online uk
        i
        innorwallNov. 14, 2024, 9:09 a.m.
        Qt/C++ - Tutorial 068. Hello World using the CMAKE build system in CLion ditropan pristiq dosing With the Yankees leading, 4 3, Rivera jogged in from the bullpen to a standing ovation as he prepared for his final appearance in Chicago buy priligy pakistan
        i
        innorwallNov. 14, 2024, 4:05 a.m.
        EVILEG-CORE. Using Google reCAPTCHA 2001; 98 29 34 priligy buy
        i
        innorwallNov. 14, 2024, 4 a.m.
        PyQt5 - Lesson 007. Works with QML QtQuick (Signals and slots) priligy 30mg Am J Obstet Gynecol 171 1488 505
        Now discuss on the forum
        i
        innorwallNov. 14, 2024, 3:39 a.m.
        добавить qlineseries в функции priligy amazon canada 93 GREB1 protein GREB1 AB011147 6
        i
        innorwallNov. 11, 2024, 10:55 a.m.
        Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
        9
        9AnonimOct. 25, 2024, 9:10 a.m.
        Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

        Follow us in social networks