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
New Developer
daljit97
Posts: 50
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?

Please use plain text.
Developer
BBSJdev
Posts: 5,987
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
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. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
New Developer
daljit97
Posts: 50
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?
Please use plain text.
Developer
BBSJdev
Posts: 5,987
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
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. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
BBSJdev
Posts: 5,987
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
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. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
New Developer
daljit97
Posts: 50
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.

Please use plain text.
Developer
BBSJdev
Posts: 5,987
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
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. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
Developer
BBSJdev
Posts: 5,987
Registered: ‎07-05-2012
My Device: Playbook, Z10 LE, Dev Alpha C
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. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Please use plain text.
New Developer
daljit97
Posts: 50
Registered: ‎09-05-2013
My Device: Z10
My Carrier: *

Re: Spacing between listview delegates

Please use plain text.
Developer
Zmey
Posts: 1,510
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

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
Please use plain text.