UbuntuListView dividers don't get updated on model changes

Bug #1665559 reported by Michał Sawicz
28
This bug affects 7 people
Affects Status Importance Assigned to Milestone
ubuntu-ui-toolkit (Ubuntu)
Confirmed
Undecided
Unassigned

Bug Description

I have an UbuntuListView with ListItems, and I add items into the model at runtime.
I want to keep the list sorted, so I insert items at specific positions instead of appending them.
The problem is that the divider only shows up for items that are inserted before the last one.
I read in the API documentation for ListItem [1]:
> When used in ListView or UbuntuListView, the last list item will not show the divider no matter of the visible property value set.

So I suppose this is the reason. But shouldn't the divider become visible when the model changes and the ListItem is no longer the last one?

For example, I add the following items, in order:
* aaa
* ccc
* bbb

Because the list is sorted, when adding `bbb` it is inserted in the middle and receives a divider. But `aaa` remains with no divider, and the list looks weird.

Expected:
    aaa
    -----
    bbb
    -----
    ccc

Actual:
    aaa
    bbb
    -----
    ccc

Here is the full source code:

=== Main.qml ===

import QtQuick 2.4
import QtQuick.Layouts 1.1

import Ubuntu.Components 1.2

MainView {

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

    Page {

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

            TextField {
                id: textInput
                Layout.fillWidth: true;
                hasClearButton: true
                onAccepted: {
                    addToList();
                }
            }

            MyList {
                id: myList
                anchors {
                    left: parent.left
                    right: parent.right
                }
                height: parent.height
            }
        }
    }

    function addToList() {
        if(textInput.text.length > 0) {
            myList.add(textInput.text);
            textInput.text = '';
        }
    }
}

=== MyList.qml ===

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

Item {

    ListModel {
        id: listModel
    }

    UbuntuListView {
        anchors.fill: parent
        model: listModel

        delegate: ListItem {
            id: listItem
            height: units.gu(5)

            divider.visible: true; // doesn't help
            Label {
                text: itemName
                verticalAlignment: Text.AlignVCenter
                height: parent.height
            }

            onClicked: {
                divider.visible = true; // doesn't help
            }
        }
    }

    function add(text) {
        var indexToInsert = listModel.count;
        for(var i = 0; i < listModel.count; i++) {
            var compareResult = text.localeCompare(listModel.get(i).itemName);
            if(compareResult <= 0) {
                indexToInsert = i;
                break;
            }
        }
        listModel.insert(indexToInsert, {itemName: text});
    }
}

I'm not really sure if this is a bug, or if I'm not using the API correctly.

[1] https://developer.ubuntu.com/api/apps/qml/sdk-15.04/Ubuntu.Components.ListItem/

Michał Sawicz (saviq)
affects: ubuntu → ubuntu-ui-toolkit (Ubuntu)
Revision history for this message
Launchpad Janitor (janitor) wrote :

Status changed to 'Confirmed' because the bug affects multiple users.

Changed in ubuntu-ui-toolkit (Ubuntu):
status: New → Confirmed
Revision history for this message
Josh Arenson (josharenson) wrote :
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Duplicates of this bug

Other bug subscribers

Related questions

Remote bug watches

Bug watches keep track of this bug in other bug trackers.