从零学习XamarinForms-ListView

.NET
390
0
0
2022-07-08

与TableView类似,ListView也是一种数据列表视图,尤其是表格很长需要滚动显示的时候特别有效。此外,它还是一种可以人机交互的列表。但是它与TableView是有区别的,之前说过TableView的每一行的样式可以不同,比如文本单元格和开关单元格混搭。但是ListView的每一行样式都相同,如果说需要多种单元格去填充时,必然选择TableView,除此之外,使用ListView会使界面更加美观。

ListView可以填充数组或者集合,如果是数组,会默认分行显示,如果集合中是简单类型数据,同样也会分行显示,如果是一个对象集合,那使用方法会有所不同。下面先从简单的数组开始:

从零学习XamarinForms-ListView

上面的代码中定义了一个ListView数据列表,并为其命名,HasUnevenRows表示均匀行高,RowHeight表示行高,另外,在ListView中多了页眉与页脚属性,它们会随着ListView的滚动而滚动,永远只显示在页眉处和页脚处。但是XAML中不太好绑定数据,因此在C#代码中为ListView绑定数据源更为方便:

从零学习XamarinForms-ListView

这里定义了一个数组,通过ListView的ItemsSource绑定数据源,这个用法很简单,其效果如下:

从零学习XamarinForms-ListView

如果将数组改为集合也是同理,比如下面的代码分三行显示Hello:

从零学习XamarinForms-ListView

上面的简单例子不用多说了,相信一看就明白了。那我们再看一个对象集合的例子,首先创建一个类,包含姓名和电话两个属性:

从零学习XamarinForms-ListView

我们再创建一个集合,里面包含三个Person对象吧:

从零学习XamarinForms-ListView

运行一下看看,结果居然是这个效果:

从零学习XamarinForms-ListView

咦,这是啥情况,张三李四王五一个都不显示了。其实并不奇怪,因为你没有告诉程序,让张三李四王五显示在什么地方,电话号码显示在什么地方,它当然不知道如何显示了,索性它干脆就告诉你,你要显示的内容是一个Person对象。那么问题来了,这个应该怎么解决呢?

其实也是很简单的,这里需要用到Xamarin里面一个很强大的技术叫绑定Binding。首先为ListView的单元格设定显示模板,为方便起见,这里使用之前的TextCell单元格用于显示信息。

从零学习XamarinForms-ListView

写法略微不同,这里使用到了ListView的元素模板属性ItemTemplate,它用于指示每一行要显示的元素模板;DataTemplate属性表示要显示数据模板,比如上面的代码中说明了数据显示在ListView的TextCell单元格中。并且这里强大的地方在于Binding,比如它告诉程序,文本单元格中的Text绑定了数据源的name属性,Detail绑定了数据源的telephone属性。因此在显示的时候,程序会自动与相应的属性做匹配,使之正确显示出来。下面是运行的结果:

从零学习XamarinForms-ListView

上面的这个效果也可以完全通过C#实现,但是过程会略微繁琐一些,个人觉得C#的结构没有XAML清晰,因此建议使用XAML吧。

从零学习XamarinForms-ListView