[MAUI]在.NET MAUI中实现可拖拽排序列表

.NET MAUI 中提供了拖放(drag-drop)手势识别器，允许用户通过拖动手势来移动控件。在这篇文章中，我们将学习如何使用拖放手势识别器来实现可拖拽排序列表。在本例中，列表中显示不同大小的磁贴（Tile）并且可以拖拽排序。

在这里插入图片描述

使用.NET MAU实现跨平台支持，本项目可运行于Android、iOS平台。

创建可拖放控件

新建.NET MAUI项目，命名Tile

当手指触碰可拖拽区域超过一定时长（不同平台下时长不一定相同，如在Android中是1s）时，将触发拖动手势。
手指离开屏幕时，将触发放置手势。

启用拖动

为页面视图控件创建拖动手势识别器(DragGestureRecognizer)， 它定义了以下属性：

属性类型描述
CanDragbool指明手势识别器附加到的控件能否为拖动源。 此属性的默认值为 true。
CanDragbool指明手势识别器附加到的控件能否为拖动源。 此属性的默认值为 true。
DragStartingCommandICommand在第一次识别拖动手势时执行。
DragStartingCommandParameterobject是传递给 DragStartingCommand 的参数。
DropCompletedCommandICommand在放置拖动源时执行。
DropCompletedCommandParameterobject是传递给 DropCompletedCommand 的参数。

启用放置

为页面视图控件创建放置手势识别器(DropGestureRecognizer)， 它定义了以下属性：

属性类型描述
AllowDropbool指明手势识别器附加到的元素能否为放置目标。 此属性的默认值为 true。
DragOverCommandICommand在拖动源被拖动到放置目标上时执行。
DragOverCommandParameterobject是传递给 DragOverCommand 的参数。
DragLeaveCommandICommand在拖动源被拖至放置目标上时执行。
DragLeaveCommandParameterobject是传递给 DragLeaveCommand 的参数。
DropCommandICommand在拖动源被放置到放置目标上时执行。
DropCommandParameterobject是传递给 DropCommand 的参数。

创建可拖拽控件的绑定类，实现IDraggableItem接口，定义拖动相关的属性和命令。

public interface IDraggableItem
{bool IsBeingDraggedOver { get; set; }bool IsBeingDragged { get; set; }Command Dragged { get; set; }Command DraggedOver { get; set; }Command DragLeave { get; set; }Command Dropped { get; set; }object DraggedItem { get; set; }object DropPlaceHolderItem { get; set; }
}

Dragged： 拖拽开始时触发的命令。
DraggedOver： 拖拽控件悬停在当前控件上方时触发的命令。
DragLeave： 拖拽控件离开当前控件时触发的命令。
Dropped： 拖拽控件放置在当前控件上方时触发的命令。

IsBeingDragged 为true时，通知当前控件正在被拖拽。
IsBeingDraggedOver 为true时，通知当前控件正在有拖拽控件悬停在其上方。

DraggedItem： 正在拖拽的控件。
DropPlaceHolderItem： 悬停在其上方时的控件，即当前控件的占位控件。

此时可拖拽控件为磁贴片段（TileSegement）， 创建一个类用于描述磁贴可显示的属性，如标题、描述、图标、颜色等。

public class TileSegment 
{public string Title { get; set; }public string Type { get; set; }public string Desc { get; set; }public string Icon { get; set; }public Color Color { get; set; }
}

创建绑定服务类

创建可拖拽控件的绑定服务类TileSegmentService，继承ObservableObject，并实现IDraggableItem接口。

public class TileSegmentService : ObservableObject, ITileSegmentService
{...
}

拖拽（Drag）

拖拽开始时，将IsBeingDragged设置为true，通知当前控件正在被拖拽，同时将DraggedItem设置为当前控件。

private void OnDragged(object item)
{IsBeingDragged=true;DraggedItem=item;
}

拖拽悬停，经过（DragOver）

拖拽控件悬停在当前控件上方时，将IsBeingDraggedOver设置为true，通知当前控件正在有拖拽控件悬停在其上方，同时在服务列表中寻找当前正在被拖拽的服务，将DropPlaceHolderItem设置为当前控件。

