.NET MAUI中如何创建可复用组件实现通用代码复用？

以下是几种适配你需求的通用代码复用方式，覆盖导航栏、通用UI片段、业务逻辑等场景：

1. 自定义 ContentView（最接近React/Angular组件的方式） #

这是.NET MAUI中实现可复用UI组件的核心方式，和React函数组件、Angular组件思路一致——将独立UI片段（比如导航栏）封装成可复用单元，支持传入参数和绑定事件。

示例：封装自定义导航栏 #

1. 创建CustomNavBar.xaml：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Components.CustomNavBar">
    <Grid HeightRequest="60" BackgroundColor="#2563EB">
        <Label Text="{Binding Title}" 
               TextColor="White" 
               FontSize="18"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
        <Button Text="<" 
                TextColor="White"
                BackgroundColor="Transparent"
                Command="{Binding BackCommand}"
                HorizontalOptions="Start"
                VerticalOptions="Center"/>
        <!-- 可扩展其他按钮/元素 -->
    </Grid>
</ContentView>

2. 在CustomNavBar.xaml.cs中定义可绑定属性，实现组件灵活性：

public partial class CustomNavBar : ContentView
{
    // 标题绑定属性
    public static readonly BindableProperty TitleProperty =
        BindableProperty.Create(nameof(Title), typeof(string), typeof(CustomNavBar), string.Empty);

    // 返回命令绑定属性
    public static readonly BindableProperty BackCommandProperty =
        BindableProperty.Create(nameof(BackCommand), typeof(ICommand), typeof(CustomNavBar));

    public string Title
    {
        get => (string)GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }

    public ICommand BackCommand
    {
        get => (ICommand)GetValue(BackCommandProperty);
        set => SetValue(BackCommandProperty, value);
    }

    public CustomNavBar()
    {
        InitializeComponent();
    }
}

3. 在任意页面中复用：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:components="clr-namespace:YourApp.Components"
             x:Class="YourApp.Pages.HomePage">
    <VerticalStackLayout>
        <!-- 复用自定义导航栏，传入标题和返回命令 -->
        <components:CustomNavBar Title="首页" BackCommand="{Binding GoBackCommand}"/>
        <!-- 页面其他内容 -->
        <Label Text="页面内容" VerticalOptions="Center" HorizontalOptions="Center"/>
    </VerticalStackLayout>
</ContentPage>

2. 页面基类（复用页面级逻辑和布局） #

如果多个页面有相同布局结构（比如顶部导航栏+主体内容区），可以创建抽象基类页面，将通用部分放在基类中，子类页面仅实现主体内容。

示例：创建带导航栏的基类页面 #

1. 创建BasePage.xaml：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:components="clr-namespace:YourApp.Components"
             x:Class="YourApp.Pages.BasePage">
    <VerticalStackLayout>
        <!-- 通用导航栏 -->
        <components:CustomNavBar Title="{Binding PageTitle}" BackCommand="{Binding BackCommand}"/>
        <!-- 占位内容区，子类页面替换此处 -->
        <ContentView x:Name="MainContentArea" VerticalOptions="FillAndExpand"/>
    </VerticalStackLayout>
</ContentPage>

2. BasePage.xaml.cs中提供设置内容的方法和通用逻辑：

public abstract partial class BasePage : ContentPage
{
    public string PageTitle { get; set; }
    public ICommand BackCommand { get; set; }

    protected BasePage()
    {
        InitializeComponent();
        BackCommand = new Command(OnBackClicked);
        BindingContext = this;
    }

    // 子类调用此方法设置页面主体内容
    protected void SetMainView(View view)
    {
        MainContentArea.Content = view;
    }

    private void OnBackClicked()
    {
        Navigation.PopAsync();
    }
}

3. 子类页面继承基类：

public partial class HomePage : BasePage
{
    public HomePage()
    {
        PageTitle = "首页";
        // 设置页面主体内容
        SetMainView(new Label { Text = "首页内容", HorizontalOptions = LayoutOptions.Center });
    }
}

3. 模板化控件（动态内容的复用组件） #

如果需要组件支持动态插入内容（类似React的children或Angular的<ng-content>），可以使用模板化控件，让组件部分区域由调用方自定义。

示例：带自定义内容的通用卡片组件 #

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Components.CardView">
    <ContentView.ContentTemplate>
        <DataTemplate>
            <Frame CornerRadius="8" Padding="16" BackgroundColor="White" Margin="10">
                <!-- 调用方自定义内容将插入此处 -->
                <ContentPresenter Content="{Binding Content}"/>
            </Frame>
        </DataTemplate>
    </ContentView.ContentTemplate>
</ContentView>

使用时传入自定义内容：

<components:CardView>
    <VerticalStackLayout>
        <Label Text="卡片标题" FontSize="16" FontAttributes="Bold"/>
        <Label Text="卡片内容，可自由定制"/>
    </VerticalStackLayout>
</components:CardView>

4. 资源字典（复用样式、模板） #

对于通用样式、数据模板、控件模板，可以放在全局资源字典中，在整个应用中复用，避免重复定义。

示例：全局按钮样式 #

在Resources/Styles/Styles.xaml中添加：

<Style TargetType="Button" x:Key="PrimaryButton">
    <Setter Property="BackgroundColor" Value="#2563EB"/>
    <Setter Property="TextColor" Value="White"/>
    <Setter Property="CornerRadius" Value="8"/>
    <Setter Property="Padding" Value="12,8"/>
</Style>

在任意页面中使用：

<Button Text="确认" Style="{StaticResource PrimaryButton}"/>

5. 行为（Behaviors）（复用交互逻辑） #

如果需要复用控件的交互逻辑（比如输入框格式验证、按钮防抖），可以封装成行为，附加到任意控件上，无需修改控件本身。

示例：输入框数字验证行为 #

public class NumericValidationBehavior : Behavior<Entry>
{
    protected override void OnAttachedTo(Entry entry)
    {
        entry.TextChanged += OnEntryTextChanged;
        base.OnAttachedTo(entry);
    }

    protected override void OnDetachingFrom(Entry entry)
    {
        entry.TextChanged -= OnEntryTextChanged;
        base.OnDetachingFrom(entry);
    }

    private void OnEntryTextChanged(object sender, TextChangedEventArgs e)
    {
        if (!double.TryParse(e.NewTextValue, out _))
        {
            ((Entry)sender).Text = e.OldTextValue;
        }
    }
}

使用时附加到输入框：

<Entry Placeholder="请输入数字">
    <Entry.Behaviors>
        <behaviors:NumericValidationBehavior/>
    </Entry.Behaviors>
</Entry>

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