Xamarin.Forms: 无限滚动的ListView(懒加载方式)

说明

在本博客中,学习如何在Xamarin.Forms应用程序中设计一个可扩展的无限滚动的ListView。这个无限滚动函数在默认的Xamarin.Forms不存在,因此我们需要为此添加插件。在这里我们需要知道无限滚动时如何工作的。首先,显示固定的数据。一旦用户滚动到末尾,我们可以在列表的末尾添加更多的数据,这样,列表就会不断滚动,直到数据结束。

让我们开始吧

第一步

创建一个新的Xamarin.Forms工程,打开Visual Studio,点击新建->项目->在对话框中选择移动应用(Xamarin.Forms),并点击下一步**

Xamarin.Forms: 无限滚动的ListView(懒加载方式)_第1张图片

(未使用原文图片)

第二步

接下来,出现一个新的对话框,在这里给出应用程序和解决方案的名称,名字为:XFInfiniteScroll,然后点击创建Xamarin.Forms: 无限滚动的ListView(懒加载方式)_第2张图片(未使用原文图片)

第三步

之后,在新的对话框窗口中,选择你的Xamarin.Forms应用模板类型和平台之后点击确定,在这里,我选择选项卡式模板和Android,iOS平台。因为这里选择空模板时,没有成功,改选用选项卡模板Xamarin.Forms: 无限滚动的ListView(懒加载方式)_第3张图片(未使用原文图片)

第四步

在项目创建完成之后,安装Xamarin.Forms.Extended.Infinitescrolling NuGet包。右键点击解决方案并选择管理解决方案的NuGet程序包,注:需要选中包括预发行版选项Xamarin.Forms: 无限滚动的ListView(懒加载方式)_第4张图片

第五步

现在,在项目XFInfiniteScroll 选中Models文件夹,右击添加一个类,名称为:InfiniteItems,代码如下:

namespace XFInfiniteScroll.Models
{
    public class InfiniteItems
    {
        public string Id { get; set; }
        public string Text { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}

第六步

继续在项目XFInfiniteScroll中,添加一个文件夹,名称为:FakeDataSource,在文件夹中添加一个相当于提供模拟数据的类,名称为:InfiniteDataItems,代码如下(占用空间较大,已删除,可以在Github上面阅读源码)

第七步

由于本项目采用的是选项卡模板,并且目前已使用Shell方式(可以参考:Xamarin.Forms Shell。修改AppShell.xaml文件代码如下:

    
        
            
                
                
            
            
                
                
            
        
        
        

    

此处,对于TabbedPage的用法出现错误,因此只能采用此种方法处理页面的布局

在文件夹Views中分别添加SingleViewPageGroupViewPage内容页。直接在下面图片中修改文件名即可。Xamarin.Forms: 无限滚动的ListView(懒加载方式)_第5张图片

SingleViewPage页面布局



    
        
            
                
                
            
            
                
                    
                        
                            
                                
                                
                            
                            
                            
                            
                            
                        
                    
                
            
            
                
                    
                
            
        
    

GroupViewPage页面布局



    
        
            
                
            
            
                
                    
                        
                            
                                
                                
                            
                            
                                
                                
                                
                                
                            
                            
                            
                        
                    
                
            
            
                
                    
                        
                            
                        
                    
                
            
            
                
                    
                
            
        
    

对于后台代码,可以在GitHub上面参考。https://github.com/mzy666888/XFInfiniteScroll

第八步

现在,可以运行你的Xamarin.Forms应用程序,并可以看到以下的输出内容。在本机上运行界面:视频地址(可以查看下一条的视频)或者移步到:https://www.zhihu.com/zvideo/1338425998501240832

看一下原文中的动图显示

由于iOS & Android运行结果动图的帧数超过300帧,上传失败,需要看的可以移步到知乎查看

— END —

「扩展阅读」

[GitHub] 75+的 C# 数据结构和算法实现

谁说.NET不适合搞BD,ML、AI

推荐一个集录屏、截图、音频于一体的软件给大家

10个用于C#.NET开发的基本调试工具

Xamarin.Forms 二维码扫描实践

在Asp.Net Core MVC 开发过程中遇到的问题总结

前端小白在asp.net core mvc中使用ECharts

基于Asp.Net Core MVC和AdminLTE的响应式管理后台之侧边栏处理

[译]如何在C#中调试LINQ查询

C# 语言性能提升方法

使用MQTTnet搭建Mqtt服务器

OxyPlot在WinForm中的应用

「公众号推荐」

回复:「redis」 获取5.0.9版的Windows安装包(exe)

回复:「ca」 获取  截图、GIF等工具三件套,便携版和安装版全部包括

回复:「新书」 获取《ASP.NET Core 3框架揭秘》购书链接

回复:「cv」 获取《OpenCV 4快速入门》购书链接

回复:「进阶」 获取 《CLR via C#(第4版)》购书链接

回复:「本质论」获取 《C# 7.0本质论》购书链接

回复:「WPF」获取 WPF 电子书

「加号主回复”入群“」即可加入群聊

Xamarin.Forms: 无限滚动的ListView(懒加载方式)_第6张图片


Xamarin.Forms: 无限滚动的ListView(懒加载方式)_第7张图片

你可能感兴趣的:(c#,java,html,css,github)