ubuntu-sdk-bugs team mailing list archive

[Launchpad Bug Tracker <1665559@xxxxxxxxxxxxxxxxxx>]

You have been subscribed to a public bug:

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/

** Affects: ubuntu-ui-toolkit (Ubuntu)
     Importance: Undecided
         Status: New

-- 
UbuntuListView dividers don't get updated on model changes
https://bugs.launchpad.net/bugs/1665559
You received this bug notification because you are a member of Ubuntu SDK bug tracking, which is subscribed to ubuntu-ui-toolkit in Ubuntu.