.NET MAUI自定义控件业务逻辑的放置位置及实现方法咨询

核心思路 #

把条码搜索的API调用逻辑封装在ItemBarcodeSearchView控件内部，通过可绑定属性对外暴露输入和输出数据，既实现逻辑复用，又保持控件的独立性。

1. 自定义控件XAML（ItemBarcodeSearchView.xaml） #

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.ItemBarcodeSearchView">
    <HorizontalLayout Padding="10" Spacing="5">
        <Entry x:Name="BarcodeEntry" 
               Placeholder="输入条码"
               Text="{Binding BarcodeText, Source={RelativeSource AncestorType={x:Type local:ItemBarcodeSearchView}}}"
               WidthRequest="200"/>
        <Button x:Name="SearchBtn" 
                Text="搜索"
                Clicked="SearchBtn_Clicked"/>
        <Label x:Name="DescLabel" 
               Text="{Binding ItemDescription, Source={RelativeSource AncestorType={x:Type local:ItemBarcodeSearchView}}}"
               HorizontalOptions="FillAndExpand"/>
    </HorizontalLayout>
</ContentView>

2. 自定义控件后台代码（ItemBarcodeSearchView.xaml.cs） #

通过可绑定属性实现数据交互，封装API调用逻辑并处理按钮点击事件：

using Microsoft.Maui.Controls;
using System.Net.Http.Json;

namespace YourNamespace;

public partial class ItemBarcodeSearchView : ContentView
{
    private readonly IBarcodeApiService _apiService;

    // 条码输入可绑定属性
    public static readonly BindableProperty BarcodeTextProperty =
        BindableProperty.Create(nameof(BarcodeText), typeof(string), typeof(ItemBarcodeSearchView), string.Empty);

    public string BarcodeText
    {
        get => (string)GetValue(BarcodeTextProperty);
        set => SetValue(BarcodeTextProperty, value);
    }

    // 商品描述可绑定属性
    public static readonly BindableProperty ItemDescriptionProperty =
        BindableProperty.Create(nameof(ItemDescription), typeof(string), typeof(ItemBarcodeSearchView), "未搜索");

    public string ItemDescription
    {
        get => (string)GetValue(ItemDescriptionProperty);
        set => SetValue(ItemDescriptionProperty, value);
    }

    // 构造函数注入API服务
    public ItemBarcodeSearchView(IBarcodeApiService apiService)
    {
        InitializeComponent();
        _apiService = apiService;
    }

    // 搜索按钮点击事件处理
    private async void SearchBtn_Clicked(object sender, EventArgs e)
    {
        if (string.IsNullOrWhiteSpace(BarcodeText))
        {
            ItemDescription = "请输入条码";
            return;
        }

        try
        {
            var itemDetail = await _apiService.GetItemDetailByBarcodeAsync(BarcodeText);
            ItemDescription = itemDetail?.Description ?? "未找到该条码信息";
        }
        catch (Exception ex)
        {
            ItemDescription = $"搜索失败: {ex.Message}";
        }
    }
}

// API服务接口（解耦控件与具体API实现）
public interface IBarcodeApiService
{
    Task<ItemDetail> GetItemDetailByBarcodeAsync(string barcode);
}

// API服务实现示例
public class BarcodeApiService : IBarcodeApiService
{
    private readonly HttpClient _httpClient;

    public BarcodeApiService(HttpClient httpClient)
    {
        _httpClient = httpClient;
        _httpClient.BaseAddress = new Uri("https://your-api-base-url.com/");
    }

    public async Task<ItemDetail> GetItemDetailByBarcodeAsync(string barcode)
    {
        return await _httpClient.GetFromJsonAsync<ItemDetail>($"api/items/barcode/{barcode}");
    }
}

// 商品详情模型
public class ItemDetail
{
    public string Barcode { get; set; }
    public string Description { get; set; }
    // 可添加其他业务属性
}

3. 注册依赖注入（Program.cs） #

在MAUI启动时完成服务注册，确保控件能获取到API服务实例：

builder.Services.AddHttpClient<IBarcodeApiService, BarcodeApiService>();
// 若需在XAML中直接引用控件，注册控件的构造注入
builder.Services.AddTransient<ItemBarcodeSearchView>();

4. 页面中使用自定义控件 #

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"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">
    <VerticalLayout Padding="20">
        <!-- 直接使用控件 -->
        <local:ItemBarcodeSearchView/>
        <!-- 绑定页面ViewModel属性，实现数据联动 -->
        <local:ItemBarcodeSearchView BarcodeText="{Binding CurrentBarcode}"
                                     ItemDescription="{Binding CurrentItemDesc}"/>
    </VerticalLayout>
</ContentPage>

代码后台方式

public partial class MainPage : ContentPage
{
    public MainPage(ItemBarcodeSearchView searchView)
    {
        InitializeComponent();
        Content = searchView;
    }
}

关键说明 #

• 逻辑复用：API调用、输入校验、异常处理全部封装在控件内部，页面使用时无需重复编写。
• 数据绑定：通过BindableProperty支持与页面ViewModel的双向绑定，适配不同业务场景。
• 解耦设计：用接口+依赖注入分离控件与API实现，方便后续替换API逻辑或编写单元测试。

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