MAUI | .NET：如何实现可滚动的弹性标题栏（Toolbar/TitleView）？

核心思路 #

• 监听ScrollView的滚动事件，根据滚动偏移量动态调整头部背景图的透明度
• 利用Shell自带的TitleView固定展示带Logo的标题，不受滚动行为影响

具体实现步骤（以.NET MAUI为例） #

1. 页面布局结构 #

在Shell内容页中构建分层布局，区分背景图、滚动内容和固定标题：

<ContentPage ...>
    <Grid>
        <!-- 可渐隐的头部背景图 -->
        <Image 
            x:Name="HeaderBgImage"
            Source="header_bg.png"
            Aspect="AspectFill"
            HeightRequest="200" />
        
        <!-- 滚动内容区域 -->
        <ScrollView 
            x:Name="MainScrollView"
            Scrolled="OnScrollViewScrolled">
            <StackLayout Margin="0,200,0,0">
                <!-- 页面主体内容，按需添加 -->
                <Label Text="示例内容行1" FontSize="Large" Margin="16"/>
                <Label Text="示例内容行2" FontSize="Large" Margin="16"/>
                <!-- 更多内容... -->
            </StackLayout>
        </ScrollView>
        
        <!-- Shell固定TitleView（带Logo） -->
        <Shell.TitleView>
            <StackLayout Orientation="Horizontal" HorizontalOptions="Start" Padding="16,0">
                <Image Source="app_logo.png" WidthRequest="40" HeightRequest="40"/>
                <Label Text="应用名称" FontSize="Title" Margin="8,0,0,0"/>
            </StackLayout>
        </Shell.TitleView>
    </Grid>
</ContentPage>

2. 滚动事件处理逻辑 #

在后台代码中实现滚动监听与透明度计算：

private void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
    // 设置背景图完全消失的滚动阈值（可根据需求调整）
    const int scrollThreshold = 150;
    
    // 计算当前透明度：滚动距离未达阈值时，按比例降低透明度；超过阈值则完全隐藏
    var opacity = 1 - Math.Clamp(e.ScrollY / scrollThreshold, 0, 1);
    
    // 实时更新背景图透明度
    HeaderBgImage.Opacity = opacity;
}

3. 平滑动画优化 #

如果需要更自然的渐隐效果，可结合Animation类替代直接赋值：

private void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
    const int scrollThreshold = 150;
    var targetOpacity = 1 - Math.Clamp(e.ScrollY / scrollThreshold, 0, 1);
    
    // 100ms内完成透明度过渡动画
    HeaderBgImage.Animate("FadeHeader", 
                          new Animation(v => HeaderBgImage.Opacity = v, HeaderBgImage.Opacity, targetOpacity), 
                          length: 100);
}

关键说明 #

• Shell的TitleView属于导航栏层级，会始终固定显示，无需额外处理固定逻辑
• 滚动阈值scrollThreshold可根据头部背景图的高度调整，控制渐隐过程的快慢

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