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);

            // 在主线程上更新 UI
            await 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);

            // 在主线程上更新 UI
            await 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.mfbz.cn/a/256148.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

人体关键点检测4:C/C++实现人体关键点检测(人体姿势估计)含源码 可实时检测

人体关键点检测4&#xff1a;C/C实现人体关键点检测(人体姿势估计)含源码 可实时检测 目录 人体关键点检测4&#xff1a;C/C实现人体关键点检测(人体姿势估计)含源码 可实时检测 1.项目介绍 2.人体关键点检测方法 (1)Top-Down(自上而下)方法 (2)Bottom-Up(自下而上)方法&…

Vue--第十天

终极实战----大事件项目 1.简介&#xff1a; 2.创建项目&#xff1a; 1.创建&#xff08;159-163&#xff09;&#xff1a; 还是对着视频操作吧 2.路由&#xff1a; 3.element Plus: 导入element Plus 后不需要再导入插件配置&#xff0c;就连组件导入也不用 4.pinia构建用…

【C盘清理】Jetbrains全家桶(PyCharm、Clion……)更改 IDE 特定文件(配置、缓存、插件、日志等)存储位置

文章目录 一、官网说明二、更改 IDE 目录的位置1. 转到“帮助”|“编辑自定义属性”2. 各文件位置3. 以PyCharm系统目录为例4. 修改idea.properties 三、清理旧的 IDE 目录 一、官网说明 IDE 使用的目录官网说明 二、更改 IDE 目录的位置 默认情况下&#xff0c;PyCharm 将每…

pytorch——豆瓣读书评价分析

任务目标 基于给定数据集&#xff0c;采用三层bp神经网络方法&#xff0c;编写程序并构建分类模型&#xff0c;通过给定特征实现预测的书籍评分的模型。 选取数据 在各项指标中&#xff0c;我认为书籍的评分和出版社、评论数量还有作者相关&#xff0c;和其他属性的关系并大。…

vscode如何开发微信小程序?(保姆级教学)

1.安装“微信小程序开发工具”扩展 2.安装“vscode weapp api”扩展 3.安装“vscode wxml”扩展 4.安装“vscode-wechat”扩展 5.在终端执行命令&#xff1a; vue create -p dcloudio/uni-preset-vue uniapp-test uniapp-test就是我这里的项目名称了 6.如果遇到了这个错误&a…

云渲染插件怎么设置?云渲染插件设置教程

云渲染技术以其高效、便捷的特性正改变着3D设计和视频制作行业。为了进一步简化渲染过程&#xff0c;云渲染插件应运而生。云渲染插件可以让用户在熟悉的3D软件环境中直接完成渲染任务&#xff0c;大幅提高工作的连贯性与效率。那么如何在3D软件中安装和设定这些神奇的云渲染插…

【为数据之道学习笔记】5-7五类数据主题联接的应用场景

在数字化转型的背景下&#xff0c;华为的数据消费已经不再局限于传统的报表分析&#xff0c;还要支持用户的自助分析、实时分析&#xff0c;通过数据的关联&#xff0c;支持业务的关联影响分析以及对目标对象做特征识别&#xff0c;进行特定业务范围圈定、差异化管理与决策等。…

传奇的GEE、翎风、V8引擎之间的区别,哪个引擎更好用?

我们在选择传奇版本时可以看到有很多GEE引擎的版本&#xff0c;同时也有少数的翎风和V8引擎版本&#xff0c;当我们选择的版本是翎风或是v8引擎&#xff0c;之前没有架设过怎么办呢&#xff1f;不要着急&#xff0c;往下看&#xff01; 这还得从GEE引擎说起&#xff0c;GEE引擎…

「数据结构」二叉树1

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;C启航 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;树&#x1f349;二叉树&#x1f34c;特殊二叉树&#x1f34c;二叉树的性质&#x1f34c;存储结构 &#x1f349;…

【具身智能评估9】Open X-Embodiment: Robotic Learning Datasets and RT-X Models

