.NET MAUI可滚动头部开发：上滚缩小固定并切换Logo为标题

Frame组件确实不太适配这种需要动态尺寸变化和内容切换的场景，推荐用Grid + ScrollView结合滚动事件监听来实现，下面是具体的落地方案：

核心实现思路 #

1. 用Grid划分页面布局：第一行作为动态头部容器，第二行放置ScrollView承载页面主体内容
2. 头部内同时嵌入Logo图片和标题文本，初始状态下隐藏标题
3. 监听ScrollView的Scrolled事件，根据滚动距离动态调整头部高度，切换Logo/标题的可见性，最终让头部固定在顶部

完整代码实现 #

XAML布局代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp.ScrollingHeaderPage"
             Title="动态头部演示">
    <Grid>
        <!-- 动态头部行定义 -->
        <Grid.RowDefinitions>
            <RowDefinition x:Name="HeaderRow" Height="50*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 头部内容容器 -->
        <Grid x:Name="HeaderContainer"
              BackgroundColor="#2196F3"
              VerticalOptions="Center">
            <Image x:Name="LogoImage"
                   Source="app_logo.png"
                   Aspect="AspectFit"
                   HorizontalOptions="Center"/>
            <Label x:Name="TitleLabel"
                   Text="我的应用"
                   FontSize="Large"
                   FontAttributes="Bold"
                   TextColor="White"
                   IsVisible="False"
                   HorizontalOptions="Center"/>
        </Grid>

        <!-- 滚动内容区域 -->
        <ScrollView x:Name="MainScrollView"
                    Grid.Row="1"
                    Scrolled="MainScrollView_Scrolled">
            <VerticalStackLayout Spacing="10" Padding="10">
                <!-- 以下为测试滚动内容，实际替换为你的业务内容 -->
                <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"/>
                <Label Text="滚动内容项 6" FontSize="Medium"/>
                <Label Text="滚动内容项 7" FontSize="Medium"/>
                <Label Text="滚动内容项 8" FontSize="Medium"/>
                <Label Text="滚动内容项 9" FontSize="Medium"/>
                <Label Text="滚动内容项 10" FontSize="Medium"/>
                <Label Text="滚动内容项 11" FontSize="Medium"/>
                <Label Text="滚动内容项 12" FontSize="Medium"/>
            </VerticalStackLayout>
        </ScrollView>
    </Grid>
</ContentPage>

后台逻辑代码 #

using Microsoft.Maui.Controls;

namespace MauiApp;

public partial class ScrollingHeaderPage : ContentPage
{
    private double _minHeaderHeight;
    private double _maxHeaderHeight;
    private double _scrollThreshold;

    public ScrollingHeaderPage()
    {
        InitializeComponent();
        SizeChanged += OnPageSizeChanged;
    }

    private void OnPageSizeChanged(object sender, EventArgs e)
    {
        var screenHeight = Application.Current?.MainPage?.Height ?? Height;
        _maxHeaderHeight = screenHeight * 0.5;
        _minHeaderHeight = _maxHeaderHeight * 0.2;
        HeaderRow.Height = new GridLength(_maxHeaderHeight);
        _scrollThreshold = _maxHeaderHeight - _minHeaderHeight;
    }

    private void MainScrollView_Scrolled(object sender, ScrolledEventArgs e)
    {
        var currentScrollY = e.ScrollY;
        var newHeaderHeight = _maxHeaderHeight - currentScrollY;

        if (newHeaderHeight <= _minHeaderHeight)
        {
            HeaderRow.Height = new GridLength(_minHeaderHeight);
            LogoImage.IsVisible = false;
            TitleLabel.IsVisible = true;
        }
        else if (newHeaderHeight >= _maxHeaderHeight)
        {
            HeaderRow.Height = new GridLength(_maxHeaderHeight);
            LogoImage.IsVisible = true;
            TitleLabel.IsVisible = false;
        }
        else
        {
            HeaderRow.Height = new GridLength(newHeaderHeight);
            LogoImage.IsVisible = true;
            TitleLabel.IsVisible = false;
        }
    }
}

关键细节说明 #

• 头部尺寸动态计算：通过SizeChanged事件获取屏幕高度，自动计算初始最大高度（屏幕50%）和最小高度（原尺寸20%）
• 滚动状态响应：在Scrolled事件中实时调整头部行高，当高度降到最小值时自动切换显示标题文本
• 布局稳定性：用Grid行定义控制头部高度，确保滚动过程中头部始终固定在顶部区域

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