xamarin.forms使用stacklayout自定义列表及相关加载状态处理

资料来源：网络整理时间：2023/2/14 0:56:10 共计：3636 浏览

xamarin.forms本身有提供ListView控件，个人觉得不够灵活，而且在和ScrollView嵌套使用时，会存在内外两个滚动条问题，不好处理。

我们可以用ScrollView和StackLayout及TapGestureRecognizer做一个列表功能，可自定义每行item个数及其他的自定义动作，下边做一个单行双item列表，scrollview滚动到底部时，显示加载状态并加载数据：

1、xaml部分

//网络异常时重载按钮
<Button x:Name="btnReload" BorderWidth="0" BackgroundColor="White" HorizontalOptions="Center" IsVisible="false"></Button>
//列表主体
<ScrollView x:Name="svList" Orientation="Vertical" VerticalOptions="StartAndExpand">
        <Frame OutlineColor="Red" BackgroundColor="White" HasShadow="False">
          <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            //筛选条件下返回数据为空时显示
            <StackLayout Orientation="Horizontal">
              <Label x:Name="lblNoResult"></Label>
            </StackLayout>
            //列表数据
            <StackLayout x:Name="searchList" VerticalOptions="FillAndExpand">
            </StackLayout>
          </StackLayout>
        </Frame>
      </ScrollView>
      //加载状态提示
      <Label x:Name="lblLoading" Text="全力帮您加载中,稍等" HorizontalOptions="Center" IsVisible="false"></Label>

2、xaml.cs

