Михаиллл
Михаиллл15 июля 2019 г. 4:10

Трудности с созданием ListView в QML

Добрый день.
Сделал несколько эллементов интерфейса.
Эти эллементы пытаюсь запихнуть в ListView интерфейс плывет, некоторые части не отображаются, а при нажатии снизу вверх ListView обновляется.
Скажите пожалуйста почему так? И как правильно добавлять в ListView? И можно ли Обойтись без ListView , просто размещая эллементы на основном окне, но так, что-бы была возможность их прогручивать?

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    id: mainElement
    width: 400
    height: 700

    ListView
    {
        id: listViewFerstWindow
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        model: 1

        delegate: Item
        {
            id: itemDelegateFirstWindow

    Rectangle {
        id: rectangle
        height: 19
        color: "#e3ded3"
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0

        Text {
            id: element1
            x: 78
            y: 4
            width: 214
            height: 14
            text: qsTr("8 (800) 700 0002 - отдел продаж")
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 12
        }
    }

    Rectangle {
        id: rectangle1
        height: mainElement.height * 0.15
        color: "#ffffff"
        anchors.top: rectangle.bottom
        anchors.topMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        Image {
            id: imageLabel
            width: parent.width * 0.75
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            fillMode: Image.PreserveAspectFit
            source: "qrc:/Images/Images/Xwd9C1BM5QA.jpg"
        }

        Button {
            id: buttonMenu
//            x: 314
//            y: 37
            anchors.left: imageLabel.right
            anchors.right: parent.right
            width: parent.height * 0.5
            height: parent.height * 0.8
            text: qsTr("")
            anchors.rightMargin: parent.height * 0.2
            anchors.leftMargin: parent.height * 0.2
            anchors.verticalCenter: parent.verticalCenter
            background: Rectangle{
                color: "white"
            }

            Image {
                id: image1
                anchors.fill: parent
                fillMode: Image.PreserveAspectFit
                source: "qrc:/Images/Images/menuRed.png"
            }
        }
    }

    Rectangle {
        id: rectangle2
        x: 141
        y: 143
        width: 99
        height: 26
        color: "#db4c4c"
        radius: height * 0.3

        MouseArea {
            id: mouseAreaRassrochka
            anchors.bottomMargin: 0
            anchors.fill: parent

            Text {
                id: element2
                x: 82
                y: parent.height * 0.05
                //width: 5
                height: 7
                text: qsTr("Продаем")
                font.weight: Font.ExtraBold
                font.capitalization: Font.MixedCase
                font.family: "Times New Roman"
                elide: Text.ElideLeft
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: parent.height * 0.4
            }

            Text {
                id: element3
                x: 87
                y: parent.height * 0.45
                text: qsTr("в рассрочку!")
                font.weight: Font.ExtraBold
                font.family: "Times New Roman"
                font.capitalization: Font.MixedCase
                color: "white"
                anchors.horizontalCenterOffset: 0
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: parent.height * 0.4
            }
        }
    }

    Rectangle{
        color: "red"
        width: 200
        height: 200
        y: 650
    }


}
    }



}


Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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

13
Pavel K.
  • 15 июля 2019 г. 4:29
  • (ред.)

например для селфиш ОС есть SilicaFlickable — самый базовый контейнер, который позволяет прокручивать экран
или обрати внимание на VerticalScrollDecorator {}
ну или вот https://doc.qt.io/qt-5.9/qtquickcontrols2-gallery-pages-scrollbarpage-qml.html
делает тоже самое что и SilicaFlickable

//Page {
// id: page

SilicaFlickable {

 }