论文标题&#xff1a;Open X-Embodiment: Robotic Learning Datasets and RT-X Models 论文作者&#xff1a;– 论文原文&#xff1a;https://arxiv.org/abs/2310.08864 论文出处&#xff1a;– 论文被引&#xff1a;–&#xff08;12/18/2023&#xff09; 论文代码&#xff1a…

Antd Select 添加中框

默认antd 的 Select中间并没有竖框&#xff0c;但是ui design设计了&#xff0c;所以记录一下如何添加 默认&#xff1a; CSS&#xff1a; .custom-select-suffix-icon {display: flex;align-items: center; }.custom-select-suffix-icon::before {content: ;height: 31px; …

使用cdn加速导致Vue.js devtools 工具不能使用

打包分析 npm run preview -- --report发现 element-ui mock.js&#xff08;模拟数据&#xff09; cos-js-sdk-v5.js&#xff08;腾讯云上传&#xff09;过大使用cdn加速 2. cdn 加速 webpack排除打包 vue.config.js configureWebpack: {name: name,resolve: {alias: {: reso…

Mybatis-Plus之内置接口(一起了解Mybatis-Plus的内置接口)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringBoot开发之Mybatis-Plus系列》。&#x1…

Python使用HTTP库发送GET请求的示例——轻松探索网络世界

大家好&#xff0c;今天我要给大家介绍一个非常实用的Python库——HTTP库&#xff0c;它可以帮助我们轻松地发送HTTP请求。今天&#xff0c;我们就来学习一下如何使用HTTP库发送GET请求。 首先&#xff0c;我们需要安装HTTP库。如果你还没有安装&#xff0c;可以通过pip命令进…

补题与总结:AtCoder Beginner Contest 333 D、E

文章目录 写在最前面的复盘D - Erase LeavesE - Takahashi Quest 写在最前面的复盘 前三题属于是凑数题&#xff0c;下次争取快点a掉&#xff0c;这次wa了一次 C题写了个三指针&#xff0c;从小到大枚举出满足题意的数&#xff0c;其实可以直接暴力枚举满足题意的数&#xff0c…

Vue框架入门(项目搭建)

VUE文档 https://cn.vuejs.org/guide/introduction.html SFC名词介绍 SFC即 *.vue 文件&#xff0c;英文 Single-File Component&#xff0c;简称 SFC 每一个 *.vue 文件都由三种顶层语言块构成&#xff1a;<template>、<script> 和 <style> template​ 每个…

【git学习笔记 01】打标签学习

文章目录 一、声明二、对标签的基本认知什么是标签&#xff1f;为什么要打标签&#xff1f;如何生成类似github中readme的图标 三、标签相关命令四、示例操作 一、声明 本帖持续更新中如有纰漏&#xff0c;望批评指正&#xff01;参考视频链接&#xff0c;非常感谢原作者&…

houdini 神经网络

实现个神经网络的3D可视化&#xff0c;美爆了&#xff01;-腾讯云开发者社区-腾讯云 https://vimeo.com/stefsietz GitHub - julrog/nn_vis: A project for processing neural networks and rendering to gain insights on the architecture and parameters of a model throu…

天锐绿盾透明加密防泄密系统的功能有哪些

PC端访问地址&#xff1a;www.drhchina.com 天锐绿盾透明加密防泄密系统的功能主要包括以下几点&#xff1a; 透明加解密&#xff1a;该系统采用文件过滤驱动实现透明加解密&#xff0c;这意味着用户在使用过程中完全感觉不到加密和解密的过程&#xff0c;不会影响用户的操作习…

xcode无线真机调试详细图文步骤

步骤一、 步骤二&#xff1a; 步骤三&#xff1a; 配置完到这里&#xff0c;点击真机右键&#xff0c;菜单栏并未出现connect via ip address 选项&#xff0c;也没出现无线连接的小地球图标&#xff0c;别慌&#xff0c;接着进行下一步操作即可。 步骤四&#xff1a; 1.打开…