private void OnDraggedOver(object item)
{if (!IsBeingDragged && item!=null){IsBeingDraggedOver=true;var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove.DraggedItem!=null){DropPlaceHolderItem=itemToMove.DraggedItem;}}}

离开控件上方时，IsBeingDraggedOver设置为false

private void OnDragLeave(object item)
{IsBeingDraggedOver = false;
}

释放（Drop）

拖拽完成时，获取当前正在被拖拽的控件，将其从服务列表中移除，然后将其插入到当前控件的位置，通知当前控件拖拽完成。

private void OnDropped(object item)
{var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove == null ||  itemToMove == this)return;Container.TileSegments.Remove(itemToMove);var insertAtIndex = Container.TileSegments.IndexOf(this);Container.TileSegments.Insert(insertAtIndex, itemToMove);itemToMove.IsBeingDragged = false;IsBeingDraggedOver = false;DraggedItem=null;}

完整的TileSegmentService代码如下：

public class TileSegmentService : ObservableObject, ITileSegmentService
{public TileSegmentService(TileSegment tileSegment){Remove = new Command(RemoveAction);TileSegment = tileSegment;Dragged = new Command(OnDragged);DraggedOver = new Command(OnDraggedOver);DragLeave = new Command(OnDragLeave);Dropped = new Command(i => OnDropped(i));}private void OnDragged(object item){IsBeingDragged=true;}private void OnDraggedOver(object item){if (!IsBeingDragged && item!=null){IsBeingDraggedOver=true;var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove.DraggedItem!=null){DropPlaceHolderItem=itemToMove.DraggedItem;}}}private object _draggedItem;public object DraggedItem{get { return _draggedItem; }set{_draggedItem = value;OnPropertyChanged();}}private object _dropPlaceHolderItem;public object DropPlaceHolderItem{get { return _dropPlaceHolderItem; }set{_dropPlaceHolderItem = value;OnPropertyChanged();}}private void OnDragLeave(object item){IsBeingDraggedOver = false;DraggedItem = null;}private void OnDropped(object item){var itemToMove = Container.TileSegments.First(i => i.IsBeingDragged);if (itemToMove == null ||  itemToMove == this)return;Container.TileSegments.Remove(itemToMove);var insertAtIndex = Container.TileSegments.IndexOf(this);Container.TileSegments.Insert(insertAtIndex, itemToMove);itemToMove.IsBeingDragged = false;IsBeingDraggedOver = false;DraggedItem=null;}private async void RemoveAction(object obj){if (Container is ITileSegmentServiceContainer){(Container as ITileSegmentServiceContainer).RemoveSegment.Execute(this);}}public IReadOnlyTileSegmentServiceContainer Container { get; set; }private TileSegment tileSegment;public TileSegment TileSegment{get { return tileSegment; }set{tileSegment = value;OnPropertyChanged();}}private bool _isBeingDragged;public bool IsBeingDragged{get { return _isBeingDragged; }set{_isBeingDragged = value;OnPropertyChanged();}}private bool _isBeingDraggedOver;public bool IsBeingDraggedOver{get { return _isBeingDraggedOver; }set{_isBeingDraggedOver = value;OnPropertyChanged();}}public Command Remove { get; set; }public Command Dragged { get; set; }public Command DraggedOver { get; set; }public Command DragLeave { get; set; }public Command Dropped { get; set; }
}

创建页面元素

在Controls目录下创建不同大小的磁贴控件，如下图所示。

在这里插入图片描述

在MainPage中创建CollectionView，用于将磁贴元素以列表形式展示。

<CollectionView Grid.Row="1"x:Name="MainCollectionView"ItemsSource="{Binding TileSegments}"ItemTemplate="{StaticResource TileSegmentDataTemplateSelector}"><CollectionView.ItemsLayout><LinearItemsLayout Orientation="Vertical" /></CollectionView.ItemsLayout>
</CollectionView>

创建MainPageViewModel，创建绑定服务类集合TileSegments，初始化中添加一些不同颜色，大小的磁贴，并将TileSegementService.Container设置为自己(this)。

不同大小的磁贴通过绑定相应的数据，使用不同的数据模板进行展示。请阅读博文 [MAUI程序设计]界面多态与实现，了解如何实现列表Item的多态。

在这里插入图片描述