public partial class List : ContentPage
    {
        //这边异步锁用来防止数据重复加载，不做描述，有兴趣的请自行查找相关资料
        static SemaphoreSlim semaphoreSlim = new SemaphoreSlim(1, 1);

        public int PageIndex{ get; set; }

        public int PageSize { get; set; }

        public List()
        {
            InitializeComponent();
            //分页初始值
            this.PageIndex = 0;
            this.PageSize = 10;

            //列表初始化加载
            this.Appearing += async (sender, e) =>
            {
                var initResult = await BindSearchResult();
            };

            //滚动到底部时加载数据
            svList.Scrolled += async (sender, e) =>
            {
                //1、重载按钮是否为显示状态
                //2、列表滚动位置计算：内容高度 - 列表高度
                if (!btnReload.IsVisible && svList.ScrollY >= svList.ContentSize.Height - svList.Height)
                {
                    var result = await BindSearchResult();
                }
            };
            //重载按钮事件，请求异常或者网络异常时需要重新加载数据
            btnReload.Command = new Command(async () =>
            {
                await BindSearchResult();
            });

            private async Task<bool> BindSearchResult()
        {
            //加载状态显示
            lblLoading.IsVisible = true;
            //重载按钮隐藏
            btnReload.IsVisible = false;
            //防止短时间内重复加载数据
            await semaphoreSlim.WaitAsync();
            try
            {
                //构建请求参数MultipartFormDataContent可以同时传递不同类型的请求参数：StringContent、
                //StreamContent等。
                var mpContent = new MultipartFormDataContent();
                mpContent.Add(new StringContent(this.PageIndex.ToString(), Encoding.UTF8), "pageIndex");
                mpContent.Add(new StringContent(this.PageSize.ToString(), Encoding.UTF8), "pageSize");
                //Utils.PostAsync<T>()自己封装的restapi请求方法，这边不介绍，UrlConfig类为各种api请求的Url集合
                var postResult = await Utils.PostAsync<SearchResult>(UrlConfig.SearchUrl, mpContent, (message) =>
                {
                    btnReload.Text = message + "点击重新加载";
                    btnReload.IsVisible = true;
                    lblLoading.IsVisible = false;
                });
                if (postResult != null && postResult.success)
                {
                    //判断请求结果记录数
                    if (postResult.data.total > 0)
                    {
                        lblNoResult.IsVisible = false;
                        //左边列表source
                        var search_l = postResult.data.data.Where((d, i) => i % 2 == 0).Select(d => new
                        {
                            //这边为左边列表要绑定的业务数据
                        }).ToList();
                        //右边列表source
                        var search_r = postResult.data.data.Where((d, i) => i % 2 != 0).Select(d => new
                        {
                            //这边为右边列表要绑定的业务数据
                        }).ToList();
                        //UI构造，这个例子为双item，所以以右边列表个数作为遍历上限
                        //使用Grid列表item的布局，这边以一张图片和图片名称的Label示例
                        for (var i = 0; i < search_r.Count(); i++)
                        {
                            var grid = new Grid();
                            var item_l = new StackLayout();
                            item_l.Children.Add(new Image() { Source = search_l[i].ImagePath, HeightRequest = 120 });
                            item_l.Children.Add(new Label() { Text = search_l[i].ImageName, HorizontalOptions = LayoutOptions.Center });
                            //图片ID编号，由列表进入item详情页时传递过去
                            item_l.Children.Add(new Label() { Text = search_l[i].ID.ToString(), IsVisible = false });
                            var item_r = new StackLayout();
                            item_r.Children.Add(new Image() { Source = search_r[i].ImagePath, HeightRequest = 120 });
                            item_r.Children.Add(new Label() { Text = search_r[i].ImageName, HorizontalOptions = LayoutOptions.Center });
                            //图片ID编号，由列表进入item详情页时传递过去
                            item_r.Children.Add(new Label() { Text = search_r[i].ID.ToString(), IsVisible = false });
                            grid.Children.Add(item_l, 0, 0);
                            grid.Children.Add(item_r, 1, 0);
                            //左边列表item点击事件
                            var tap_l = new TapGestureRecognizer();
                            tap_l.Tapped += (sender, e) =>
                            {
                            //点击进入详情页
                            var id = ((Label)(((StackLayout)sender).Children[2])).Text;
                                var name = ((Label)(((StackLayout)sender).Children[1])).Text;
                                this.Navigation.PushAsync(new Info(int.Parse(id)) { Title = /*自定义详情页标题*/ });
                            };
                            item_l.GestureRecognizers.Add(tap_l);
                            //右边列表item点击事件
                            var tap_r = new TapGestureRecognizer();
                            tap_r.Tapped += (sender, e) =>
                            {
                            //点击进入详情页
                            var id = ((Label)(((StackLayout)sender).Children[2])).Text;
                                var name = ((Label)(((StackLayout)sender).Children[1])).Text;
                                this.Navigation.PushAsync(new Info(int.Parse(id)) { Title = /*自定义详情页标题*/ });
                            };
                            item_r.GestureRecognizers.Add(tap_r);
                            searchList.Children.Add(grid);
                        }
                        //请求个数恰巧为单数时处理，逻辑同上
                        if (search_l.Count() > search_r.Count())
                        {
                            var grid = new Grid();
                            var item = new StackLayout();
                            item.Children.Add(new Image() { Source = search_l[search_l.Count() - 1].ImagePath, HeightRequest = 120 });
                            item.Children.Add(new Label() { Text = search_l[search_l.Count() - 1].ImageName, HorizontalOptions = LayoutOptions.Center });
                            item.Children.Add(new Label() { Text = search_l[search_l.Count() - 1].ID.ToString(), IsVisible = false });
                            var tap = new TapGestureRecognizer();
                            tap.Tapped += (sender, e) =>
                            {
                            //点击进入详情页
                            var id = ((Label)(((StackLayout)sender).Children[2])).Text;
                                var name = ((Label)(((StackLayout)sender).Children[1])).Text;
                                this.Navigation.PushAsync(new Info(int.Parse(id)) { Title = /*自定义详情页标题*/ });
                            };
                            item.GestureRecognizers.Add(tap);
                            grid.Children.Add(item, 0, 0);
                            searchList.Children.Add(grid);
                        }
                    }
                    else
                    {
                        //请求返回的数据为空处理
                        lblNoResult.IsVisible = true;
                        lblNoResult.Text = string.Format("抱歉，没有找到{0}的信息", /*某某某*/);
                    }
                    //关闭加载状态显示
                    lblLoading.IsVisible = false;
                    if (!postResult.data.data.Any())
                    {
                        lblLoaded.IsVisible = true;
                        await lblLoaded.FadeTo(0, 2000);
                        lblLoaded.Opacity = 1;
                        lblLoaded.IsVisible = false;
                    }
                    //当前分页数累加
                    this.PageIndex++;
                    return true;
                }
                return false;
            }
            finally
            {
                //释放锁
                semaphoreSlim.Release();
            }
        }
        }
    }

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：Xamarin.Forms - 在Listview单元格中绑定多个按钮单击？ | ·下一条：Xamarin.Android 自定义VideoView 进度条