Cascades Development

[Kaz32]

Hi, I want to make some item of listview has different looks / UI from other / default item UI.

How to do this?

Thanks

[javayoung]

Custom the "item" or "header" in the listItemComponents

listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            //add your customized view
                        }
                    }
                ]

[Kaz32]

No, what i mean is different UI for item on listView, like 2 UI for item on listview.

Ex: I want first item UI different from other item

Thanks

[javayoung]

It is very easy just check the index of row then use different look.

I copy the part of sample code as below

listItemComponents: [
                ListItemComponent {
                    type: "imageItem"
                    ImageItem {
                    }
                },
                ListItemComponent {
                    type: "textItem"
                    TextItem {
                    }
                },
                ListItemComponent {
                    type: "header"
                    Header {
                       
                    }
                }
            ]

            // Item type-mapping
            function itemType(data, indexPath) {
                
                if (indexPath.length == 1) {
                    
                    return 'header';
                } else {
                    if (data.imageSource != "") {
                        // The data contain an image return an item that can display an image.
                        return 'imageItem'
                    } else {
                        // No image in the data display a text item.
                        return 'textItem'
                    }
                }
            }