Михаиллл
Михаиллл8 апреля 2019 г. 18: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 хостинг.

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

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

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

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

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

      Алексей Внуков
      • 8 апреля 2019 г. 20: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"
              }
          ]
      }
      
      
        Михаиллл
        • 9 апреля 2019 г. 17: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"
                }
            ]
        }
        
        
        
          Алексей Внуков
          • 9 апреля 2019 г. 17:20

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

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

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

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

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

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

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

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

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

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

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

                      Комментарии

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

                      C++ - Тест 002. Константы

                      • Результат:16баллов,
                      • Очки рейтинга-10
                      B

                      C++ - Тест 001. Первая программа и типы данных

                      • Результат:46баллов,
                      • Очки рейтинга-6
                      FL

                      C++ - Тест 006. Перечисления

                      • Результат:80баллов,
                      • Очки рейтинга4
                      Последние комментарии
                      k
                      kmssr9 февраля 2024 г. 5:43
                      Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                      АК
                      Анатолий Кононенко5 февраля 2024 г. 12:50
                      Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                      EVA
                      EVA25 декабря 2023 г. 21:30
                      Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                      J
                      JonnyJo25 декабря 2023 г. 19:38
                      Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                      G
                      Gvozdik19 декабря 2023 г. 8:01
                      Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                      Сейчас обсуждают на форуме
                      P
                      Pisych27 февраля 2023 г. 15:04
                      Как получить в массив значения из связанной модели? Спасибо, разобрался:))
                      AC
                      Alexandru Codreanu19 января 2024 г. 22:57
                      QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
                      BlinCT
                      BlinCT27 декабря 2023 г. 19:57
                      Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
                      Дмитрий
                      Дмитрий10 января 2024 г. 15:18
                      Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
                      Evgenii Legotckoi
                      Evgenii Legotckoi12 декабря 2023 г. 17:48
                      Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

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