Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Highlighted
Developer
Posts: 59
Registered: ‎09-05-2013
My Device: Z10
My Carrier: *
Accepted Solution

Spacing between listview delegates

Hello,

I have this layout in a Page

        ListView {
            id: listView
            dataModel: modelData
            listItemComponents: [
                ListItemComponent {
                    Container {
                        background: Color.Cyan
                        Label {
                        }
                    }
                }
            ]
        }

 I want to insert a blank space between each listitem, how can I do this?

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Spacing between listview delegates

What do you mean by spacing?

 

You can't put a space between the physical list items but you can use padding and margins within your container.

 

You could also fake it by adding your own background image to the ListItem that has a background that looks like a list item then a space underneath.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 59
Registered: ‎09-05-2013
My Device: Z10
My Carrier: *

Re: Spacing between listview delegates

Oh so there isn't any official way, well example how to do this with using padding?
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Spacing between listview delegates

If you answer my question on what exactly it is you are trying to do (picture mock up would be good) I or someone else can offer some solutions.

 

Actual spacing between listitems though so that you can see between each item isn't possible.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Spacing between listview delegates

For example placing an alternating blank listitem may be a solution?

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 59
Registered: ‎09-05-2013
My Device: Z10
My Carrier: *

Re: Spacing between listview delegates

Mockup.png


This is what I want to do, leave blank spaces between each list item.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Spacing between listview delegates

I forgot to mention that it can take a while for pictures to be approved I'll keep checking back for when they do.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Spacing between listview delegates

In the meantime you may like to look at this and possibly find a solution...

 

http://developer.blackberry.com/native/documentation/cascades/ui/layouts/


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 59
Registered: ‎09-05-2013
My Device: Z10
My Carrier: *

Re: Spacing between listview delegates

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Spacing between listview delegates

[ Edited ]

I've created a new project from ListView template and experimented a bit. The following seems to work:

 

            ListView {
                dataModel: XmlDataModel {
                    source: "data.xml"
                }
                function itemType(data, indexPath) {
                    return "item"
                } 
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            topMargin: 50
                            bottomMargin: 50
                            background: Color.Cyan
                            Label {
                                text: ListItemData.name
                            }
                        }
                    }
                ]
            }

Don't forget to return a proper itemType, otherwise default ListItemComponent will be used and the changes will not be seen.

 


Andrey Fidrya, @zmeyc on twitter