// }

    Михаиллл
    • 15 июля 2019 г. 4:36

    У меня нет селфиш, есть виндовс, на худой конец есть макос и линукс. Но можно ли в виндовсе это сделать?

      Алексей Внуков
      • 15 июля 2019 г. 4:38

      на первый взгляд плывет из-за не правильного делегата. заменить можно, но все зависит от задачь которые преследуются. обьясните что хотели добиться, чтоб понять куда пнуть исправлять.

        Михаиллл
        • 15 июля 2019 г. 4:44

        Мне нужно что-бы було окно, которое прокручивается по вертикали (т.к. много эллементов интерфейса и они не влезают по вертикали в видимую часть экрана). В него ничего не нужно добавлять и убирать.

          Pavel K.
          • 15 июля 2019 г. 4:46
          • (ред.)

          Скорее всего у вас модель не обьявлена, вот мой пример кода, но раз вам только скроллер нужен поместите все в контейнер Flickable {}

           model: modelVm.newList // newList  возвращает  список обьектов из плюсов
                  delegate: Rectangle{
                      width: parent.width
                      height: childrenRect.height + Theme.paddingMedium * 1.5 // heith like children's
                      color: "transparent"
                      border{ color: "Orange"; width:4}
                      Column{
                          width: parent.width
                          anchors.top: parent.top
                          anchors.left: parent.left
                          anchors.right: parent.right
                          anchors.margins: Theme.paddingMedium
          
                          spacing: Theme.paddingMedium
                          Label{
                              width: parent.width
                              text: "UserId: " + model.modelData.userId
                              wrapMode: Text.WordWrap
                          }
          
                          Label{
                              width: parent.width
                              text: "title: " + model.modelData.title
                              wrapMode: Text.WordWrap
                          }
                          Label{
                              width: parent.width
                              text: "Body: " + model.modelData.body
                              wrapMode: Text.WordWrap
                          }
          
            R
            • 15 июля 2019 г. 4:46
            • (ред.)

            важко розібратись у цьому вашому коді... так наперший погляд не варто писати

                    id: listViewFerstWindow
                    anchors.right: parent.right
                    anchors.rightMargin: 0
                    anchors.left: parent.left
                    anchors.leftMargin: 0
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 0
            

            якщо ви хочите заповнити весь простір, достатньо anchors.fill: parent

            і ніде не додано розмір елемента
            delegate: Item
            {
            id: itemDelegateFirstWindow

                    спробуйте дописати         
                    width: parent.width
                    height: 100
            
              Михаиллл
              • 15 июля 2019 г. 4:50

              Спасибо, сделал так, размеры теперь не плывут. Но глюк с вырубанием экрана при перетаскиванем вверх остался.
              Скажите пожалуйста, из-за чего это может быть?

                  ListView
                  {
                      id: listViewFerstWindow
                      anchors.right: parent.right
                      anchors.rightMargin: 0
                      anchors.left: parent.left
                      anchors.leftMargin: 0
                      anchors.bottom: parent.bottom
                      anchors.bottomMargin: 0
                      anchors.top: parent.top
                      anchors.topMargin: 0
                      model: 1
              
                      delegate: Item
                      {
                          id: itemDelegateFirstWindow
                          anchors.left: parent.left
                          anchors.right: parent.right
                          height: mainWindow1.height
              
                Михаиллл
                • 15 июля 2019 г. 4:55

                Может быть еще можно использовать ScrollView? Пробовал все поместить в ScrollView, но экран после этого не прокручивается.

                  Pavel K.
                  • 15 июля 2019 г. 4:56

                  советую заглянуть в офиц документацию по Qt https://doc.qt.io/qt-5.9/qtquickcontrols2-gallery-pages-scrollbarpage-qml.html
                  задайте фликабл контейнеру width: Theme.paddingLarge а hight : parent.heigh , где то намудрили скорее всего

                    Pavel K.
                    • 15 июля 2019 г. 5:02

                    https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollview.html
                    читайте внимательнее )))
                    Примечание. ScrollView не обрезает содержимое автоматически. Если он не используется как полноэкранный элемент, вам следует установить для свойства clip значение true, как показано выше.
                    и там еще пример реализации всякой есть

                      Михаиллл
                      • 15 июля 2019 г. 5:28
                      • Ответ был помечен как решение.

                      Вот такой вариант заработал

                          Flickable {
                              id: flickable
                              anchors.right: parent.right
                              anchors.rightMargin: 0
                              anchors.left: parent.left
                              anchors.leftMargin: 0
                              anchors.bottom: parent.bottom
                              anchors.bottomMargin: 0
                              anchors.top: parent.top
                              anchors.topMargin: 0
                              contentHeight: 2000
                      
                        Алексей Внуков
                        • 15 июля 2019 г. 6:07

                        вопрос, а зачем вообще ListView если там будет только 1 элемент? и как говорилось выше, в данной ситуации, это не правильная запись

                                anchors.right: parent.right
                                anchors.rightMargin: 0
                                anchors.left: parent.left
                                anchors.leftMargin: 0
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 0
                                anchors.top: parent.top
                                anchors.topMargin: 0
                                contentHeight: 2000
                        

                        правильно будет написать

                         anchors.fill: parent
                        
                          Михаиллл
                          • 15 июля 2019 г. 7:24

                          Спасибо. Просто программа мне автоматом такую запись выдает порой.

                            Комментарии

                            Только авторизованные пользователи могут публиковать комментарии.
                            Пожалуйста, авторизуйтесь или зарегистрируйтесь
                            e
                            • ehot
                            • 31 марта 2024 г. 11:29

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

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

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

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

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

                            • Результат:46баллов,
                            • Очки рейтинга-6
                            Последние комментарии
                            k
                            kmssr8 февраля 2024 г. 15:43
                            Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                            АК
                            Анатолий Кононенко4 февраля 2024 г. 22:50
                            Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                            EVA
                            EVA25 декабря 2023 г. 7:30
                            Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                            J
                            JonnyJo25 декабря 2023 г. 5:38
                            Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                            G
                            Gvozdik18 декабря 2023 г. 18:01
                            Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                            Сейчас обсуждают на форуме
                            a
                            a_vlasov14 апреля 2024 г. 3:41
                            Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Евгений, добрый день! Такой вопрос. Верно ли следующее утверждение: Любое Android-приложение, написанное на Java/Kotlin чисто теоретически (пусть и с большими трудностями) можно написать и на C+…
                            Павел Дорофеев
                            Павел Дорофеев13 апреля 2024 г. 23:35
                            QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь
                            f
                            fastrex4 апреля 2024 г. 1:47
                            Вернуть старое поведение QComboBox, не менять индекс при resetModel Добрый день! У нас много проектов в которых используется QComboBox, в версии 5.5.1, когда модель испускает сигнал resetModel, currentIndex не менялся. В версии 5.15 при resetModel происходит try…
                            P
                            Pisych27 февраля 2023 г. 1:04
                            Как получить в массив значения из связанной модели? Спасибо, разобрался:))
                            AC
                            Alexandru Codreanu19 января 2024 г. 8:57
                            QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…

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