МихаилллСәуір 8, 2019, 8: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 хостинг.Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!
Пікірлер
Г
- Геній
- Қыр. 13, 2024, 12:46 Т.Қ.
C++ - Тест 001. Первая программа и типы данных
- Нәтиже:66ұпай,
- Бағалау ұпайлары-1
t
- torgaev_2024
- Қыр. 8, 2024, 6:20 Т.Ж.
C++ - Тест 001. Первая программа и типы данных
- Нәтиже:33ұпай,
- Бағалау ұпайлары-10
Соңғы пікірлер
Linux жүйесінде файлдарды қалай көшіруге болады Задумывались когда-нибудь о том, как мы привыкли доверять свои вещи службам грузоперевозок? Сейчас такие услуги стали неотъемлемой частью нашей жизни, особенно когда речь идет о переездах между …
ВР
Linux жүйесінде файлдарды қалай көшіруге болады Screenshot_20240802-065123.png
Влад РусоковТам. 2, 2024, 1:47 Т.Ж.
QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Qt Linux - Сабақ 001. Linux астында Autorun Qt қолданбасы как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
АК
Qt WinAPI - Сабақ 007. Qt ішінде ICMP Ping арқылы жұмыс істеу Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
Анатолий КононенкоАқп. 5, 2024, 1:50 Т.Ж.
Енді форумда талқылаңыз
Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …
BlinCTМаусым 25, 2024, 1 Т.Ж.
BlinCTМамыр 5, 2024, 5:46 Т.Ж.
Evgenii LegotckoiМамыр 2, 2024, 2:07 Т.Қ.
у тебя все элементы имеют точку привязки (х,у), используй соотношение елементов друг к другу
А как это сделать. Нужно узнавать ширину и высоту дисплея?
суть. я думаю поймете, а там експеременты все покажут
и ознакомьтесь с этим
Спасибо. Статью читал. К сожалению этот вариант страницы не запускается в скомпилированной программе. Но по такому принципу сделал нижиприведенный код. Но при этом не получилось достичь масштабируемости. Помогите пожалуйста решить это:
а что не понравилось в моем коде выше? там ваш код который маштабируется
Кажется я понял, нужно похоже так делать, тогда пропорции сохраняются
QML достаточно гибок, чтоб достичь желаемого разными способами, достаточно включить фантазию
Но есть ли возможности в дизайнере это сделать, без лишнего кода?
А Ваш код ошибок не выдовал, но программа просто не открывала эту страницу
учитесь делать рауками