MAUI自定义Editor输入长文本无法滚动问题求助

问题场景 #

实现了包含自定义Editor和发送图标的消息输入UI，XAML代码如下：

<Grid 
    Grid.Row="2"
    VerticalOptions="EndAndExpand"
    Margin="0,0,0,10">
        
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="9*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Border
        Grid.Row="0" 
        Grid.Column="0"
        Margin="8,5,0,5"
        BackgroundColor="Transparent"
        Stroke="Transparent"
        StrokeShape="RoundRectangle 20"
        HorizontalOptions="FillAndExpand">

        <local:MessageCustomEditor
            x:Name="tweetText"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="Center" 
            AutoSize="TextChanges"
            TextColor="#1C7DB4"
            BackgroundColor="White"
            PlaceholderColor="#1C7DB4"
            IsTextPredictionEnabled="False"
            Placeholder="  Enter Caption...">
            <local:MessageCustomEditor.MaximumHeightRequest>
                <OnIdiom x:TypeArguments="x:Double">
                    <OnIdiom.Phone>100</OnIdiom.Phone>
                    <OnIdiom.Tablet>150</OnIdiom.Tablet>
                    <OnIdiom.Desktop>100</OnIdiom.Desktop>
                </OnIdiom>
            </local:MessageCustomEditor.MaximumHeightRequest>
            <local:MessageCustomEditor.FontSize>
                <OnIdiom x:TypeArguments="x:Double">
                    <OnIdiom.Phone>18</OnIdiom.Phone>
                    <OnIdiom.Tablet>27</OnIdiom.Tablet>
                    <OnIdiom.Desktop>18</OnIdiom.Desktop>
                </OnIdiom>
            </local:MessageCustomEditor.FontSize>
        </local:MessageCustomEditor>
    </Border>

<!--send icon-->
    <Image 
        Grid.Row="0" 
        Source="ic_send_xx.png"
        Grid.Column="1">
    </Image>
</Grid>

自定义Editor的Android Renderer代码：

class MessageCustomEditorRenderer : EditorRenderer
{
    public MessageCustomEditorRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            GradientDrawable gd = new GradientDrawable();
            gd.SetColor(global::Android.Graphics.Color.Transparent);
            this.Control.SetBackgroundDrawable(gd);
            this.Control.SetRawInputType(InputTypes.TextFlagNoSuggestions);
            Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Gray));
            Control.SetTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Black));

            // Add Padding (left, top, right, bottom)
            Control.SetPadding(20, 20, 20, 20);
            // Enforce maximum height
            if (Element is MessageCustomEditor customEditor)
            {
                double maxHeight = customEditor.MaximumHeightRequest;
                Control.SetMaxHeight((int)Context.ToPixels(maxHeight));
            }
        }
    }
}

输入长文本后，Editor无法滚动查看内容，尝试添加Control.SetHorizontallyScrolling(false);和Control.VerticalScrollBarEnabled = true;未生效。

解决方案 #

1. 修改Android Renderer配置 #

核心是确保原生EditText启用滚动行为，调整后的Renderer代码如下：

class MessageCustomEditorRenderer : EditorRenderer
{
    public MessageCustomEditorRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            GradientDrawable gd = new GradientDrawable();
            gd.SetColor(global::Android.Graphics.Color.Transparent);
            this.Control.SetBackgroundDrawable(gd);
            
            // 配置输入类型：支持多行 + 无建议
            Control.SetRawInputType(InputTypes.TextFlagMultiLine | InputTypes.TextFlagNoSuggestions);
            
            Control.SetHintTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Gray));
            Control.SetTextColor(ColorStateList.ValueOf(global::Android.Graphics.Color.Black));

            // Add Padding (left, top, right, bottom)
            Control.SetPadding(20, 20, 20, 20);
            
            // 启用垂直滚动
            Control.SetHorizontallyScrolling(false);
            Control.VerticalScrollBarEnabled = true;
            Control.ScrollBarStyle = Android.Views.ScrollbarStyles.InsideInset;
            // 设置滚动行为的关键：添加滚动移动方法
            Control.MovementMethod = new Android.Text.Method.ScrollingMovementMethod();

            // Enforce maximum height
            if (Element is MessageCustomEditor customEditor)
            {
                double maxHeight = customEditor.MaximumHeightRequest;
                Control.SetMaxHeight((int)Context.ToPixels(maxHeight));
            }
        }
    }
}

2. 调整XAML布局属性 #

将MessageCustomEditor的VerticalOptions从Center改为FillAndExpand，确保控件填充可用空间，滚动区域正确：

<local:MessageCustomEditor
    x:Name="tweetText"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"  <!-- 修改此处 -->
    AutoSize="TextChanges"
    TextColor="#1C7DB4"
    BackgroundColor="White"
    PlaceholderColor="#1C7DB4"
    IsTextPredictionEnabled="False"
    Placeholder="  Enter Caption...">
    <!-- 其余属性保持不变 -->
</local:MessageCustomEditor>

修改后，当输入文本超过Editor的最大高度时，即可通过垂直滚动查看全部内容。

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