maui中实现加载更多 RefreshView跟ListView(1)

效果如图:

MainPage.xaml.cs:

xml 复制代码
using System;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Xaml;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace fenye
{
    // 标记 XAML 编译选项
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPage : ContentPage
    {
        // 数据源,用于存储列表项的集合
        private ObservableCollection<string> _items;

        // 是否正在刷新的标志
        private bool _isRefreshing;
  
        // 构造函数,初始化页面
        public MainPage()
        {
            InitializeComponent();
            BindingContext = this;

            // 初始化数据源并填充一些初始数据
            _items = new ObservableCollection<string>();
            for (int i = 0; i < 20; i++)
            {
                _items.Add($"Item {i}");
            }

            // 通知界面数据源已更新
            OnPropertyChanged(nameof(Items));
        }

        // 数据源的公共属性
        public ObservableCollection<string> Items => _items;

        // 是否正在刷新的属性,并使用 SetProperty 方法实现属性更改通知
        public bool IsRefreshing
        {
            get => _isRefreshing;
            set => SetProperty(ref _isRefreshing, value);
        }

    

        // 刷新命令,绑定到下拉刷新控件
        public Command RefreshCommand => new Command(async () => await OnRefresh());

        // 下拉刷新事件处理方法
        private async Task OnRefresh()
        {
            // 开始刷新
            IsRefreshing = true;

            // 模拟异步操作(例如,从网络加载数据)
            await Task.Delay(2000);

            // 在主线程上更新 UI
            await MainThread.InvokeOnMainThreadAsync(() =>
            {
                // 添加新的列表项
                for (int i = 0; i < 10; i++)
                {
                    _items.Add($"New Item {_items.Count}");
                }

                // 结束刷新
                IsRefreshing = false;
            });
        }

        // 列表项即将可见事件处理方法
        private async void OnItemAppearing(object sender, ItemVisibilityEventArgs e)
        {
            // 检查是否即将显示最后一个列表项,触发加载更多
            if (e.Item == _items[_items.Count - 1])
            {
                await LoadMoreItems();
            }
        }

        // 加载更多的方法
        private async Task LoadMoreItems()
        {
            // 模拟加载更多数据的异步操作
            await Task.Delay(2000);

            // 在主线程上更新 UI
            await MainThread.InvokeOnMainThreadAsync(() =>
            {
                // 添加更多新的列表项
                for (int i = 0; i < 10; i++)
                {
                    _items.Add($"New Item {_items.Count}");
                }
                IsRefreshing = false;
            
            });
        }

        // 通用方法,用于设置属性并触发属性更改通知
        protected bool SetProperty<T>(ref T backingStore, T value,
            [CallerMemberName] string propertyName = "",
            Action onChanged = null)
        {
            if (EqualityComparer<T>.Default.Equals(backingStore, value))
                return false;

            backingStore = value;
            onChanged?.Invoke();
            OnPropertyChanged(propertyName);
            return true;
        }
    }
}

xaml

xml 复制代码
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://schemas.microsoft.com/dotnet/2021/maui/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             BackgroundColor="{DynamicResource PageBackgroundColor}"
             x:Class="fenye.MainPage">

    <RefreshView IsRefreshing="{Binding IsRefreshing}"  
                 Command="{Binding RefreshCommand}">
        <StackLayout Margin="10">
            <ListView ItemsSource="{Binding Items}" 
                      ItemAppearing="OnItemAppearing">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding .}" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
  
        </StackLayout>
    </RefreshView>
</ContentPage>
相关推荐
John_ToDebug3 小时前
定制 ResourceBundle 的实现与 DuiLib 思想在 Chromium 架构下的应用解析
c++·chrome·ui
萌新小码农‍6 小时前
Java分页 Element—UI
java·开发语言·ui
YoungUpUp10 小时前
【PS2025全网最新版】稳定版PS2025保姆级下载安装详细图文教程(附安装包)(Adobe Photoshop)
ui·adobe·photoshop·ps·平面设计·ps2025·adobephotoshop
开开心心loky1 天前
[iOS] push 和 present Controller 的区别
ui·ios·objective-c·cocoa
眠りたいです1 天前
基于脚手架微服务的视频点播系统-播放控制部分
c++·qt·ui·微服务·云原生·架构·播放器
我命由我123452 天前
Photoshop - Photoshop 创建文档
学习·ui·课程设计·设计·photoshop·ps·美工
六月的可乐2 天前
【干货推荐】AI助理前端UI组件-悬浮球组件
前端·人工智能·ui
我命由我123453 天前
Photoshop - Photoshop 创建图层蒙版
运维·学习·ui·课程设计·设计·ps·美工
江拥羡橙4 天前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
江拥羡橙4 天前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos