說(shuō)明

在本博客中，學(xué)習(xí)如何在Xamarin.Forms應(yīng)用程序中設(shè)計(jì)一個(gè)可擴(kuò)展的無(wú)限滾動(dòng)的ListView。這個(gè)無(wú)限滾動(dòng)函數(shù)在默認(rèn)的Xamarin.Forms不存在，因此我們需要為此添加插件。在這里我們需要知道無(wú)限滾動(dòng)時(shí)如何工作的。首先，顯示固定的數(shù)據(jù)。一旦用戶滾動(dòng)到末尾，我們可以在列表的末尾添加更多的數(shù)據(jù)，這樣，列表就會(huì)不斷滾動(dòng)，直到數(shù)據(jù)結(jié)束。

讓我們開始吧

第一步

創(chuàng)建一個(gè)新的Xamarin.Forms工程，打開Visual Studio，點(diǎn)擊新建->項(xiàng)目->在對(duì)話框中選擇移動(dòng)應(yīng)用(Xamarin.Forms)，并點(diǎn)擊下一步**

（未使用原文圖片）

第二步

接下來(lái)，出現(xiàn)一個(gè)新的對(duì)話框，在這里給出應(yīng)用程序和解決方案的名稱，名字為：XFInfiniteScroll，然后點(diǎn)擊創(chuàng)建（未使用原文圖片）

第三步

之后，在新的對(duì)話框窗口中，選擇你的Xamarin.Forms應(yīng)用模板類型和平臺(tái)之后點(diǎn)擊確定,在這里，我選擇選項(xiàng)卡式模板和Android,iOS平臺(tái)。因?yàn)檫@里選擇空模板時(shí)，沒有成功，改選用選項(xiàng)卡模板（未使用原文圖片）

第四步

在項(xiàng)目創(chuàng)建完成之后，安裝Xamarin.Forms.Extended.Infinitescrolling NuGet包。右鍵點(diǎn)擊解決方案并選擇管理解決方案的NuGet程序包，注：需要選中包括預(yù)發(fā)行版選項(xiàng)

第五步

現(xiàn)在，在項(xiàng)目XFInfiniteScroll 選中Models文件夾，右擊添加一個(gè)類，名稱為：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;?}} }

第六步

繼續(xù)在項(xiàng)目XFInfiniteScroll中，添加一個(gè)文件夾，名稱為：FakeDataSource，在文件夾中添加一個(gè)相當(dāng)于提供模擬數(shù)據(jù)的類，名稱為：InfiniteDataItems，代碼如下（占用空間較大，已刪除，可以在Github上面閱讀源碼）

第七步

由于本項(xiàng)目采用的是選項(xiàng)卡模板，并且目前已使用Shell方式（可以參考：Xamarin.Forms Shell。修改AppShell.xaml文件代碼如下：

????<TabBar><Tab?Title="Infinite?Scroll"?Icon="icon_about.png"><ShellContent?Title="Single"><local:SingleViewPage></local:SingleViewPage></ShellContent><ShellContent?Title="Group"><local:GroupViewPage></local:GroupViewPage></ShellContent></Tab><ShellContentTitle="About"ContentTemplate="{DataTemplate?local:AboutPage}"Icon="icon_about.png"Route="AboutPage"?/><ShellContentTitle="Browse"ContentTemplate="{DataTemplate?local:ItemsPage}"Icon="icon_feed.png"?/></TabBar>

此處，對(duì)于TabbedPage的用法出現(xiàn)錯(cuò)誤，因此只能采用此種方法處理頁(yè)面的布局

在文件夾Views中分別添加SingleViewPage和GroupViewPage內(nèi)容頁(yè)。直接在下面圖片中修改文件名即可。

SingleViewPage頁(yè)面布局

<?xml?version="1.0"?encoding="utf-8"??> <ContentPagex:Class="XFInfiniteScroll.Views.SingleViewPage"xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:extended="clr-namespace:Xamarin.Forms.Extended;assembly=Xamarin.Forms.Extended.InfiniteScrolling"BackgroundColor="Red"><ContentPage.Content><ListViewx:Name="ListSingleItems"HasUnevenRows="True"HorizontalOptions="FillAndExpand"VerticalOptions="FillAndExpand"><ListView.Behaviors><extended:InfiniteScrollBehavior?IsLoadingMore="{Binding?IsWorking}"></extended:InfiniteScrollBehavior></ListView.Behaviors><ListView.ItemTemplate><DataTemplate><ViewCell><Grid?Padding="12"><Grid.RowDefinitions><RowDefinition?Height="20"?/><RowDefinition?Height="20"?/></Grid.RowDefinitions><Label?Grid.Row="0"?Text="{Binding?Text}"></Label><Label?Grid.Row="1"?Text="{Binding?Description}"></Label></Grid></ViewCell></DataTemplate></ListView.ItemTemplate><ListView.Footer><Grid?Padding="6"><LabelHorizontalOptions="Center"IsVisible="{Binding?IsWorking}"Text="Loading..."VerticalOptions="Center"></Label></Grid></ListView.Footer></ListView></ContentPage.Content> </ContentPage>

