0

I have an UbuntuListView in a QML application for Ubuntu Touch. Above it, there's another component - a TextField.

The initial position of the list looks good. Also, if the list is smaller than the available area, there are no issues with scrolling.

Initial list

However, if the list is large enough, while scrolling and also after the scrolling is finished, the list overlaps the component above:

Scrolled list

Main.qml

import QtQuick 2.4
import QtQuick.Layouts 1.1

import Ubuntu.Components 1.2

MainView {

    width: units.gu(40)
    height: units.gu(30)

    Page {
        ColumnLayout {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            TextField {
                id: textInput
                Layout.fillWidth: true;
                placeholderText: i18n.tr("Add an item")
            }

            MyList {
                anchors {
                    left: parent.left
                    right: parent.right
                }

                Layout.fillHeight: true
            }
        }
    }
}

MyList.qml

import QtQuick 2.4
import Ubuntu.Components 1.2
import Ubuntu.Components.ListItems 1.0

Item {

    ListModel {
        id: listModel
        ListElement {itemName: 'one'}
        ListElement {itemName: 'two'}
        ListElement {itemName: 'three'}
        ListElement {itemName: 'four'}
    }

    UbuntuListView {
        anchors.fill: parent

        model: listModel

        delegate: ListItem {
            id: listItem

            divider.visible: false
            Label {
                id: label
                text: itemName

                verticalAlignment: Text.AlignVCenter
                height: parent.height
            }
        }
    }
}

I tried changing the z property on the components, but it didn't help.

Am I misusing the API? Or is it a bug in the Ubuntu SDK? (and if so, is there any workaround possible?)

1 Answer 1

1

Add clip: true to the UbuntuListView.

By default, QML objects have this set to false, which allows them to draw outside their allocated rectangle. I assume this is an optimization, since it allows the renderer to avoid calculating clipping for each element. Most QML objects only draw within their allocated rectangle, so you don't notice this. But list views with lists long enough to scroll will draw outside of that rectangle, so you need to turn on clipping if you don't want to see that.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .