May 21, 2020, 3:06 a.m.

QML, spacing in GridView или что то похожее

Добрый день.
Нужно сделать похожий эллемент. Думал использовать GridView , но там можно задавать только cellWidth статичную ширину добаления делегатов. Есть ли еще что то похожее в QML, позволяющее это реализовать?

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.
9
S
  • May 21, 2020, 4 p.m.
  • (edited)

Можно сделать через любой Layout , или через anchors . Тут уже как кому нравится.

Я накидал на скорую руку Row Layout , но якоря будут более адаптивней для мобильных платформ

ApplicationWindow {

    visible: true
    width: 1000
    height: 1000

   RowLayout {

       spacing: 10
       width: 1000
       height: 200

       Repeater {

           model: 10

           Rectangle {

               Layout.alignment: Qt.AlignCenter
               color: "Red"
               width: switch (index) {

                      case 0: 150
                          break;

                      case 2: 300
                          break;

                      default: 50

                      }

               height: 50
               radius: 10

           }

       }

   }

}   

Но у меня может быть больше чем одна строка. Можно ли как то сделать многострочный вариант?

S

Да, можешь запихнуть в ColumnLayout
или же через якори наверстать несколько элементов:

anchors.left: parent
anchors.leftMargin: int

Я бы накидал код, но я уже спать хочу)

А разве если добавлять строки в ColumnLayout, то они при недостатке ширины будут пускаться и в следующую строку?

S

Да, если указывать minimumWidth/Height

Не ребят, только усложняете всё со своими Layout. Есть готовый компонент и называется он Flow

Вот вам пример на быструю руку

import QtQuick 2.9
import QtQuick.Window 2.2

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

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Rectangle {
            width: t_metrics_1.tightBoundingRect.width + 20
            height: t_metrics_1.tightBoundingRect.height + 10
            color: "gray";
            radius: 5;
            Text {
                id: text_1
                anchors.centerIn: parent
                text: "Hello!";
            }
            TextMetrics {
                id:     t_metrics_1
                font:   text_1.font
                text:   text_1.text
            }
        }
        Rectangle {
            width: t_metrics_2.tightBoundingRect.width + 20
            height: t_metrics_2.tightBoundingRect.height + 10
            color: "gray";
            radius: 5;
            Text {
                id: text_2
                anchors.centerIn: parent
                text: "Hello, World!";
            }
            TextMetrics {
                id:     t_metrics_2
                font:   text_2.font
                text:   text_2.text
            }
        }
        Rectangle {
            width: t_metrics_3.tightBoundingRect.width + 20
            height: t_metrics_3.tightBoundingRect.height + 10
            color: "gray";
            radius: 5;
            Text {
                id: text_3
                anchors.centerIn: parent
                text: "Flow";
            }
            TextMetrics {
                id:     t_metrics_3
                font:   text_3.font
                text:   text_3.text
            }
        }
    }
}

Но к Flow нельзя подключить модель. А как к нему можно динамично добавлять и удалять эллементы?

Repeater используйте

import QtQuick 2.9
import QtQuick.Window 2.2

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

    ListModel {
        id: textModel
        ListElement { text: "Hello"; }
        ListElement { text: "Hello, World!"; }
        ListElement { text: "Flow"; }
    }

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Repeater {
            model: textModel
            Rectangle {
                width: t_metrics.tightBoundingRect.width + 20
                height: t_metrics.tightBoundingRect.height + 10
                color: "gray";
                radius: 5;
                Text {
                    id: currentText
                    anchors.centerIn: parent
                    text: model.text;
                }
                TextMetrics {
                    id:     t_metrics
                    font:   currentText.font
                    text:   currentText.text
                }
            }
        }
    }
}

Спасибо

Comments

Only authorized users can post comments.
Please, Log in or Sign up
How to become an author?

Contribute to the evolution of the EVILEG community.

Learn how to become a site author.

Learn it
Donate

Good day, Dear Users!!!

I am Evgenii Legotckoi, developer of EVILEG. And it is my hobby project, which helps to learn programming another programmers and developers

If the site helped you, and you want also support the development of the site, than you can donate by following ways

PayPalYandex.Money
Timeweb

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting Timeweb
June 5, 2020, 11:20 p.m.
Aleksej

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

  • Result:60points,
  • Rating points-1
June 5, 2020, 11:15 p.m.
Aleksej

C++ - Test 001. The first program and data types

  • Result:53points,
  • Rating points-4
V
June 5, 2020, 4:47 p.m.
Vladzo

C++ - Test 005. Structures and Classes

  • Result:83points,
  • Rating points4
Last comments
June 5, 2020, 10:52 a.m.
progammist

Распознавание изображений на Python с помощью TensorFlow и Keras

Огромное спасибо за метериал, по-больше бы подобных статей (с подробным описанием работы и примерами применения) на тему современных технологий. Вопрос поразмышлять. На текущий момент реал…
June 5, 2020, 1:39 a.m.
Evgenij Legotskoj

Qt/C++ - Tutorial 091. How to write a custom delegate controlling the highlighting of a row in a table

По-моему, смысла в этом нет особого. Если делегат будет игнорировать настройки таблицы, то это приведёт ещё к большему непониманию, что вообще происходит, для программиста, который после вас буд…
June 5, 2020, 1:34 a.m.
IscanderChe

Qt/C++ - Tutorial 091. How to write a custom delegate controlling the highlighting of a row in a table

Сижу, размышляю: можно ли переписать делегата так, чтобы независимо от настроек строк выделялись строки?
June 5, 2020, 1:31 a.m.
Evgenij Legotskoj

Qt/C++ - Tutorial 091. How to write a custom delegate controlling the highlighting of a row in a table

Понятно. Я не обратил внимания на то, что там было в старом коде по настройкам строк :)
Now discuss on the forum
s
June 6, 2020, 1:54 a.m.
shuric

Qt/C++ Определение положения курсора над действие(кнопкой) в QToolBar

Доброго дня. Возник вопрос - как можно определить что курсор находится над определенным действием(кнопкой) в qtoolbar ? mainwindow.cpp MainWindow::MainWi…
s
June 6, 2020, 12:45 a.m.
shuric

Qt/C++ особенности QProxyStyle

Да, Вы правы. Код был скопирован с сайта (уже не помню с какого), но решил пойти по пути более легком. Пришлось переписать - кому интересно: использовал stackedWidget для пе…
June 5, 2020, 11:08 p.m.
Aleksej

Посоветуйте новичку (базы данных и Qt, что учить)

Блин, а я недавно купил Шлее Qt 5.10 :( С детства хотел стать программистом, баловался Паскалем, писал простенькие программки на Delphi, создавал движок на php, изучал C (забросил и перешел на п…
June 5, 2020, 1:09 p.m.
IscanderChe

QPlainTextEdit настройка цвета фона

Вечер добрый. Пытаюсь настроить цвет фона QPlainTextEdit следующим образом: CodeEditor::CodeEditor(QWidget *parent) : QPlainTextEdit(parent){ ... QPalette::ColorRole role = bac…
June 5, 2020, 6:13 a.m.
IscanderChe

Фильтр для QtableView sql

Добрый день. Для такой фильтрации необходимо использовать QSortFilterProxyModel. В оффдоках есть хороший пример.
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB