Написать статьюЗадать вопросПройти тестРасшарить код
Михаиллл
Михаиллл8 апреля 2019 г. 8:05

Как в 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"
        }
    ]
}
Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

809
10
0
0
0
10
Алексей Внуков
  • 8 апреля 2019 г. 8:34

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

    0
    0
    0
    Михаиллл
    • 8 апреля 2019 г. 9:17

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

      0
      0
      0
      Алексей Внуков
      • 8 апреля 2019 г. 10:32
      • (ред.)

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

      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
        Михаиллл
        • 9 апреля 2019 г. 7:08

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

        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
          Алексей Внуков
          • 9 апреля 2019 г. 7:20

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

            0
            0
            0
            Михаиллл
            • 9 апреля 2019 г. 7:21

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

            spacing: /*50*/0.1 * page2element.width
              0
              0
              0
              Алексей Внуков
              • 9 апреля 2019 г. 7:22

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

                0
                0
                0
                Михаиллл
                • 9 апреля 2019 г. 7:37

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

                  0
                  0
                  0
                  Михаиллл
                  • 9 апреля 2019 г. 8:05

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

                    0
                    0
                    0
                    Алексей Внуков
                    • 10 апреля 2019 г. 4:13

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

                      0
                      0
                      0

                      Комментарии

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

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

                      • Результат:50баллов,
                      • Очки рейтинга-4
                      m
                      • molni99
                      • 26 октября 2024 г. 8:37

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

                      • Результат:80баллов,
                      • Очки рейтинга4
                      m
                      • molni99
                      • 26 октября 2024 г. 8:29

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

                      • Результат:20баллов,
                      • Очки рейтинга-10
                      Последние комментарии
                      i
                      innorwall15 ноября 2024 г. 14:30
                      Qt/C++ - Урок 065. Соответствие ошибок HTTP ошибкам ответа сервера в QNetworkAccessManager s Midsummer Classic in Kansas City priligy online pharmacy
                      i
                      innorwall15 ноября 2024 г. 13:44
                      Qt/C++ - Урок 039. Как закрасить строку в QSqlTableModel по значению в столбце Many OPKs would advise users to start using the test strips around day 9 of your cycle, considering day 1 to be the first day of full menstrual flow buy priligy australia
                      i
                      innorwall15 ноября 2024 г. 10:27
                      Релиз утилиты развертывания С++/Qt и QML приложений CQtDeployer v1.4.0 (Binary Box) optionally substituted alkoxy, optionally substituted alkenyloxy, optionally substituted alkynyloxy, optionally substituted aryloxy, OCH, OC H, OC H, OC H, OC H, OC H, OC H, O C CH, OCH CH OH, O…
                      i
                      innorwall15 ноября 2024 г. 5:26
                      Qt/C++ - Урок 031. QCustomPlot - строим график по времени buy generic priligy We can just chat, and we will not lose too much time anyway
                      i
                      innorwall15 ноября 2024 г. 3:03
                      Qt/C++ - Урок 060. Настройка внешнего вида приложения в рантайме I didnt have an issue work colors priligy dapoxetine 60mg revia cost uk August 3, 2022 Reply
                      Сейчас обсуждают на форуме
                      t
                      tonypeachey115 ноября 2024 г. 14:04
                      google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                      i
                      innorwall15 ноября 2024 г. 13:50
                      добавить qlineseries в функции priligy for sale Gently flush using an ear syringe
                      i
                      innorwall11 ноября 2024 г. 18:55
                      Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
                      IscanderChe
                      IscanderChe31 октября 2024 г. 22:43
                      Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Попробуйте прогу CQtDeployer
                      9
                      9Anonim25 октября 2024 г. 16:10
                      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                      Следите за нами в социальных сетях