Xamarin中实现Editor控件拖拽功能咨询（PanGestureRecognizer未生效）

我想做类似社交应用的帖子文本添加功能，用户输入文本后能把Editor拖到任意位置。目前输入功能正常，但默认文本显示在屏幕中央，用PanGestureRecognizer尝试拖拽没生效，求可行实现方法。

原Editor代码：

<Editor IsVisible="{Binding HasTextBox}" Text="{Binding EntryText}" HorizontalOptions="Center" VerticalOptions="Center">
   <Editor.GestureRecognizers>
      <PanGestureRecognizer PanUpdated="OnPanUpdated" />
   </Editor.GestureRecognizers>
</Editor>

原PanUpdated方法：

double x, y;

private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    var editor = sender as Editor;

    switch (e.StatusType)
    {
        case GestureStatus.Started:
            // Store the current position
            x = editor.TranslationX;
            y = editor.TranslationY;
            break;
        case GestureStatus.Running:
            // Adjust the position based on the user's movement
            editor.TranslationX = x + e.TotalX;
            editor.TranslationY = y + e.TotalY;
            break;
        case GestureStatus.Completed:
            // Optionally store the final position
            x = editor.TranslationX;
            y = editor.TranslationY;
            break;
    }
}

可行解决方案 #

PanGestureRecognizer是实现拖拽的正确方案，原代码没生效主要是以下两个问题：

• 布局约束限制：Editor的HorizontalOptions和VerticalOptions设为Center，会让布局容器始终将其居中，覆盖TranslationX/Y的偏移效果。
• 输入焦点冲突：点击Editor时默认触发输入焦点，优先响应输入事件而非拖拽手势。

修改步骤：

1. 调整布局属性
   将Editor的HorizontalOptions和VerticalOptions改为Start，并设置固定宽高，避免布局容器重置位置：

<Editor IsVisible="{Binding HasTextBox}" Text="{Binding EntryText}" 
        HorizontalOptions="Start" VerticalOptions="Start"
        WidthRequest="200" HeightRequest="100">
    <Editor.GestureRecognizers>
        <PanGestureRecognizer PanUpdated="OnPanUpdated" />
    </Editor.GestureRecognizers>
</Editor>

2. 优化手势与输入的冲突处理
   在手势开始时移除输入焦点，确保拖拽操作优先触发：

double x, y;

private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    var editor = sender as Editor;
    if (editor == null) return;

    switch (e.StatusType)
    {
        case GestureStatus.Started:
            editor.Unfocus();
            x = editor.TranslationX;
            y = editor.TranslationY;
            break;
        case GestureStatus.Running:
            editor.TranslationX = x + e.TotalX;
            editor.TranslationY = y + e.TotalY;
            break;
        case GestureStatus.Completed:
            x = editor.TranslationX;
            y = editor.TranslationY;
            break;
    }
}

3. 额外优化建议

• 若需要保存拖拽后的位置，可将x、y值绑定到ViewModel属性，下次加载时恢复。
• 给Editor添加边框或背景，让拖拽区域更直观。
• 限制拖拽范围避免超出屏幕：

  case GestureStatus.Running:
      var newX = x + e.TotalX;
      var newY = y + e.TotalY;
      // 限制不超出屏幕边界
      newX = Math.Max(0, Math.Min(DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density - editor.WidthRequest, newX));
      newY = Math.Max(0, Math.Min(DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density - editor.HeightRequest, newY));
      
      editor.TranslationX = newX;
      editor.TranslationY = newY;
      break;
  

内容的提问来源于stack exchange，提问作者bluedra