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

Question

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
    }
 
 
}
    }
 
 
 
}

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Subscribe to the discussion5

Section subscription99

Do you like it? Share on social networks!

735

13

0

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 {
 
 }

// }

0

July 15, 2019, 2:36 p.m.

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

0

July 15, 2019, 2:38 p.m.

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

0

July 15, 2019, 2:44 p.m.

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

0

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
                }

0

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

0

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

0

July 15, 2019, 2:55 p.m.

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

0

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 , где то намудрили скорее всего

0

Pavel K. → Михаиллл
#

July 15, 2019, 3:02 p.m.

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

0

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

0

1

0

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

0

July 15, 2019, 5:24 p.m.

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

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

We recommend hosting TIMEWEB

Comments

Actions