GroupViewPage頁(yè)面布局

<?xml?version="1.0"?encoding="utf-8"??> <ContentPagex:Class="XFInfiniteScroll.Views.GroupViewPage"xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:extended="clr-namespace:Xamarin.Forms.Extended;assembly=Xamarin.Forms.Extended.InfiniteScrolling"><ContentPage.Content><ListViewx:Name="GroupItems"HasUnevenRows="True"HorizontalOptions="FillAndExpand"IsGroupingEnabled="True"VerticalOptions="FillAndExpand"><ListView.Behaviors><extended:InfiniteScrollBehavior?IsLoadingMore="{Binding?IsWorking}"?/></ListView.Behaviors><ListView.ItemTemplate><DataTemplate><ViewCell><Grid?Padding="12"><Grid.ColumnDefinitions><ColumnDefinition?Width="*"></ColumnDefinition></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition?Height="20"></RowDefinition><RowDefinition?Height="20"></RowDefinition></Grid.RowDefinitions><LabelGrid.Row="0"Text="{Binding?Text}"TextColor="Black"></Label><LabelGrid.Row="1"Text="{Binding?Description}"TextColor="Black"></Label></Grid></ViewCell></DataTemplate></ListView.ItemTemplate><ListView.GroupHeaderTemplate><DataTemplate><ViewCell?Height="25"><Grid?BackgroundColor="White"><LabelFontAttributes="None"FontSize="16"HorizontalTextAlignment="Center"Text="{Binding?Header}"TextColor="Blue"VerticalTextAlignment="Center"></Label></Grid></ViewCell></DataTemplate></ListView.GroupHeaderTemplate><ListView.Footer><Grid?Padding="6"><LabelHorizontalOptions="Center"IsVisible="{Binding?IsWorking}"Text="Load..."TextColor="Black"VerticalOptions="Center"></Label></Grid></ListView.Footer></ListView></ContentPage.Content> </ContentPage>

對(duì)于后臺(tái)代碼，可以在GitHub上面參考。https://github.com/mzy666888/XFInfiniteScroll

第八步

現(xiàn)在，可以運(yùn)行你的Xamarin.Forms應(yīng)用程序，并可以看到以下的輸出內(nèi)容。在本機(jī)上運(yùn)行界面：視頻地址（可以查看下一條的視頻）或者移步到：https://www.zhihu.com/zvideo/1338425998501240832

看一下原文中的動(dòng)圖顯示

由于iOS &?Android運(yùn)行結(jié)果動(dòng)圖的幀數(shù)超過(guò)300幀，上傳失敗，需要看的可以移步到知乎查看

— END —

「擴(kuò)展閱讀」

[GitHub] 75+的 C# 數(shù)據(jù)結(jié)構(gòu)和算法實(shí)現(xiàn)

誰(shuí)說(shuō).NET不適合搞BD，ML、AI

推薦一個(gè)集錄屏、截圖、音頻于一體的軟件給大家

10個(gè)用于C＃.NET開發(fā)的基本調(diào)試工具

Xamarin.Forms 二維碼掃描實(shí)踐

在Asp.Net Core MVC 開發(fā)過(guò)程中遇到的問題總結(jié)

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

基于Asp.Net Core MVC和AdminLTE的響應(yīng)式管理后臺(tái)之側(cè)邊欄處理

[譯]如何在C#中調(diào)試LINQ查詢

C# 語(yǔ)言性能提升方法

使用MQTTnet搭建Mqtt服務(wù)器

OxyPlot在WinForm中的應(yīng)用

「公眾號(hào)推薦」

回復(fù)：「redis」?獲取5.0.9版的Windows安裝包（exe）

回復(fù)：「ca」 獲取 ?截圖、GIF等工具三件套，便攜版和安裝版全部包括

回復(fù)：「新書」 獲取《ASP.NET Core 3框架揭秘》購(gòu)書鏈接

回復(fù)：「cv」 獲取《OpenCV 4快速入門》購(gòu)書鏈接

回復(fù)：「進(jìn)階」 獲取 《CLR via C#（第4版）》購(gòu)書鏈接

回復(fù)：「本質(zhì)論」獲取 《C# 7.0本質(zhì)論》購(gòu)書鏈接

回復(fù)：「WPF」獲取 WPF 電子書

「加號(hào)主回復(fù)”入群“」即可加入群聊

---

總結(jié)

以上是生活随笔為你收集整理的Xamarin.Forms: 无限滚动的ListView（懒加载方式）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。