如何在MAUI中实现随滚动条滑动的标题栏显隐效果

核心思路是监听滚动容器（比如ScrollView或CollectionView）的滚动事件，根据滚动方向和偏移量动态调整标题栏的位置或透明度，模拟类似Twitter的效果。以下是具体实现方案：

1. 基础布局搭建 #

先在XAML中构建包含标题栏和滚动内容的页面结构：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.ScrollHeaderPage">
    <Grid>
        <!-- 自定义标题栏，初始隐藏在视图上方 -->
        <VerticalStackLayout x:Name="HeaderBar" 
                             HeightRequest="50"
                             BackgroundColor="#1DA1F2"
                             Padding="16"
                             TranslateY="-50">
            <Label Text="首页" 
                   TextColor="White"
                   FontSize="Large"
                   FontAttributes="Bold"/>
        </VerticalStackLayout>

        <!-- 滚动内容区，绑定滚动事件 -->
        <ScrollView x:Name="MainScrollView"
                    Scrolled="MainScrollView_Scrolled">
            <VerticalStackLayout Spacing="10" Padding="16">
                <!-- 填充足够多的内容让滚动条生效 -->
                <Label Text="滚动测试内容1" FontSize="Medium"/>
                <Label Text="滚动测试内容2" FontSize="Medium"/>
                <Label Text="滚动测试内容3" FontSize="Medium"/>
                <Label Text="滚动测试内容4" FontSize="Medium"/>
                <Label Text="滚动测试内容5" FontSize="Medium"/>
                <!-- 可继续添加更多内容 -->
            </VerticalStackLayout>
        </ScrollView>
    </Grid>
</ContentPage>

2. 滚动事件逻辑处理 #

在页面后台代码中，通过记录滚动偏移量的变化，判断滚动方向，动态调整标题栏的位置：

namespace YourNamespace;

public partial class ScrollHeaderPage : ContentPage
{
    private double _lastScrollY;
    private const double HeaderHeight = 50; // 和标题栏HeightRequest保持一致

    public ScrollHeaderPage()
    {
        InitializeComponent();
    }

    private void MainScrollView_Scrolled(object sender, ScrolledEventArgs e)
    {
        // 计算滚动偏移差
        var scrollDelta = e.ScrollY - _lastScrollY;
        _lastScrollY = e.ScrollY;

        var currentTranslate = HeaderBar.TranslateY;
        double newTranslate;

        if (scrollDelta > 0)
        {
            // 向下滚动：隐藏标题栏，限制最小值为完全隐藏
            newTranslate = Math.Max(currentTranslate + scrollDelta, -HeaderHeight);
        }
        else
        {
            // 向上滚动：显示标题栏，限制最大值为完全显示
            newTranslate = Math.Min(currentTranslate + scrollDelta, 0);
        }

        // 平滑过渡到目标位置
        HeaderBar.TranslateTo(newTranslate, 0, Easing.SinInOut);
    }
}

3. 优化与扩展 #

• 平滑过渡：用TranslateTo配合Easing参数，让标题栏的显示/隐藏更自然，避免生硬跳转。
• 适配CollectionView：如果使用CollectionView，只需替换ScrollView，监听Scrolled事件的逻辑完全一致。
• 渐显渐隐效果：可同时调整标题栏的Opacity属性，比如滚动时让透明度从0到1线性过渡，增强视觉体验。
• 原生标题栏适配：如果要操控平台原生导航栏（iOS导航栏、Android ActionBar），可通过MAUI的平台特定代码实现，但自定义标题栏的跨平台一致性更好。

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