Xamarin.Forms：滚动时BoxView出现闪烁问题求助

这个问题我之前做Xamarin.Forms和.NET MAUI项目时都碰到过，核心原因是亚像素级高度的元素在滚动过程中，布局系统的重绘精度不够——当你设置HeightRequest="0.5"这样的小数高度时，系统在滚动时会对元素高度进行近似计算，来回波动就导致了闪烁，换Label也一样是因为小数高度的问题。给你几个实用的解决办法：

1. 改用整数高度+透明度模拟视觉效果 #

这是最简单快捷的方案，把分隔线的高度设为1（整数像素），通过调整透明度来模拟原来0.5高度的视觉厚度，整数高度在布局计算时更稳定，不会出现滚动时的高度跳变。

示例代码：

<BoxView HeightRequest="1" Opacity="0.5" Color="#CCCCCC" HorizontalOptions="Fill" />

视觉上和0.5高度的分隔线几乎一致，但滚动时完全不会闪烁。

2. 使用Frame/Border控件替代 #

利用Frame（Xamarin.Forms）或Border（.NET MAUI）的边框功能来实现分隔线，这类控件的边框渲染基于整数像素，布局计算更稳定。

Xamarin.Forms 用Frame： #

<Frame 
    BorderThickness="0,0,0,1" 
    BorderColor="#CCCCCC" 
    Opacity="0.5" 
    Padding="0" 
    Margin="0" 
    HorizontalOptions="Fill" />

这里设置底部边框厚度为1，通过透明度调整视觉深浅，Frame本身高度会自适应边框，滚动时不会有闪烁问题。

.NET MAUI 用Border： #

<Border 
    StrokeThickness="1" 
    StrokeOpacity="0.5" 
    StrokeColor="#CCCCCC" 
    HorizontalOptions="Fill" 
    HeightRequest="1" />

Border是MAUI专门优化的控件，渲染效率更高，同样能避免亚像素布局的问题。

3. 自定义绘制分隔线（适合追求极致精准的场景） #

如果上面的方案都达不到你的视觉要求，可以自定义一个分隔线控件，直接通过Canvas绘制一条线，完全绕过布局系统的高度计算问题。

以Xamarin.Forms为例：
首先定义自定义View：

public class CustomSeparator : View
{
    public static readonly BindableProperty LineColorProperty =
        BindableProperty.Create(nameof(LineColor), typeof(Color), typeof(CustomSeparator), Color.Gray);

    public Color LineColor
    {
        get => (Color)GetValue(LineColorProperty);
        set => SetValue(LineColorProperty, value);
    }

    public static readonly BindableProperty LineOpacityProperty =
        BindableProperty.Create(nameof(LineOpacity), typeof(double), typeof(CustomSeparator), 0.5);

    public double LineOpacity
    {
        get => (double)GetValue(LineOpacityProperty);
        set => SetValue(LineOpacityProperty, value);
    }
}

然后写Android渲染器：

[assembly: ExportRenderer(typeof(CustomSeparator), typeof(CustomSeparatorRenderer))]
namespace YourApp.Droid.Renderers
{
    public class CustomSeparatorRenderer : ViewRenderer<CustomSeparator, Android.Views.View>
    {
        public CustomSeparatorRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<CustomSeparator> e)
        {
            base.OnElementChanged(e);
            if (Control == null)
            {
                SetNativeControl(new Android.Views.View(Context));
            }
        }

        protected override void OnDraw(Canvas canvas)
        {
            base.OnDraw(canvas);
            if (Element == null) return;

            var paint = new Paint();
            paint.Color = Element.LineColor.ToAndroid();
            paint.Alpha = (int)(Element.LineOpacity * 255);
            paint.StrokeWidth = 1; // 固定1像素宽度

            // 在控件垂直居中位置绘制一条贯穿宽度的线
            float yPos = Height / 2f;
            canvas.DrawLine(0, yPos, Width, yPos, paint);
        }
    }
}

使用时直接在XAML中引用：

<local:CustomSeparator LineColor="#CCCCCC" LineOpacity="0.5" HorizontalOptions="Fill" HeightRequest="1" />

这种方式完全由自己控制绘制逻辑，滚动时不会有任何闪烁问题。

总结 #

个人最推荐第一种方案，不需要额外代码，改动最小，视觉效果也能满足大部分场景；如果对分隔线的视觉精度要求极高，再考虑自定义绘制的方案。

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