在MainPage中创建磁贴片段数据模板选择器（TileSegmentDataTemplateSelector），用于根据磁贴片段的大小选择不同的数据模板。

<DataTemplate x:Key="SmallSegment"><controls1:SmallSegmentView  Margin="0,5"ControlTemplate="{StaticResource TileSegmentTemplate}"></controls1:SmallSegmentView>
</DataTemplate>
<DataTemplate x:Key="MediumSegment"><controls1:MediumSegmentView Margin="0,5"ControlTemplate="{StaticResource TileSegmentTemplate}"></controls1:MediumSegmentView>
</DataTemplate>
<DataTemplate x:Key="LargeSegment"><controls1:LargeSegmentView Margin="0,5"ControlTemplate="{StaticResource TileSegmentTemplate}"></controls1:LargeSegmentView>
</DataTemplate>
<controls1:TileSegmentDataTemplateSelector x:Key="TileSegmentDataTemplateSelector"ResourcesContainer="{x:Reference Main}" />

创建磁贴控件模板TileSegmentTemplate，并在此指定DropGestureRecognizer

<ControlTemplate x:Key="TileSegmentTemplate"><ContentView><StackLayout><StackLayout.GestureRecognizers><DropGestureRecognizer AllowDrop="True"DragLeaveCommand="{TemplateBinding BindingContext.DragLeave}"DragLeaveCommandParameter="{TemplateBinding}"DragOverCommand="{TemplateBinding BindingContext.DraggedOver}"DragOverCommandParameter="{TemplateBinding}"DropCommand="{TemplateBinding BindingContext.Dropped}"DropCommandParameter="{TemplateBinding}" /></StackLayout.GestureRecognizers></StackLayout></ContentView>
</ControlTemplate>

创建磁贴控件外观Layout，<ContentPresenter />处将呈现磁贴片段的内容。在Layout指定DragGestureRecognizer。

<Border x:Name="ContentLayout"Margin="0"><Grid><Grid.GestureRecognizers><DragGestureRecognizer CanDrag="True"DragStartingCommand="{TemplateBinding BindingContext.Dragged}"DragStartingCommandParameter="{TemplateBinding}" /></Grid.GestureRecognizers><ContentPresenter /><Button CornerRadius="100"HeightRequest="20"WidthRequest="20"Padding="0"BackgroundColor="Red"TextColor="White"Command="{TemplateBinding BindingContext.Remove}"Text="×"HorizontalOptions="End"VerticalOptions="Start"></Button></Grid>
</Border>

在这里插入图片描述

创建占位控件，用于指示松开手指时，控件将放置的位置区域，在这里绑定DropPlaceHolderItem的高度和宽度。

<Border StrokeThickness="4"StrokeDashArray="2 2"StrokeDashOffset="6"Stroke="black"HorizontalOptions="Center"IsVisible="{TemplateBinding BindingContext.IsBeingDraggedOver}"><Grid HeightRequest="{TemplateBinding BindingContext.DropPlaceHolderItem.Height}"WidthRequest="{TemplateBinding BindingContext.DropPlaceHolderItem.Width}"><Label HorizontalTextAlignment="Center"VerticalOptions="Center"Text="松开手指将放置条目至此处"></Label></Grid>
</Border>

最终效果

在这里插入图片描述

项目地址

Github:maui-samples

关注我，学习更多.NET MAUI开发知识！

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

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

相关文章

基于鲲鹏平台Ceph深度性能调优

基于鲲鹏平台Ceph深度性能调优

刘亮奇 架构师技术联盟 2021-04-12 07:50 摘自&#xff1a; https://mp.weixin.qq.com/s/o9HH-8TF0DbMqHrvsFh1NA 随着 IOT、大数据、移动互联等应用的暴涨&#xff0c;产生的数据也越来越多&#xff0c;整个存储市场总量也逐年增长&#xff0c;预计到 2021 年分布式存储会占到…
阅读更多...
企业权限管理（十六）-aop日志

企业权限管理（十六）-aop日志

