簡介

MAUI中使用Handler體系來處理不同平臺的原生控件實現(xiàn), 即對應(yīng)的, 如果我們想要創(chuàng)建控件, 只需要創(chuàng)建基于不同平臺的Handler即可。
那么下面主要教大家如何通過創(chuàng)建Handler(事件處理程序)來構(gòu)建自己的控件。

開始

下面, 將通過創(chuàng)建一個進(jìn)度條控件案例, 來演示如何在MAUI項目中創(chuàng)建平臺控件并且使用它。
假設(shè)控件包含基礎(chǔ)的三項功能, 進(jìn)度條顏色(Foreground)、進(jìn)度條當(dāng)前值(Value)、進(jìn)度條模式(Indeterminate)
1.第一步(聲明控件類)
首先, 創(chuàng)建MyProgressBar類, 定義對應(yīng)的依賴屬性

internal class MyProgressBar : View{public static readonly BindableProperty ForegroundProperty =BindableProperty.Create(nameof(Foreground),typeof(Color),typeof(MyProgressBar),Colors.Transparent);public static readonly BindableProperty ValueProperty =BindableProperty.Create(nameof(Value),typeof(double),typeof(MyProgressBar),0.0);public static readonly BindableProperty IndeterminateProperty =BindableProperty.Create(nameof(Indeterminate),typeof(bool),typeof(MyProgressBar),false);public Color Foreground{get { return (Color)GetValue(ForegroundProperty); }set { SetValue(ForegroundProperty, value); }}public double Value{get { return (double)GetValue(ValueProperty); }set { SetValue(ValueProperty, value); }}public bool Indeterminate{get { return (bool)GetValue(IndeterminateProperty); }set { SetValue(IndeterminateProperty, value); }}}

2.第二步(創(chuàng)建標(biāo)準(zhǔn)處理程序)
有了控件的標(biāo)準(zhǔn)屬性定義之后, 接下來就是定義標(biāo)準(zhǔn)的Handler處理程序, 其中包含控件屬性映射器及構(gòu)造函數(shù), 如下所示:

partial class MyProgressBarHandler{public static PropertyMapper<MyProgressBar, MyProgressBarHandler> HorizontalProgressBarMapper = new(ViewHandler.ViewMapper){[nameof(MyProgressBar.Value)] = MapValue,[nameof(MyProgressBar.Foreground)] = MapForeground, [nameof(MyProgressBar.Indeterminate)]= MapIndeterminate};public MyProgressBarHandler(PropertyMapper mapper): base(mapper){}public MyProgressBarHandler() : base(HorizontalProgressBarMapper){}}

3.第三步(創(chuàng)建平臺處理程序)
在屬性映射器中, 我們可以很輕松看見對應(yīng)了三個屬性的事件處理程序, 但是目前并沒有定義它, 這意味著你需要在不同平臺下分別實現(xiàn)對應(yīng)的
三個事件處理程序, 所以很快阿, 趕緊在Platforms > Android > Controls 下定義了一個MyProgressBarHandler, 如下所示:

接著繼承于ViewHandler并且與原生安卓ProgressBar關(guān)聯(lián)。

using Android.Widget;partial class MyProgressBarHandler :ViewHandler<MyProgressBar, ProgressBar>{ }

重寫CreateNativeView(這是創(chuàng)建本地控件最開始的地方)

protected override ProgressBar CreateNativeView(){return new ProgressBar(Context, null, Android.Resource.Attribute.ProgressBarStyleHorizontal){Indeterminate = true,Max = 10000,}; }

緊接著, 實現(xiàn)三個事件處理程序方法, MapValue、MapForeground、MapIndeterminate

static void MapValue(MyProgressBarHandler handler, MyProgressBar view){var nativeView= handler?.NativeView;nativeView.Progress = (int)(view.Value * Max);}static void MapForeground(MyProgressBarHandler handler, MyProgressBar view){UpdateForeground(handler?.NativeView, view.Foreground);static void UpdateForeground(ProgressBar nativeProgressBar, Color color){if (color == null){(nativeProgressBar.Indeterminate ? nativeProgressBar.IndeterminateDrawable :nativeProgressBar.ProgressDrawable)?.ClearColorFilter();}else{var tintList = ColorStateList.ValueOf(color.ToNative());if (nativeProgressBar.Indeterminate)nativeProgressBar.IndeterminateTintList = tintList;elsenativeProgressBar.ProgressTintList = tintList;}}}static void MapIndeterminate(MyProgressBarHandler handler, MyProgressBar view){var nativeView= handler?.NativeView;nativeView.Indeterminate = view.Indeterminate;}

4. 對應(yīng)的實現(xiàn)iOS平臺的Handler事件處理程序, 與上步驟相同, 對于事件的處理細(xì)節(jié)則對應(yīng)不同平臺的邏輯處理。

partial class MyProgressBarHandler :ViewHandler<MyProgressBar, UIProgressView>{protected override UIProgressView CreateNativeView() {return new UIProgressView(UIProgressViewStyle.Default);}static void MapValue(MyProgressBarHandler handler, MyProgressBar view) {var nativeView = handler.NativeView;nativeView.Progress = (float)view.Value;}static void MapForeground(MyProgressBarHandler handler, MyProgressBar view) {var nativeView = handler.NativeView;nativeView.ProgressTintColor = view.Foreground?.ToNative();} static void MapIndeterminate(MyProgressBarHandler handler, MyProgressBar view) {//...}}

5.打開MauiProgram文件, 添加AddHandler

public static MauiApp CreateMauiApp(){var builder = MauiApp.CreateBuilder();builder.UseMauiApp<App>().ConfigureFonts(fonts =>{fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");}).ConfigureMauiHandlers(handler =>{handler.AddHandler(typeof(MyProgressBar), typeof(MyProgressBarHandler));}); return builder.Build();}

6.界面中,分別聲明MAUI原生控件與自定義控件

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="MAUIRender.MainPage"xmlns:my="clr-namespace:MAUIRender" xmlns:ctor="clr-namespace:MAUIRender.Controls" BackgroundColor="{DynamicResource SecondaryColor}"><Grid><StackLayout><ProgressBar Progress="30" ProgressColor="Red"/><ctor:MyProgressBar Indeterminate="True"Value="600" Foreground="Green" /></StackLayout></Grid> </ContentPage>

運行實際效果:

總結(jié)

通過利用Handler來處理不同平臺控件的行為, 與控件本身解耦并且更加容器支持更多的平臺。

總結(jié)

以上是生活随笔為你收集整理的MAUI中构建跨平台原生控件实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。