一个类似商品例表的下拉效果:
代码
新增个类为商品商体类
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; }}[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));}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);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);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;}}
}