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

一个类似商品例表的下拉效果:在这里插入图片描述

代码

新增个类为商品商体类

    public class ProductItem{public string ImageSource { get; set; }public string ProductName { get; set; }public string Price { get; set; }}

界面代码:

<?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"  RowHeight="70" Margin="20"><ListView.ItemTemplate><DataTemplate><ViewCell><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><!-- 第一列宽度自适应 --><ColumnDefinition Width="*" /><!-- 第二列宽度填充剩余空间 --></Grid.ColumnDefinitions><!-- 左侧图片 --><Image Source="{Binding ImageSource}" Aspect="AspectFit"WidthRequest="150"HeightRequest="150"  Grid.Column="0" /><!-- 右侧商品名和价格 --><StackLayout Grid.Column="1" Margin="10"><Label Text="{Binding ProductName}" FontAttributes="Bold"FontSize="18"/><Label Text="{Binding Price}" FontSize="16" TextColor="Green"/></StackLayout></Grid></ViewCell></DataTemplate></ListView.ItemTemplate></ListView></StackLayout></RefreshView>
</ContentPage>

后端代码:

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
{public class ProductItem{public string ImageSource { get; set; }public string ProductName { get; set; }public string Price { get; set; }}// 标记 XAML 编译选项[XamlCompilation(XamlCompilationOptions.Compile)]public partial class MainPage : ContentPage{// 数据源,用于存储列表项的集合private ObservableCollection<ProductItem> _items;// 是否正在刷新的标志private bool _isRefreshing;public ObservableCollection<ProductItem> Items => _items;// 随机数生成器private Random _random = new Random();// 各类水果数组private string[] fruits = { "苹果", "香蕉", "橙子", "葡萄", "草莓", "梨", "桃子", "西瓜", "蓝莓", "樱桃" };// 构造函数,初始化页面public MainPage(){InitializeComponent();BindingContext = this;// 初始化数据源并填充一些初始数据_items = new ObservableCollection<ProductItem>();for (int i = 0; i < 20; i++){AddNewItem();}// 通知界面数据源已更新OnPropertyChanged(nameof(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);// 在主线程上更新 UIawait MainThread.InvokeOnMainThreadAsync(() =>{// 添加新的列表项for (int i = 0; i < 10; i++){AddNewItem();}// 结束刷新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);// 在主线程上更新 UIawait MainThread.InvokeOnMainThreadAsync(() =>{// 添加更多新的列表项for (int i = 0; i < 10; i++){AddNewItem();}IsRefreshing = false;});}private void AddNewItem(){string randomFruit = fruits[_random.Next(fruits.Length)];_items.Add(new ProductItem{ImageSource = "dotnet_bot.png", // 替换为实际的图片路径ProductName = $"{randomFruit}{_items.Count}",Price = $"价格: {_random.NextDouble() * 100:F2} 元"});}// 通用方法,用于设置属性并触发属性更改通知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;}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/285605.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

swing快速入门(十八)

注释很详细&#xff0c;直接上代码 上一篇 新增内容 1.给文本域添加TextListener&#xff0c;监听内容变化 2.给下拉选择框添加ItemListener&#xff0c;监听内容变化 import javax.swing.*; import java.awt.*; import java.awt.event.*;public class swing_test_14 {publ…

HamronyOS 自动化测试框架使用指南

概述 为支撑 HarmonyOS 操作系统的自动化测试活动开展&#xff0c;我们提供了支持 JS/TS 语言的单元及 UI 测试框架&#xff0c;支持开发者针对应用接口进行单元测试&#xff0c;并且可基于 UI 操作进行 UI 自动化脚本的编写。 本指南重点介绍自动化测试框架的主要功能&#x…

camel丢失请求body问题排查

项目组要和被收购的公司做接口对接&#xff0c;使用camel进行集成。在使用的过程当中&#xff0c;我们几个小伙伴都遇到了一个相同的问题&#xff1a;请求request body的内容失踪了。这里贴出有问题的路由配置&#xff1a; <?xml version"1.0" encoding"U…

高速口相关知识

一.不通系列fpga对高速口的叫法不一样&#xff1a; artix7——GTP kintex7——GTX virtex7——GTH 二.高速口的架构基本一致————4对rx/tx对1个时钟模块&#xff08;包含4个cpll1个Qpll&#xff09; 1&#xff1a;一个高速口【一个高速bank&#xff1a;&#xff08;eg&a…

ADB:获取坐标

命令&#xff1a; adb shell getevent | grep -e "0035" -e "0036" adb shell getevent -l | grep -e "0035" -e "0036" 这一条正确&#xff0c;但是&#xff0c;grep给过滤了&#xff0c;导致没有输出 getevent -c 10 //输出10条信息…

天猫数据分析-天猫查数据软件-11月天猫平台饮料市场品牌及店铺销量销额数据分析

今年以来&#xff0c;饮料是快消品行业中少数保持稳定增长的品类之一。 11月份&#xff0c;饮料市场同样呈现较好的增长态势。根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;今年11月份&#xff0c;天猫平台上饮料市场的销量为2700万&#xff0c;环比增长约42%&#xf…

MLOps在极狐GitLab 的现状和前瞻

什么是 MLOps 首先我们可以这么定义机器学习&#xff08;Machine Learning&#xff09;&#xff1a;通过一组工具和算法&#xff0c;从给定数据集中提取信息以进行具有一定程度不确定性的预测&#xff0c;借助于这些预测增强用户体验或推动内部决策。 同一般的软件研发流程比…

PyTorch机器学习与深度学习

近年来&#xff0c;随着AlphaGo、无人驾驶汽车、医学影像智慧辅助诊疗、ImageNet竞赛等热点事件的发生&#xff0c;人工智能迎来了新一轮的发展浪潮。尤其是深度学习技术&#xff0c;在许多行业都取得了颠覆性的成果。另外&#xff0c;近年来&#xff0c;Pytorch深度学习框架受…

Python办公自动化全网最全干货,高效工作再不加班!

文章目录 前言Python Excel库对比一、Python xlrd 读取 操作Excel1.1 xlrd模块介绍1.2 安装xlrd模块1.3 使用介绍1.4 实战训练 二、Python xlwt 写入 操作Excel&#xff08;仅限xls格式&#xff01;&#xff09;2.1 pip安装xlwt2.2 使用xlwt创建新表格并写入2.3 xlwt 设置字体格…

性能加速包: SpringBoot 2.7JDK 17,你敢尝一尝吗 | 京东物流技术团队

前言 众所周知&#xff0c;SpringBoot3.0迎来了全面支持JDK17的局面&#xff0c;且最低支持版本就是JDK17&#xff0c;这就意味着&#xff0c;Spring社区将完全抛弃JDK8&#xff0c;全面转战JDK17。作为JAVA开源生态里的扛把子&#xff0c;Spring可以说是整个JAVA生态的风向标…

Arcgis中利用模型构建器统一栅格数据的行列号

1、统一&#xff08;X,Y) 方法&#xff1a;"数据管理工具箱"→"Projections and Transformations"→"Raster"→"Project Raster" 构建模型 这里以行列号最小的栅格&#xff08;X,Y&#xff09;为准&#xff08;其实也就是栅格数据的空…

网络编程day3作业

多进程实现TCP并发服务器 #include<myhead.h>#define PORT 8888 #define IP "192.168.125.130"void hadder(int signo) {if(signo SIGCHLD){while(waitpid(-1,NULL,WNOHANG) > 0);} }int information_exchange(int newfd,struct sockaddr_in cin) {char b…