Михаиллл8 апреля 2019 г. 18:05
Как в QML сделать растягивающийся интерфейс
Добрый день.
Как в QML сделать растягивающийся интерфейс?
В Qt дизайнере можно регулировать отношение виджитов на экране через соотношение сгрупированных лэйаутов на экране. Хорошо это описанно
тут
Но как это можно реализовать в QML?
Вот пример страницы, на которой тринируюсь
import QtQuick 2.4 import QtQuick.Controls 2.4 Item { id: page2element width: 400 height: 600 property alias page2Button0: page2Button0 property alias page2Button1: page2Button1 property alias page2Button2: page2Button2 property alias page2Button3: page2Button3 property alias page2ButtonMenu: page2ButtonMenu property alias page2Label1: page2Label1 property alias page2Label2: page2Label2 Button { id: page2ButtonMenu x: 150 y: 493 text: qsTr("МЕНЮ") anchors.horizontalCenter: parent.horizontalCenter font.pointSize: 18 } Label { id: page2labe0 x: 57 y: 49 width: 286 height: 33 text: qsTr("Выберете красный цвет") anchors.horizontalCenterOffset: 0 anchors.horizontalCenter: parent.horizontalCenter font.family: "Verdana" horizontalAlignment: Text.AlignHCenter font.pixelSize: 22 font.weight: Font.Thin } Label { id: page2Label1 x: 122 y: 343 width: 156 height: 56 text: qsTr("Побед: ") anchors.horizontalCenter: parent.horizontalCenter horizontalAlignment: Text.AlignHCenter font.pointSize: 20 } Label { id: page2Label2 x: 122 y: 419 width: 156 height: 56 text: qsTr("1 из 20") anchors.horizontalCenter: parent.horizontalCenter horizontalAlignment: Text.AlignHCenter font.pointSize: 20 } Row { id: row x: 29 y: 102 spacing: 50 anchors.horizontalCenter: parent.horizontalCenter Button { id: page2Button0 width: 100 height: 100 Image { id: page2image1 width: 100 height: 100 anchors.rightMargin: 0 anchors.bottomMargin: 0 anchors.fill: parent source: "qrc:/images/images/close.png" fillMode: Image.Stretch } } Button { id: page2Button1 width: 100 height: 100 Image { id: page2image2 width: 100 height: 100 anchors.rightMargin: 0 anchors.bottomMargin: 0 anchors.fill: parent source: "qrc:/images/images/close.png" fillMode: Image.Stretch } } } Row { id: row1 x: 57 y: 220 spacing: 50 anchors.horizontalCenter: parent.horizontalCenter Button { id: page2Button2 width: 100 height: 100 Image { id: page2image3 width: 100 height: 100 anchors.leftMargin: 0 anchors.topMargin: 0 anchors.rightMargin: 0 anchors.bottomMargin: 0 anchors.fill: parent source: "qrc:/images/images/close.png" fillMode: Image.Stretch } } Button { id: page2Button3 width: 100 height: 100 Image { id: page2image4 width: 100 height: 100 anchors.rightMargin: 0 anchors.bottomMargin: 0 anchors.fill: parent source: "qrc:/images/images/close.png" fillMode: Image.Stretch } } } states: [ State { name: "Page2State1" PropertyChanges { target: page2image1 source: "qrc:/images/images/red.png" } PropertyChanges { target: page2image2 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image3 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image4 source: "qrc:/images/images/black.png" } }, State { name: "Page2State2" PropertyChanges { target: page2image1 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image2 source: "qrc:/images/images/red.png" } PropertyChanges { target: page2image3 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image4 source: "qrc:/images/images/black.png" } }, State { name: "Page2State3" PropertyChanges { target: page2image1 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image2 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image3 source: "qrc:/images/images/red.png" } PropertyChanges { target: page2image4 source: "qrc:/images/images/black.png" } }, State { name: "Page2State4" PropertyChanges { target: page2image1 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image4 source: "qrc:/images/images/red.png" } PropertyChanges { target: page2image2 source: "qrc:/images/images/black.png" } PropertyChanges { target: page2image3 source: "qrc:/images/images/black.png" } }, State { name: "Page2State0" } ] }
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.Вам это нравится? Поделитесь в социальных сетях!
Комментарии
Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Пожалуйста, авторизуйтесь или зарегистрируйтесь
B
- Bogdannn
- 28 марта 2024 г. 5:15
C++ - Тест 001. Первая программа и типы данных
- Результат:46баллов,
- Очки рейтинга-6
Последние комментарии
Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
Анатолий Кононенко5 февраля 2024 г. 12:50
EVA25 декабря 2023 г. 21:30
Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
Сейчас обсуждают на форуме
Как получить в массив значения из связанной модели? Спасибо, разобрался:))
AC
QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
Alexandru Codreanu19 января 2024 г. 22:57
BlinCT27 декабря 2023 г. 19:57
Дмитрий10 января 2024 г. 15:18
Evgenii Legotckoi12 декабря 2023 г. 17:48
у тебя все элементы имеют точку привязки (х,у), используй соотношение елементов друг к другу
А как это сделать. Нужно узнавать ширину и высоту дисплея?
суть. я думаю поймете, а там експеременты все покажут
и ознакомьтесь с этим
Спасибо. Статью читал. К сожалению этот вариант страницы не запускается в скомпилированной программе. Но по такому принципу сделал нижиприведенный код. Но при этом не получилось достичь масштабируемости. Помогите пожалуйста решить это:
а что не понравилось в моем коде выше? там ваш код который маштабируется
Кажется я понял, нужно похоже так делать, тогда пропорции сохраняются
QML достаточно гибок, чтоб достичь желаемого разными способами, достаточно включить фантазию
Но есть ли возможности в дизайнере это сделать, без лишнего кода?
А Ваш код ошибок не выдовал, но программа просто не открывала эту страницу
учитесь делать рауками