Write articleAsk a questionTake the testShare code
Михаиллл
МихаилллApril 8, 2019, 8:05 a.m.

Как в QML сделать растягивающийся интерфейс

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"
        }
    ]
}
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!

533
10
0
0
0
10
Алексей Внуков
  • April 8, 2019, 8:34 a.m.

у тебя все элементы имеют точку привязки (х,у), используй соотношение елементов друг к другу

    0
    0
    0
    Михаиллл
    • April 8, 2019, 9:17 a.m.

    А как это сделать. Нужно узнавать ширину и высоту дисплея?

      0
      0
      0
      Алексей Внуков
      • April 8, 2019, 10:32 a.m.
      • (edited)

      суть. я думаю поймете, а там експеременты все покажут
      и ознакомьтесь с этим 

      import QtQuick 2.4
import QtQuick.Controls 2.4

Item {
    id: page2element
    width: 400
    height: 600

    Label {
        id: page2labe0
        anchors
        {
            top: parent.top

        }
        text: qsTr("Выберете красный цвет")
        anchors.horizontalCenter: parent.horizontalCenter
        font.family: "Verdana"
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 22
        font.weight: Font.Thin
    }

    Grid {
        id: grid
        anchors
        {
            top:page2labe0.bottom
            left: parent.left
            right:parent.right
        }
        height: 400
        rows: 2
        columns: 2
        spacing: 5

        Button {
            id: page2Button0
            width: parent.width/2
            height: parent.height/2
            Image {
                id: page2image1
                anchors.fill: parent
                source: "qrc:/images/images/close.png"
                fillMode: Image.Stretch
            }
        }

        Button {
            id: page2Button1
            width: parent.width/2
            height: parent.height/2
            Image {
                id: page2image2
                anchors.fill: parent
                source: "qrc:/images/images/close.png"
                fillMode: Image.Stretch
            }
        }

        Button {
            id: page2Button2
            width: parent.width/2
            height: parent.height/2
            Image {
                id: page2image3
                anchors.fill: parent
                source: "qrc:/images/images/close.png"
                fillMode: Image.Stretch
            }
        }

        Button {
            id: page2Button3
            width: parent.width/2
            height: parent.height/2
            Image {
                id: page2image4
                anchors.fill: parent
                source: "qrc:/images/images/close.png"
                fillMode: Image.Stretch
            }
        }
    }


    Column
    {
        anchors.top: grid.bottom
        anchors.bottom: page2element.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        height: parent.height/3

        Label
        {
            id: page2Label1
            text: qsTr("Побед: ")
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 20
        }

        Label
        {
            id: page2Label2
            text: qsTr("1 из 20")
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 20
        }


        Button
        {
            id: page2ButtonMenu

            text: qsTr("МЕНЮ")

            font.pointSize: 18
        }
    }
    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"
        }
    ]
}
        0
        0
        0
        Михаиллл
        • April 9, 2019, 7:08 a.m.

        Спасибо. Статью читал. К сожалению этот вариант страницы не запускается в скомпилированной программе. Но по такому принципу сделал нижиприведенный код. Но при этом не получилось достичь масштабируемости. Помогите пожалуйста решить это: 

        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






    Column {
        id: column
        spacing: 35
        anchors.horizontalCenterOffset: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.horizontalCenter: parent.horizontalCenter

        Label {
            id: page2labe0
            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
        }

        Row {
            id: row
            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
            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
                }
            }
        }

        Label {
            id: page2Label1
            width: 156
            height: 56
            text: qsTr("Побед: ")
            anchors.horizontalCenter: parent.horizontalCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 20
        }

        Label {
            id: page2Label2
            width: 156
            height: 56
            text: qsTr("1 из 20")
            anchors.horizontalCenter: parent.horizontalCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 20
        }

        Button {
            id: page2ButtonMenu
            text: qsTr("МЕНЮ")
            anchors.horizontalCenter: parent.horizontalCenter
            font.pointSize: 18
        }
    }
    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"
        }
    ]
}
          0
          0
          0
          Алексей Внуков
          • April 9, 2019, 7:20 a.m.

          а что не понравилось в моем коде выше? там ваш код который маштабируется

            0
            0
            0
            Михаиллл
            • April 9, 2019, 7:21 a.m.

            Кажется я понял, нужно похоже так делать, тогда пропорции сохраняются 

            spacing: /*50*/0.1 * page2element.width
              0
              0
              0
              Алексей Внуков
              • April 9, 2019, 7:22 a.m.

              QML достаточно гибок, чтоб достичь желаемого разными способами, достаточно включить фантазию

                0
                0
                0
                Михаиллл
                • April 9, 2019, 7:37 a.m.

                Но есть ли возможности в дизайнере это сделать, без лишнего кода?

                  0
                  0
                  0
                  Михаиллл
                  • April 9, 2019, 8:05 a.m.

                  А Ваш код ошибок не выдовал, но программа просто не открывала эту страницу

                    0
                    0
                    0
                    Алексей Внуков
                    • April 10, 2019, 4:13 a.m.

                    учитесь делать рауками

                      0
                      0
                      0

                      Comments

                      Only authorized users can post comments.
                      Please, Log in or Sign up
                      Last passed testsRating
                      e
                      • ehot
                      • April 1, 2024, 12:29 a.m.

                      C++ - Тест 003. Условия и циклы

                      • Result:78points,
                      • Rating points2
                      B

                      C++ - Test 002. Constants

                      • Result:16points,
                      • Rating points-10
                      B

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

                      • Result:46points,
                      • Rating points-6
                      Last comments
                      k
                      kmssrFeb. 9, 2024, 5:43 a.m.
                      Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                      АК
                      Анатолий КононенкоFeb. 5, 2024, 12:50 p.m.
                      Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                      EVA
                      EVADec. 25, 2023, 9:30 p.m.
                      Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                      J
                      JonnyJoDec. 25, 2023, 7:38 p.m.
                      Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                      G
                      GvozdikDec. 19, 2023, 8:01 a.m.
                      Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                      Now discuss on the forum
                      a
                      a_vlasovApril 14, 2024, 4:41 p.m.
                      Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Евгений, добрый день! Такой вопрос. Верно ли следующее утверждение: Любое Android-приложение, написанное на Java/Kotlin чисто теоретически (пусть и с большими трудностями) можно написать и на C+…
                      Павел Дорофеев
                      Павел ДорофеевApril 14, 2024, 12:35 p.m.
                      QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь
                      f
                      fastrexApril 4, 2024, 2:47 p.m.
                      Вернуть старое поведение QComboBox, не менять индекс при resetModel Добрый день! У нас много проектов в которых используется QComboBox, в версии 5.5.1, когда модель испускает сигнал resetModel, currentIndex не менялся. В версии 5.15 при resetModel происходит try…
                      P
                      PisychFeb. 27, 2023, 3:04 p.m.
                      Как получить в массив значения из связанной модели? Спасибо, разобрался:))
                      AC
                      Alexandru CodreanuJan. 19, 2024, 10:57 p.m.
                      QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…

                      Follow us in social networks