.NET MAUI应用启动可滑动信息屏实现方案及最佳实践问询

实现方式合理性分析 #

• ContentView：可行，但更适合作为组件嵌入现有页面，而非承载独立的引导流程。
• Popup：不推荐，Popup设计初衷是临时交互弹窗，引导屏作为首次启动的核心流程，会受限于其布局层级和交互能力。
• 推荐方案：使用独立Page + CarouselView，CarouselView是.NET MAUI官方提供的滑动容器控件，原生支持多屏滑动、指示器、手势处理，适配全平台，是这类场景的最优选择。

核心最佳实践 #

• 用Preferences存储首次启动标记，避免重复显示引导屏。
• 基于CarouselView构建多屏滑动内容，无需自定义手势逻辑。
• 最后一页添加明确的“进入应用”入口，完成引导后跳转主界面并更新标记。
• 适配不同设备屏幕，确保引导内容在手机/平板上都能正常显示。

代码示例 #

1. 引导页数据模型（OnboardingItem.cs） #

public class OnboardingItem
{
    public string Title { get; set; }
    public string Description { get; set; }
    public string IconSource { get; set; }
}

2. 引导屏页面（OnboardingPage.xaml） #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.Views.OnboardingPage"
             BackgroundColor="#FFFFFF">

    <Grid>
        <!-- 滑动容器 -->
        <CarouselView x:Name="OnboardingCarousel"
                      IndicatorView="OnboardingIndicator"
                      IsScrollAnimated="True">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <VerticalStackLayout Padding="30"
                                         Spacing="20"
                                         HorizontalOptions="Center"
                                         VerticalOptions="Center">
                        <!-- 图标 -->
                        <Image Source="{Binding IconSource}"
                               WidthRequest="120"
                               HeightRequest="120"
                               HorizontalOptions="Center"/>
                        <!-- 标题 -->
                        <Label Text="{Binding Title}"
                               FontSize="28"
                               FontAttributes="Bold"
                               HorizontalOptions="Center"
                               TextColor="#2D3748"/>
                        <!-- 描述 -->
                        <Label Text="{Binding Description}"
                               FontSize="16"
                               HorizontalOptions="Center"
                               HorizontalTextAlignment="Center"
                               TextColor="#4A5568"/>
                    </VerticalStackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

        <!-- 滑动指示器 -->
        <IndicatorView x:Name="OnboardingIndicator"
                       HorizontalOptions="Center"
                       VerticalOptions="End"
                       Margin="0,0,0,40"
                       IndicatorColor="#CBD5E0"
                       SelectedIndicatorColor="#3182CE"/>

        <!-- 进入应用按钮（仅最后一页显示） -->
        <Button x:Name="EnterAppBtn"
                Text="进入应用"
                BackgroundColor="#3182CE"
                TextColor="White"
                CornerRadius="8"
                Padding="20,12"
                HorizontalOptions="Center"
                VerticalOptions="End"
                Margin="0,0,0,100"
                IsVisible="False"
                Clicked="EnterAppBtn_Clicked"/>
    </Grid>
</ContentPage>

3. 引导屏页面代码后台（OnboardingPage.xaml.cs） #

using Microsoft.Maui.Controls;
using System.Collections.Generic;

namespace YourAppName.Views;

public partial class OnboardingPage : ContentPage
{
    public OnboardingPage()
    {
        InitializeComponent();
        LoadOnboardingData();
        OnboardingCarousel.CurrentItemChanged += OnboardingCarousel_CurrentItemChanged;
    }

    private void LoadOnboardingData()
    {
        var items = new List<OnboardingItem>
        {
            new OnboardingItem
            {
                Title = "欢迎使用",
                Description = "这是一款功能强大的移动应用，帮你高效完成日常任务。",
                IconSource = "welcome_icon.png" // 替换为你的图标资源
            },
            new OnboardingItem
            {
                Title = "核心功能",
                Description = "支持任务管理、数据统计、云端同步等多种实用功能。",
                IconSource = "features_icon.png"
            },
            new OnboardingItem
            {
                Title = "开始体验",
                Description = "点击下方按钮，开启你的应用之旅吧！",
                IconSource = "get_started_icon.png"
            }
        };

        OnboardingCarousel.ItemsSource = items;
    }

    private void OnboardingCarousel_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
    {
        var currentItem = e.CurrentItem as OnboardingItem;
        var items = OnboardingCarousel.ItemsSource as List<OnboardingItem>;
        // 判断是否是最后一页，显示按钮
        EnterAppBtn.IsVisible = currentItem == items?.LastOrDefault();
    }

    private async void EnterAppBtn_Clicked(object sender, EventArgs e)
    {
        // 标记引导已完成
        Preferences.Set("HasCompletedOnboarding", true);
        // 跳转到主界面
        await Navigation.PushAsync(new MainPage());
        // 移除引导页，避免返回
        Navigation.RemovePage(this);
    }
}

4. 启动逻辑处理（App.xaml.cs） #

using Microsoft.Maui.Controls;
using YourAppName.Views;

namespace YourAppName;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        // 判断是否已完成引导
        bool hasCompletedOnboarding = Preferences.Get("HasCompletedOnboarding", false);

        if (hasCompletedOnboarding)
        {
            MainPage = new NavigationPage(new MainPage());
        }
        else
        {
            MainPage = new NavigationPage(new OnboardingPage());
        }
    }
}

注意事项 #

• 确保图标资源已添加到项目的资源目录，并设置正确的生成操作（如MauiImage）。
• 可根据需求自定义CarouselView的动画、指示器样式，添加跳过按钮等额外交互。
• 若需要重置引导状态，可在设置页添加清除HasCompletedOnboarding标记的功能。

内容的提问来源于stack exchange，提问作者Alpay Çalışır