.NET MAUI：如何实现带可自定义页脚的可复用页面？

完全可以通过ControlTemplate结合自定义基页的方式实现你的所有需求，以下是分步实现方案：

1. 优化全局ControlTemplate（支持页脚隐藏+自定义按钮属性） #

修改App.xaml中的模板，加入绑定支持，同时设置默认值：

<Application ...>
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        ...
      </ResourceDictionary.MergedDictionaries>

      <ControlTemplate x:Key="ContentFooter">
        <Grid RowDefinitions="*,Auto">
          <!-- 页面内容区域 -->
          <ScrollView Grid.Row="0">
            <ContentPresenter/>
          </ScrollView>
          <!-- 页脚区域，绑定可见性，默认显示 -->
          <Grid Grid.Row="1" IsVisible="{TemplateBinding IsFooterVisible, FallbackValue=True}">
            <Button Margin="8,4" 
                    <!-- 绑定按钮文本，默认"Close" -->
                    Text="{TemplateBinding FooterButtonText, FallbackValue='Close'}"
                    <!-- 绑定按钮样式，默认使用ButtonConfirm -->
                    Style="{TemplateBinding FooterButtonStyle, FallbackValue={StaticResource ButtonConfirm}}"
                    <!-- 绑定按钮命令，默认执行关闭页面逻辑 -->
                    Command="{TemplateBinding FooterButtonCommand}"/>
          </Grid>
        </Grid>
      </ControlTemplate>
    </ResourceDictionary>
  </Application.Resources>
</Application>

2. 创建自定义基页（封装复用属性） #

新建FooterContentPage.cs作为所有带页脚页面的基类，定义依赖属性实现自定义能力：

using Microsoft.Maui.Controls;

namespace YourAppNamespace
{
    public class FooterContentPage : ContentPage
    {
        // 页脚可见性属性
        public static readonly BindableProperty IsFooterVisibleProperty =
            BindableProperty.Create(nameof(IsFooterVisible), typeof(bool), typeof(FooterContentPage), true);

        public bool IsFooterVisible
        {
            get => (bool)GetValue(IsFooterVisibleProperty);
            set => SetValue(IsFooterVisibleProperty, value);
        }

        // 按钮文本属性
        public static readonly BindableProperty FooterButtonTextProperty =
            BindableProperty.Create(nameof(FooterButtonText), typeof(string), typeof(FooterContentPage), "Close");

        public string FooterButtonText
        {
            get => (string)GetValue(FooterButtonTextProperty);
            set => SetValue(FooterButtonTextProperty, value);
        }

        // 按钮样式属性
        public static readonly BindableProperty FooterButtonStyleProperty =
            BindableProperty.Create(nameof(FooterButtonStyle), typeof(Style), typeof(FooterContentPage));

        public Style FooterButtonStyle
        {
            get => (Style)GetValue(FooterButtonStyleProperty);
            set => SetValue(FooterButtonStyleProperty, value);
        }

        // 按钮命令属性
        public static readonly BindableProperty FooterButtonCommandProperty =
            BindableProperty.Create(nameof(FooterButtonCommand), typeof(ICommand), typeof(FooterContentPage), null);

        public ICommand FooterButtonCommand
        {
            get => (ICommand)GetValue(FooterButtonCommandProperty);
            set => SetValue(FooterButtonCommandProperty, value);
        }

        public FooterContentPage()
        {
            ControlTemplate = (ControlTemplate)Application.Current.Resources["ContentFooter"];
            // 设置默认命令：关闭当前页面
            FooterButtonCommand = new Command(async () => await Navigation.PopAsync());
        }
    }
}

3. 页面实现（加载逻辑+内容展示） #

优化加载UI：用Grid重叠布局替代StackLayout #

StackLayout会让加载布局和主内容上下排列，占用额外空间，用Grid让两者重叠，切换更流畅：

<local:FooterContentPage xmlns:local="clr-namespace:YourAppNamespace" ...>
  <Grid>
    <!-- 加载布局，默认显示 -->
    <VerticalStackLayout x:Name="LayoutLoading" VerticalOptions="CenterAndExpand" Spacing="16">
      <ActivityIndicator IsRunning="True" HorizontalOptions="Center"/>
      <Label Text="Loading data. Please wait." HorizontalOptions="Center"/>
    </VerticalStackLayout>
    
    <!-- 主内容布局，默认隐藏 -->
    <VerticalStackLayout x:Name="LayoutMain" IsVisible="False">
      <!-- 你的页面内容 -->
    </VerticalStackLayout>
  </Grid>
</local:FooterContentPage>

后台逻辑控制页脚和布局显示 #

using Microsoft.Maui.Controls;

namespace YourAppNamespace
{
    public partial class YourPage : FooterContentPage
    {
        public YourPage()
        {
            InitializeComponent();
            _ = LoadDataAsync();
        }

        private async Task LoadDataAsync()
        {
            // 加载开始：隐藏页脚，显示加载UI
            IsFooterVisible = false;
            LayoutLoading.IsVisible = true;
            LayoutMain.IsVisible = false;

            // 模拟数据加载（替换为实际业务逻辑）
            await Task.Delay(2000);

            // 加载完成：显示页脚和主内容
            IsFooterVisible = true;
            LayoutLoading.IsVisible = false;
            LayoutMain.IsVisible = true;
        }
    }
}

4. 自定义按钮属性示例 #

如果需要在特定页面修改按钮行为，直接在XAML或后台覆盖属性即可：

自定义按钮文本和样式 #

<local:FooterContentPage ...
                         FooterButtonText="返回"
                         FooterButtonStyle="{StaticResource CustomButtonStyle}">
  <!-- 页面内容 -->
</local:FooterContentPage>

自定义按钮命令 #

public YourCustomPage()
{
    InitializeComponent();
    FooterButtonCommand = new Command(async () => 
    {
        // 自定义逻辑：比如确认后关闭
        var confirm = await DisplayAlert("确认", "确定要关闭吗？", "是", "否");
        if (confirm) await Navigation.PopAsync();
    });
}

加载UI优化建议 #

1. 使用ActivityIndicator配合文本，比纯文本更直观地提示加载状态
2. 用Grid重叠布局替代StackLayout，减少不必要的布局计算，提升性能
3. 可以添加加载失败重试按钮，增强用户体验

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