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

Question

Михаиллл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

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

Подписка на обсуждение5

Подписка на раздел99

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

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

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

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

Рекомендуем хостинг TIMEWEB

Комментарии