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!

886
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
                      AD

                      C ++ - Test 004. Pointers, Arrays and Loops

                      • Result:50points,
                      • Rating points-4
                      m

                      C ++ - Test 004. Pointers, Arrays and Loops

                      • Result:80points,
                      • Rating points4
                      m

                      C ++ - Test 004. Pointers, Arrays and Loops

                      • Result:20points,
                      • Rating points-10
                      Last comments
                      ИМ
                      Игорь МаксимовNov. 22, 2024, 11:51 a.m.
                      Django - Tutorial 017. Customize the login page to Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                      Evgenii Legotckoi
                      Evgenii LegotckoiOct. 31, 2024, 2:37 p.m.
                      Django - Lesson 064. How to write a Python Markdown extension Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                      A
                      ALO1ZEOct. 19, 2024, 8:19 a.m.
                      Fb3 file reader on Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                      ИМ
                      Игорь МаксимовOct. 5, 2024, 7:51 a.m.
                      Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                      d
                      dblas5July 5, 2024, 11:02 a.m.
                      QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                      Now discuss on the forum
                      Evgenii Legotckoi
                      Evgenii LegotckoiJune 24, 2024, 3:11 p.m.
                      добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
                      t
                      tonypeachey1Nov. 15, 2024, 6:04 a.m.
                      google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                      NSProject
                      NSProjectJune 4, 2022, 3:49 a.m.
                      Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
                      IscanderChe
                      IscanderCheOct. 31, 2024, 3:43 p.m.
                      Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Попробуйте прогу CQtDeployer
                      9
                      9AnonimOct. 25, 2024, 9:10 a.m.
                      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                      Follow us in social networks