Михаиллл
Михаиллл15 июля 2019 г. 14: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 г. 14:29
  • (ред.)

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

//Page {
// id: page

SilicaFlickable {

 }

// }

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

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

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

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

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

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

          Pavel K.
          • 15 июля 2019 г. 14: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 г. 14: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 г. 14: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 г. 14:55

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

                  Pavel K.
                  • 15 июля 2019 г. 14: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 г. 15:02

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

                      Михаиллл
                      • 15 июля 2019 г. 15: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 г. 16: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 г. 17:24

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

                            Комментарии

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

                            Qt - Тест 001. Сигналы и слоты

                            • Результат:84баллов,
                            • Очки рейтинга4
                            Ua

                            Qt - Тест 001. Сигналы и слоты

                            • Результат:42баллов,
                            • Очки рейтинга-8
                            ОК

                            Qt - Тест 001. Сигналы и слоты

                            • Результат:47баллов,
                            • Очки рейтинга-6
                            Последние комментарии
                            ИМ
                            Игорь Максимов22 ноября 2024 г. 21:51
                            Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                            Evgenii Legotckoi
                            Evgenii Legotckoi31 октября 2024 г. 23:37
                            Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                            A
                            ALO1ZE19 октября 2024 г. 17:19
                            Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                            ИМ
                            Игорь Максимов5 октября 2024 г. 16:51
                            Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                            d
                            dblas55 июля 2024 г. 20:02
                            QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                            Сейчас обсуждают на форуме
                            f
                            firstlunoxod15 февраля 2025 г. 13:46
                            Рисование на QGraphicsScene при зажатой кнопке мыши Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
                            Дмитрий
                            Дмитрий3 февраля 2025 г. 16:24
                            Создание deb-пакета. Как создать ярлык на рабочем столе после установки собственного deb-пакета? Всем привет. Сделал свой deb-пакет с программой. Всё устанавливается и работает. Ставлю по пути /usr/bin/my_application. Как для пользователя при установке пакета сразу создать ярлык на раб…
                            NW
                            Nayo Wai30 января 2025 г. 19:22
                            не запускается компьютер!!! Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
                            n
                            nkly3 января 2025 г. 12:52
                            Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
                            M
                            Marsel17 августа 2023 г. 0:26
                            OAuth2.0 через VK, получение email Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.

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