21 мая 2020 г. 3:06

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

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

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
9
S
  • 21 мая 2020 г. 16:00
  • (ред.)

Можно сделать через любой 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
                }
            }
        }
    }
}

Спасибо

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Как стать автором?

Внесите вклад в развитие сообщества EVILEG.

Узнайте, как стать автором сайта.

Изучить
Donate

Добрый день, Дорогие Пользователи !!!

Я Евгений Легоцкой, разработчик EVILEG. И это мой хобби-проект, который помогает учиться программированию другим программистам и разработчикам

Если сайт помог вам, и вы хотите также поддержать развитие сайта, то вы можете сделать пожертвование следующими способами

PayPalYandex.Money
Timeweb

Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.

В течение многих лет Timeweb доказывает свою стабильность.

Для проектов на Django рекомендую VDS хостинг

Посмотреть Хостинг Timeweb
5 июня 2020 г. 23:20
Алексей

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:60баллов,
  • Очки рейтинга-1
5 июня 2020 г. 23:15
Алексей

C++ - Тест 001. Первая программа и типы данных

  • Результат:53баллов,
  • Очки рейтинга-4
V
5 июня 2020 г. 16:47
Vladzo

C++ - Тест 005. Структуры и Классы

  • Результат:83баллов,
  • Очки рейтинга4
Последние комментарии
5 июня 2020 г. 10:52
progammist

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

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

Qt/C++ - Урок 091. Как написать кастомный делегат управляющий подсветкой строки в таблице

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

Qt/C++ - Урок 091. Как написать кастомный делегат управляющий подсветкой строки в таблице

Сижу, размышляю: можно ли переписать делегата так, чтобы независимо от настроек строк выделялись строки?
5 июня 2020 г. 1:31
Евгений Легоцкой

Qt/C++ - Урок 091. Как написать кастомный делегат управляющий подсветкой строки в таблице

Понятно. Я не обратил внимания на то, что там было в старом коде по настройкам строк :)
Сейчас обсуждают на форуме
s
6 июня 2020 г. 1:54
shuric

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

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

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

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

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

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

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

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

Фильтр для QtableView sql

Добрый день. Для такой фильтрации необходимо использовать QSortFilterProxyModel. В оффдоках есть хороший пример.
О нас
Услуги
© EVILEG 2015-2020
Рекомендует хостинг TIMEWEB