Михаиллл
July 15, 2019, 2:10 p.m.

Трудности с созданием 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
    }


}
    }



}


5

Do you like it? Share on social networks!

13
Pavel K.
  • July 15, 2019, 2:29 p.m.
  • (edited)

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

//Page {
// id: page

SilicaFlickable {

 }

// }

    Михаиллл
    • July 15, 2019, 2:36 p.m.

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

      Алексей Внуков
      • July 15, 2019, 2:38 p.m.

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

        Михаиллл
        • July 15, 2019, 2:44 p.m.

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

          Pavel K.
          • July 15, 2019, 2:46 p.m.
          • (edited)

          Скорее всего у вас модель не обьявлена, вот мой пример кода, но раз вам только скроллер нужен поместите все в контейнер 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
            • July 15, 2019, 2:46 p.m.
            • (edited)

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

                    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
            
              Михаиллл
              • July 15, 2019, 2:50 p.m.

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

                  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
              
                Михаиллл
                • July 15, 2019, 2:55 p.m.

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

                  Pavel K.
                  • July 15, 2019, 2:56 p.m.

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

                    Pavel K.
                    • July 15, 2019, 3:02 p.m.

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

                      Михаиллл
                      • July 15, 2019, 3:28 p.m.
                      • The answer was marked as a solution.

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

                          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
                      
                        Алексей Внуков
                        • July 15, 2019, 4:07 p.m.

                        вопрос, а зачем вообще 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
                        
                          Михаиллл
                          • July 15, 2019, 5:24 p.m.

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

                            Comments

                            Only authorized users can post comments.
                            Please, Log in or Sign up
                            • Last comments
                            • AK
                              April 24, 2025, 12:04 p.m.
                              UPD: Переписал логику воспроизведения через стороннюю библиотеку BASS. Там выбрать можно
                            • Evgenii Legotckoi
                              April 16, 2025, 5:08 p.m.
                              Благодарю за отзыв. И вам желаю всяческих успехов!
                            • IscanderChe
                              April 12, 2025, 5:12 p.m.
                              Добрый день. Спасибо Вам за этот проект и отдельно за ответы на форуме, которые мне очень помогли в некоммерческих пет-проектах. Профессиональным программистом я так и не стал, но узнал мно…
                            • AK
                              April 1, 2025, 11:41 a.m.
                              Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
                            • Evgenii Legotckoi
                              March 9, 2025, 9:02 p.m.
                              К сожалению, я этого подсказать не могу, поскольку у меня нет необходимости в обходе блокировок и т.д. Поэтому я и не задавался решением этой проблемы. Ну выглядит так, что вам действитель…