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

news2024/12/26 14:27:34

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

代码

新增个类为商品商体类

    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.coloradmin.cn/o/1321731.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

现代化智慧档案馆八防十防建设调研样本

以下是一份完整的解决方案&#xff0c;包括方案介绍、方案优势、实施方案、预算和清单、实施时间和进度计划以及可能遇到的难点和解决方案。 方案介绍 档案库房八防十防环境一体化监控系统旨在为档案库房提供全方位的环境监控和管理&#xff0c;保障档案的安全、稳定和可靠。该…

C++前后函数的相互调用,函数的预定义,靠前的函数调用靠后的函数

好多时候我们习惯性的认为在C中函数的定义是没有顺序的关系的&#xff0c;如下所示 代码片段1 void func1() {cout << "func1" << "\n"; } void func2() {cout << "func2" << "\n"; }代码片段2 void fun…

浅析PAM市场价值

随着全球数字化蓬勃发展&#xff0c;云计算、人工智能、大数据、5G等技术的应用范围不断扩大&#xff0c;在企业运用新技术提高自身效率的同时也面临着更多由新技术诱发的网络威胁&#xff0c;全球网络威胁形势愈发严峻。网络攻击行为日趋复杂&#xff0c;构建全面的安全防护体…

端口占用命令 netstat (centos)+netstat (windows)

linux 1.使用 netstat 命令查看端口占用情况 netstat -tlnp 使用 -p 选项查看进程信息。 使用 -t 选项列出 TCP 协议的连接&#xff1a;类似&#xff08;使用 -u 选项列出 UDP 协议的连接&#xff1a;&#xff09; 2.查找占用指定端口号的应用信息 netstat -tlnp | grep 3…

基于SSM的高校疫情防控出入信息管理系统的设计与实现论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本高校疫情防控出入信息管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞…

【PHP入门】1.3-数据类型、转换、判断

-数据类型- 数据类型&#xff1a;data type&#xff0c;在 PHP中指的是存储的数据本身的类型&#xff0c;而不是变量的类型。 PHP是一种弱类型语言&#xff0c;变量本身没有数据类型。 1.3.1PHP的八种数据类型 在PHP中将数据分为三大类八小类&#xff1a; 简单&#xff0…

【C语言】还不会【二维数组】!进来手把手教你,保姆级!!!

讲二维数组前&#xff0c;先讲一下sizeof()函数的用法&#xff1b; 目录 sizeof()函数 二维数组概念 二维数组创建 二维数组初始化 1&#xff0c;不完全初始化 2&#xff0c;完全初始化 二维数组下标 二维数组的输入和输出 二维数组的储存 变长数组 总结 sizeof()函数…

【QT】解决QTableView修改合并单元格内容无法修改到合并范围内的单元格

问题&#xff1a;修改合并单元格的内容 修改合并单元格的内容时&#xff0c;希望直接修改到合并范围内的单元格&#xff0c;Qt没有实现这个功能&#xff0c;需要自己写出 Delegate来实现 方案&#xff1a;Delegate class EditDelegate : public QStyledItemDelegate { public:…

使用vite搭建项目时,在启动vite后,浏览器显示页面:找不到localhost的网页

现象 在使用前端工具vite&#xff08;版本5&#xff09;&#xff0c;搭建vue3项目时&#xff0c;启动vite&#xff0c;浏览器显示页面&#xff1a;找不到localhost的网页, 起初怀疑是 未加参数 --host0.0.0.0,导致&#xff0c;后加上该参数后问题依旧 解决 将index.html页面…

如何进一步优化Ubuntu服务器的性能

导读&#xff1a; 要进一步优化Ubuntu服务器的性能&#xff0c;您可以考虑以下几个方面&#xff1a;优化软件包管理&#xff1a; Ubuntu使用APT&#xff08;Advanced Package Tool&#xff09;作为其软件包管理工具。为了提高性能&#xff0c;您可以采取以下措施 要进一步优化U…

Java接收并解析HL7协议数据

一、前言 HL7协议相信医疗行业的IT人员都不陌生&#xff0c;笔者由于接触时间比较短&#xff0c;乍一听“协议”还是比较懵&#xff0c;不自觉就把它和“HTTP”、"SOAP”之类的网络协议挂上关联&#xff0c;可事实上这个HL7只是一种数据格式&#xff0c;传输方式也可以使用…

Java操作windows系统功能(一)

Java可以通过调用Windows系统提供的命令行函数或调用外部程序来操作Windows系统。以下是一些常见的Java操作Windows的方法&#xff1a; 执行Windows命令&#xff1a;可以使用Java的Runtime类的exec()方法来执行Windows系统的命令。例如&#xff0c;可以使用以下代码来执行dir命…

堆---leetcode算法题目

文章目录 1. 数组中第K大元素-力扣 215 题 堆最重要的三个方法&#xff1a; heapify&#xff1a;建堆&#xff1a;找到第一个非叶子节点&#xff0c;比较这个节点和它的左右孩子&#xff0c;调整&#xff0c;如果交换了父节点和它的孩子的话&#xff0c;还需要再将交换后的孩子…

分享64个JavaGame源码总有一个是你想要的

分享64个JavaGame源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 游戏项目名称 链接&#xff1a;https://pan.baidu.com/s/1Q4VlNlOMJU2yzoNagAcaCA?pwd6666 提取码&#xff1a;6666 Java Netty MMO 回…

SpringMVC-02

SpringMVC-02 SSM 框架集成与测试环境配置添加源代码 SSM 框架集成与测试 环境配置 IDEA 下创建项⽬ 创建Maven对应的Web项⽬ 配置 pom.xml 2.1. 修改 JDK 版本 <properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><mav…

网络编程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…

构建高效统一的音视频联动融合通信调度平台

在信息技术日益高度发展的今天&#xff0c;越来越多的企业或者组织机构重视如何提高内外部的工作效率&#xff0c;但由于传统的通信方式如电话、邮件、短信、传真等方式无法满足企业高效、快速的沟通要求&#xff0c;因此需要一个可以将各种通信方式结合在一起的通信系统来满足…

金融CRM有用吗?金融行业CRM有哪些功能

市场形式波诡云谲&#xff0c;金融行业也面临着资源体系分散、竞争力后继不足、未知风险无法规避等问题。金融企业该如何解决这些问题&#xff0c;或许可以了解一下CRM管理系统&#xff0c;和其提供的金融行业CRM解决方案。 金融行业是银行业、保险业、信托业、证券业和租赁业…

论文查重如何降重 PaperBERT

大家好&#xff0c;今天来聊聊论文查重如何降重&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff0c;可以借助此类工具&#xff1a; 论文查重如何降重 在论文撰写过程中&#xff0c;查重和降重是两个不可或缺…

基于javaweb实现的家教系统

一、系统架构 前端&#xff1a;jsp | js | css | jquery 后端&#xff1a;spring | springmvc | spring-orm 环境&#xff1a;jdk1.7 | mysql 二、代码及数据库 三、功能介绍 01. 管理后台-首页 02. 管理后台-用户信息管理 03. 管理后台-订单信息管理 04. 管理后台-辅…