MAUI中实现构建跨平台原生控件
简介
MAUI中使用Handler体系来处理不同平台的原生控件实现, 即对应的, 如果我们想要创建控件, 只需要创建基于不同平台的Handler即可。
那么下面主要教大家如何通过创建Handler(事件处理程序)来构建自己的控件。
开始
下面, 将通过创建一个进度条控件案例, 来演示如何在MAUI项目中创建平台控件并且使用它。
假设控件包含基础的三项功能, 进度条颜色(Foreground)、进度条当前值(Value)、进度条模式(Indeterminate)
1.第一步(声明控件类)
首先, 创建MyProgressBar类, 定义对应的依赖属性
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.第二步(创建标准处理程序)
有了控件的标准属性定义之后, 接下来就是定义标准的Handler处理程序, 其中包含控件属性映射器及构造函数, 如下所示:
partial class MyProgressBarHandler{public static PropertyMapperHorizontalProgressBarMapper = 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.第三步(创建平台处理程序)
在属性映射器中, 我们可以很轻松看见对应了三个属性的事件处理程序, 但是目前并没有定义它, 这意味着你需要在不同平台下分别实现对应的
三个事件处理程序, 所以很快阿, 赶紧在Platforms > Android > Controls 下定义了一个MyProgressBarHandler, 如下所示:
文章图片
接着继承于ViewHandler并且与原生安卓ProgressBar关联。
using Android.Widget; partial class MyProgressBarHandler :ViewHandler{ }
重写CreateNativeView(这是创建本地控件最开始的地方)
protected override ProgressBar CreateNativeView(){return new ProgressBar(Context, null,Android.Resource.Attribute.ProgressBarStyleHorizontal){Indeterminate = true,Max = 10000,}; }
紧接着, 实现三个事件处理程序方法, 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. 对应的实现iOS平台的Handler事件处理程序, 与上步骤相同, 对于事件的处理细节则对应不同平台的逻辑处理。
partial class MyProgressBarHandler :ViewHandler{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().ConfigureFonts(fonts =>{fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); }).ConfigureMauiHandlers(handler =>{handler.AddHandler(typeof(MyProgressBar), typeof(MyProgressBarHandler)); }); return builder.Build(); }
6.界面中,分别声明MAUI原生控件与自定义控件
【MAUI中实现构建跨平台原生控件】
运行实际效果:
文章图片
总结 通过利用Handler来处理不同平台控件的行为, 与控件本身解耦并且更加容器支持更多的平台。
到此这篇关于MAUI中实现构建跨平台原生控件的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- ASP.NET中Web|ASP.NET中Web API解决跨域问题
- ASP.NET|ASP.NET CORE实现跨域
- C++中类的转换函数你了解吗
- C++设计模式中的观察者模式一起来看看
- 代付|微信公众号如何实现支付功能()
- python|Python+Celery实现基于Fastnetmon异常流量清洗
- 杂记|免费的编程中文书籍索引
- C/C++系列|C++中将字符(串)转化成数字,将数字转化成字符(串)
- JavaScript|JavaScript实现“双11”秒杀,你也可以
- 游戏|超级玛丽的 python 实现