Listview not working properly on iOS


#1

I have a Listview that is not used as a master-detail component, but as a long list with definitions that can be toggled.

In Android it works just fine, but in iOS when a item is tapped, the details are not shown and the chevron disappears instead of showing the other one. After tapping again, the original chevron is shown again. It seems the visibility attribute on the details StackLayout isn’t triggered.

This is the code:

<StackLayout class="page">
    <ListView [items]="items" class="list-group">
        <ng-template let-item="item">
            <StackLayout>
                <GridLayout columns="* 25" orientation="horizontal" (tap)="item.isVisible = !item.isVisible">
                    <Label [text]="item.title" class="list-group-item"></Label>
                    <Label col="1" [text]="'fa-chevron-down' | fonticon" visibility="{{!item.isVisible ? 'visible' : 'collapsed'}}" class="fa" verticalAlignment="center"></Label>
                    <Label col="1" [text]="'fa-chevron-up' | fonticon" visibility="{{item.isVisible ? 'visible' : 'collapsed'}}" class="fa" verticalAlignment="center"></Label>
                </GridLayout>
                <StackLayout>
                    <Label [text]="item.text" textWrap="true" visibility="{{item.isVisible ? 'visible' : 'collapsed'}}" class="list-group-item"></Label>
                </StackLayout>
            </StackLayout>
        </ng-template>
    </ListView>
</StackLayout>

A working version and animated gif of it is here, please have a look: https://github.com/rowdyrabouw/NativeScript-listview


#2

Hey Rowdy,

I didn’t even know ListView rows could have dynamic height. Perhaps you can pull it off, but I don’t know how.

Conincidentally yesterday I created this expand/collapse layout that looks like what you’re trying to achieve:

I’m simply using a bunch of stack layouts. A major caveat is that with lots of items it will slow down rendering (especially on Android!). ListViews don’t suffer from a lot of items.

That being said, you can achieve the desired layout with this code:

<ScrollView class="page">
    <StackLayout>
        <StackLayout *ngFor="let item of items" class="list-group" xstyle="height: 300">
            <GridLayout columns="*, 40" orientation="horizontal" (tap)="item.isVisible = !item.isVisible">
                <Label row="0" col="0" [text]="item.title" class="list-group-item"></Label>
                <Label row="0" col="1" [text]="'fa-chevron-down' | fonticon" [visibility]="!item.isVisible ? 'visible' : 'collapsed'" class="fa" verticalAlignment="middle"></Label>
                <Label row="0" col="1" [text]="'fa-chevron-up' | fonticon"   [visibility]="item.isVisible ? 'visible' : 'collapsed'"  class="fa" verticalAlignment="middle"></Label>
            </GridLayout>
            <StackLayout [visibility]="item.isVisible ? 'visible' : 'collapsed'">
                <Label [text]="item.text" textWrap="true" class="list-group-item"></Label>
            </StackLayout>
        </StackLayout>
    </StackLayout>
</ScrollView>

#3

Hi Eddy,

Thanks for replying.

I had no idea either, but my coworker got it working in Android quit easily.
He handed it over to me for iOS (he has no MAcBook yet) and I can’t get it working.

I got to the point that I could switch classes and manipulate the background color of the text part.
Unfortunately the visibility property in a class was completely ignored.

I’m now thinking to keep the listview on Android, but use StackLayouts on iOS.
The list has about 60 titles with a paragraph each.

Android can profit from the ListView performance while iOS devices are usually more powerful and could handle the StackLayouts.


#4

Yep, that seems like a good compromise…


#5

Have looked at this plugin?


Might work.


#6

Thanks, will look at that too.


#7

If you use the visibility property when showing/hiding, that might be the issue. I reported an issue a while ago about visibility not working dynamically inside ListViews on iOS. Same with height (probably all properties that involves adjusting view dimensions). opacity does work, but it won’t do justice in your case.


#8

I try to make your example but I can not replicate it as you did, thank you