Xamarin.Forms: 无限滚动的ListView（懒加载方式）

最新推荐文章于 2024-06-19 18:10:31 发布

dotNET跨平台

最新推荐文章于 2024-06-19 18:10:31 发布

阅读量689

点赞数 1

文章标签： c# java html css github

原文链接：https://zhuanlan.zhihu.com/p/347857685

版权

说明

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

让我们开始吧

第一步

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

（未使用原文图片）

第二步

接下来，出现一个新的对话框，在这里给出应用程序和解决方案的名称，名字为：XFInfiniteScroll，然后点击创建（未使用原文图片）

第三步

之后，在新的对话框窗口中，选择你的Xamarin.Forms应用模板类型和平台之后点击确定,在这里，我选择选项卡式模板和Android,iOS平台。因为这里选择空模板时，没有成功，改选用选项卡模板（未使用原文图片）

第四步

在项目创建完成之后，安装Xamarin.Forms.Extended.Infinitescrolling NuGet包。右键点击解决方案并选择管理解决方案的NuGet程序包，注：需要选中包括预发行版选项

第五步

现在，在项目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文件代码如下：

    <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>
        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="icon_about.png"
            Route="AboutPage" />
        <ShellContent
            Title="Browse"
            ContentTemplate="{DataTemplate local:ItemsPage}"
            Icon="icon_feed.png" />

    </TabBar>

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

在文件夹Views中分别添加SingleViewPage和GroupViewPage内容页。直接在下面图片中修改文件名即可。

SingleViewPage页面布局

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x: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>
        <ListView
            x: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">
                    <Label
                        HorizontalOptions="Center"
                        IsVisible="{Binding IsWorking}"
                        Text="Loading..."
                        VerticalOptions="Center">
                    </Label>
                </Grid>
            </ListView.Footer>
        </ListView>
    </ContentPage.Content>
</ContentPage>

GroupViewPage页面布局

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x: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>
        <ListView
            x: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>
                            <Label
                                Grid.Row="0"
                                Text="{Binding Text}"
                                TextColor="Black">
                            </Label>
                            <Label
                                Grid.Row="1"
                                Text="{Binding Description}"
                                TextColor="Black">
                            </Label>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell Height="25">
                        <Grid BackgroundColor="White">
                            <Label
                                FontAttributes="None"
                                FontSize="16"
                                HorizontalTextAlignment="Center"
                                Text="{Binding Header}"
                                TextColor="Blue"
                                VerticalTextAlignment="Center">
                            </Label>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>
            <ListView.Footer>
                <Grid Padding="6">
                    <Label
                        HorizontalOptions="Center"
                        IsVisible="{Binding IsWorking}"
                        Text="Load..."
                        TextColor="Black"
                        VerticalOptions="Center">
                    </Label>
                </Grid>
            </ListView.Footer>
        </ListView>
    </ContentPage.Content>
</ContentPage>

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