SysLog实体类 public class SysLog {private String id;private Date visitTime;private String visitTimeStr;private String username;private String ip;private String url;private Long executionTime;private String method;public String getId() {return id;}public v…
阅读更多...
CDH6.3.2搭建HIVE ON TEZ

CDH6.3.2搭建HIVE ON TEZ

参考 https://blog.csdn.net/ly8951677/article/details/124152987 ----配置hive运行引擎 在/etc/hive/conf/hive-site.xml中修改如下&#xff1a; hive.execution.engine mr–>tez hive.execution.engine 设为tez或者运行代码的时候&#xff1a; set hive.execution.eng…
阅读更多...
商用汽车转向系统常见故障解析

商用汽车转向系统常见故障解析

摘要&#xff1a; 车辆转向系统是用于改变或保持汽车行驶方向的专门机构。其作用是使汽车在行驶过程中能按照驾驶员的操纵意图而适时地改变其行驶方向&#xff0c;并在受到路面传来的偶然冲击及车辆意外地偏离行驶方向时&#xff0c;能与行驶系统配合共同保持车辆继续稳定行驶…
阅读更多...
【数据结构】双向链表

【数据结构】双向链表

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;数据结构 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、双向链表 1.1带头双向循环链表的结构 二、链表的实现 &#x1f4d2…
阅读更多...
服务器如何防止cc攻击

服务器如何防止cc攻击

对于搭载网站运行的服务器来说&#xff0c;cc攻击应该并不陌生&#xff0c;特别是cc攻击的攻击门槛非常低&#xff0c;有个代理IP工具&#xff0c;有个cc攻击软件就可以轻易对任何网站发起攻击&#xff0c;那么服务器如何防止cc攻击?请看下面的介绍。 服务器如何防止cc攻击&a…
阅读更多...
python快速两两元素求相似矩阵

python快速两两元素求相似矩阵

目录 1. 计算相似度矩阵2. 基于sklearn 1. 计算相似度矩阵 计算相似度矩阵的方法有很多种&#xff0c;发现了sklearn中直接有通过计算余弦相似度得到相似度矩阵的方法 1 sklearn.metrics.pairwise.cosine_similarity # 余弦相似度 2 sklearn.metrics.pairwise.pairwise_distan…
阅读更多...
【深度学习】PyTorch快速入门

【深度学习】PyTorch快速入门

【深度学习】学习PyTorch基础 介绍PyTorch 深度学习框架是一种软件工具&#xff0c;旨在简化和加速构建、训练和部署深度学习模型的过程。深度学习框架提供了一系列的函数、类和工具&#xff0c;用于定义、优化和执行各种深度神经网络模型。这些框架帮助研究人员和开发人员专注…
阅读更多...
英伟达结构化剪枝工具Nvidia Apex Automatic Sparsity [ASP]（2）——代码分析

英伟达结构化剪枝工具Nvidia Apex Automatic Sparsity [ASP]（2）——代码分析

伟达结构化剪枝工具Nvidia Apex Automatic Sparsity [ASP]&#xff08;2&#xff09;——代码分析 ASP整个模块的结果如下&#xff1a; . ├── COPYRIGHT ├── README.md ├── __init__.py ├── asp.py ├── permutation_lib.py ├── permutation_search_kernels…
阅读更多...
多线程并发服务器

多线程并发服务器

代码&#xff1a; #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h> #include <unistd.h> #define PORT 6666 //1024~49151 #define IP "192.168.122.130" //ifconfig查看本机IP #include <pthread.h> //…
阅读更多...
安装使用IDEA，修改样式，配置服务，构建Maven项目（超级详细版）

安装使用IDEA，修改样式，配置服务，构建Maven项目（超级详细版）

目录 前言&#xff1a; 一&#xff0c;安装 1.1打开官网JetBrains: Essential tools for software developers and teams点击 Developer Tools&#xff0c;再点击 Intellij IDEA 2.点击下载​编辑 3.选择对应的版本&#xff0c;左边的 Ultimate 版本为旗舰版&#xff0c;需要…
阅读更多...
Gin安装解决国内go 与 热加载

Gin安装解决国内go 与 热加载

get 方式安装超时问题&#xff0c;国内直接用官网推荐的下面这个命令大概率是安装不成功的 go get -u github.com/gin-gonic/gin 可以在你的项目目录下执行下面几个命令&#xff1a; 比如我的项目在E:\Oproject\zl cmd E:\Oproject\zl>就在目录下执行 go env -w GO111…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023