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!

805
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
                      i
                      innorwallNov. 12, 2024, 6:12 a.m.
                      Django - Tutorial 055. How to write auto populate field functionality Freckles because of several brand names retin a, atralin buy generic priligy
                      i
                      innorwallNov. 12, 2024, 2:23 a.m.
                      QML - Tutorial 035. Using enumerations in QML without C ++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
                      i
                      innorwallNov. 11, 2024, 11:50 p.m.
                      Qt/C++ - Lesson 052. Customization Qt Audio player in the style of AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
                      i
                      innorwallNov. 11, 2024, 10:19 p.m.
                      Heap sorting algorithm The role of raloxifene in preventing breast cancer priligy precio
                      i
                      innorwallNov. 11, 2024, 9:55 p.m.
                      PyQt5 - Lesson 006. Work with QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
                      Now discuss on the forum
                      i
                      innorwallNov. 12, 2024, 4:56 a.m.
                      добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
                      i
                      innorwallNov. 11, 2024, 6:55 p.m.
                      Всё ещё разбираюсь с кешем. 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
                      IscanderCheOct. 31, 2024, 10:43 p.m.
                      Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Попробуйте прогу CQtDeployer
                      9
                      9AnonimOct. 25, 2024, 4:10 p.m.
                      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
                      ИМ
                      Игорь МаксимовOct. 3, 2024, 11:05 a.m.
                      Реализация навигации по разделам Спасибо Евгений!

                      Follow us in social networks