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>
相关推荐
Element_南笙15 小时前
吴恩达新课程:Agentic AI(笔记2)
数据库·人工智能·笔记·python·深度学习·ui·自然语言处理
SmartSoftHelp开发辅助优化16 小时前
C# WinForm 编程高手:程序,进程,线程。程序,窗体,UI,后台。是如何协调工作的?深度解析>SmartSoftHelp魔法精灵工作室
microsoft·ui·c#
我命由我123451 天前
Photoshop - Photoshop 工具栏(14)抓手工具
ui·职场和发展·pdf·求职招聘·职场发展·photoshop·美工
覆东流1 天前
Photoshop修图
ui·photoshop
Kingsdesigner1 天前
告别“手绘”图表:Illustrator与XD联动的数据可视化(Data Viz)工作流
ui·adobe·信息可视化·illustrator·媒体·图表·平面设计
Larry_Yanan2 天前
QML学习笔记(四十三)QML与C++交互:上下文属性暴露
c++·笔记·qt·学习·ui·交互
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
Larry_Yanan3 天前
QML学习笔记(四十二)QML的MessageDialog
c++·笔记·qt·学习·ui
Javashop_jjj3 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
程序员杰哥3 天前
UI自动化测试实战:从入门到精通
自动化测试·软件测试·python·selenium·测试工具·ui·职场和发展