北郊网站建设,西宁网络信息 网站建设,网站设计需要那些模块,wordpress生成pdfMasa Blazor是什么在此之前我们已经介绍过什么是Masa Blazor#xff0c;以及如何使用Masa Blazor#xff0c;如果还有不了解Masa Blazor的同学可以看我上篇文章【初识Masa Blazor】。那么今天就带大家探索一下如何在MAUI中使用Masa Blazor,那么我们先来了解一下什么是MAUI以及如何使用Masa Blazor如果还有不了解Masa Blazor的同学可以看我上篇文章【初识Masa Blazor】。那么今天就带大家探索一下如何在MAUI中使用Masa Blazor,那么我们先来了解一下什么是MAUIMAUI是什么.NET MAUI全称为 .NET Multi-platform App UI 顾名思义就是.NET多平台应用 UI是一个跨平台的框架是 Xamarin.Forms 的演变其使用C#和XAML创建本机移动和桌面应用这里的XAML可以替换成RazorView。使用 .NET MAUI可以开发可在 Android、iOS、macOS 和 Windows从单个共享代码库运行的应用一套代码多端运行。MAUI优点从 XAML 和 C# 中的单个共享代码库编写跨平台Visual Studio。跨平台共享 UI 布局和设计。跨平台共享代码、测试和业务逻辑。另一个优点是跨框架重用 Razor 组件它可以实现为 Razor 类库 (RCL) 并与 Blazor Server 和 WebAssembly 共享。这允许最大限度地重用代码并从单个代码库生成移动、桌面和 Web 解决方案。今天我们重点在实操就不介绍那么多概念性的东西了。想了解更多关于MAUI的同学可以移步官方文档介绍 什么是 .NET MAUI本篇文章会带大家使用MAUIMasa Blazor做一个移动端常见的时间轴页面并加一点切换主题色的小功能效果图如下接下来让我们一步步去实现它。首先我们先准备好必备的环境。注文章示例演示环境为Maui 6.0.200-preview.14.5 Masa.Blazor 0.3.0MAUI环境准备1. 首先要确保安装了最新版的 Visual Studio并且安装了Mobile development with .NET工作负载。2. 启用硬件加速才能最大化 Android 模拟器性能我们可以启用Hyper-V或HAXM加速这里只介绍第一种在 Windows 搜索框中输入“Windows 功能”然后在搜索结果中选择“打开或关闭 Windows 功能” 。在“Windows 功能”对话框中启用“Hyper-V”和“Windows 虚拟机监控程序平台” 进行这些更改后重新启动计算机。请确保 在 Android Device Manager 中创建 的虚拟设备是 x86 64 或基于 x86的系统映像。如果使用基于 Arm 的系统映像则不会加速虚拟设备并且运行速度会缓慢。启用 Hyper-v 后可以运行加速 Android 仿真器。HAXM加速和详细设置可参考如何使用 Android 仿真程序 启用硬件加速在 Windows 搜索框中输入“Windows 功能”然后在搜索结果中选择“打开或关闭 Windows 功能” 。在“Windows 功能”对话框中启用“Hyper-V”和“Windows 虚拟机监控程序平台” 创建MAUI应用并引入Masa Blazor创建项目选择.NET MAUI Blazor App。这样的话我们就能使用Blazor View来写UI界面了2. 在nuget中安装Masa.Blazor并在MauiProgram.cs文件中注册相关服务builder.Services.AddMasaBlazor();CreateMauiApp()方法简单理解在启动方法中调用了RegisterBlazorMauiWebView()构建器对象的扩展方法然后将 BlazorWebView 本身添加到具有该builder.Services属性的 DI 容器的 Services 集合中。这将执行依赖注入加载特定于平台的视图以呈现输出 HTML因为每个平台都有自己的 Web 引擎BlazorWebView从View继承控件它能够在运行时处理 Razor 组件并生成其等效的 HTML。该 HTML 将使用平台的本机 Web 引擎呈现而无需任何 Web 服务器的参与。3. wwwroot/index.html 中引入样式、字体、脚本link href_content/Masa.Blazor/css/masa-blazor.css relstylesheet
link href_content/Masa.Blazor/css/masa-extend-blazor.css relstylesheet
link hrefhttps://cdn.masastack.com/npm/mdi/font5.x/css/materialdesignicons.min.css relstylesheet
link hrefhttps://cdn.masastack.com/npm/materialicons/materialicons.css relstylesheet
link hrefhttps://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css relstylesheetscript src_content/BlazorComponent/js/blazor-component.js/script
script srchttps://cdn.masastack.com/npm/echarts/5.1.1/echarts.min.js/script!-- echarts脚本文件不需要可以不引入 --注意1.MAUI项目中需要在index.html中引入这些文件而不是像Blazor那样是在Pages/_Layout.cshtml中。2.从Masa Blazor0.3.0开始采用和微软相同的命名规范大驼峰MASA改成了Masa所以升级了0.3.0和之后的版本要注意别写错了不然会找不到样式文件和js文件4. 在_Imports.razor文件中引用Masa.BlazorBlazorComponent命名空间这样我们就不用每个文件都去引用一遍了时间轴功能实现我们先在布局页MainLayout.razor中搞出我们页面的大概布局顶部需要一个Toolbar工具条底部是底部导航中间是我们的子页面这样一种常规的布局页面点击工具条上面的菜单我们可以切换主题颜色我们来用Masa Blazor简单实现下。顶部工具条我们主要用到了MToolbar组件和MMenu组件底部因为BottomNavigation组件官网暂时暂时还没有后面版本才会出来影响不大我们先用MFooter组件代替。这样我们布局模板页已经搞好了全局的颜色我们通过变量存起来通过MMenu选中的值来进行控制Mainlayout.razor完整代码inherits LayoutComponentBaseMAppMToolbar MaxHeight64 Color_color DarkMAppBarNavIcon/MAppBarNavIconMSpacer/MSpacerTimelineMSpacer/MSpacerMMenu LeftOffsetYTransitionslide-x-transitionBottomActivatorContentMButton Icon attributescontext.AttrsMIconmdi-dots-vertical/MIcon/MButton/ActivatorContentChildContentMListforeach (var item in _colors){MListItem OnClick(){_color item.Value;}MListItemTitleitem.Text/MListItemTitle/MListItem}/MList/ChildContent/MMenu/MToolbardiv stylewidth:100%; height:100%CascadingValue Value_colorBody/CascadingValue/divMFooter Color#FAFAFA Elevation2MRow NoGutters JustifyJustifyTypes.SpaceBetweenMCol Styledisplay:flex; justify-content:center;MButton Color_color Icon Classmy-2 white--textMBadge OverLap Colorerror Content6ChildContentMIconmdi-chat/MIcon/ChildContent/MBadge/MButton/MColMCol Styledisplay:flex; justify-content:center;MButton Color_color Icon Classmy-2 white--textMIconmdi-account-details/MIcon/MButton/MColMCol Styledisplay:flex; justify-content:center;MButton Color_color Icon Classmy-2 white--textMIconmdi-compass/MIcon/MButton/MCol/MRow/MFooter/MAppcode{private string _color purple darken-3;private List(string Text, string Value) _colors new(){new(pink, purple darken-1),new(indigo, indigo),new(teal, teal),new(deep-purple, deep-purple darken-1),new(yellow, yellow darken-4),};
}接下来我们再来实现Body页面Body页面就是我们的主要内容了。这里我们可以去Masa Blazor官网找一下Timelines组件直接使用刚好官网有移动端Timeline的示例demo只是示例没有改变颜色的功能没关系我们拿过来改一改。我们把代码Copy过来去掉他顶部的工具条因为我们顶部已经在布局页面里写过了而且是应用在每个子页面的所以这里就不用再写了。但是这里要考虑怎么把_color参数传到Timeline页面里面这里我们用到了级联参数通过 CascadingValue 来把参数传递给子页面子页面通过CascadingParameter来接收这样我们在子页面里就可以拿到颜色变量了。Timeline.razor完整代码page /MCard Elevation0 Classmx-autoMCard DarkFlatMButton AbsoluteBottomColorColorRightFabMIconmdi-plus/MIcon/MButtonMImage Srchttps://cdn.masastack.com/stack/images/website/masa-blazor/cards/forest.jpgGradientto top, rgba(0,0,0,.44), rgba(0,0,0,.44) DarkMContainer Classfill-heightMRow AlignAlignTypes.Centerstrong classtext-h1 font-weight-regular mr-68/strongMRow JustifyJustifyTypes.Enddiv classtext-h5 font-weight-lightMonday/divdiv classtext-uppercase font-weight-lightFebruary 2015/div/MRow/MRow/MContainer/MImage/MCardMCardText Classpy-0MTimeline AlignTopDenseMTimelineItem ColorpinkSmallMRow Classpt-1MCol Cols3strong5pm/strong/MColMColstrongNew Icon/strongdiv classtext-captionMobile App/div/MCol/MRow/MTimelineItemMTimelineItem ColorColorSmallMRow Classpt-1MCol Cols3strong3-4pm/strong/MColMColstrongDesign Stand Up/strongdiv classtext-caption mb-2Hangouts/divMAvatarMImage Srchttps://avataaars.io/?avatarStyleCircletopTypeLongHairFridaaccessoriesTypeKurthairColorRedfacialHairTypeBeardLightfacialHairColorBrownDarkclotheTypeGraphicShirtclotheColorGray01graphicTypeSkulleyeTypeWinkeyebrowTypeRaisedExcitedNaturalmouthTypeDisbeliefskinColorBrown/MImage/MAvatarMAvatarMImage Srchttps://avataaars.io/?avatarStyleCircletopTypeShortHairFrizzleaccessoriesTypePrescription02hairColorBlackfacialHairTypeMoustacheMagnumfacialHairColorBrownDarkclotheTypeBlazerSweaterclotheColorBlackeyeTypeDefaulteyebrowTypeFlatNaturalmouthTypeDefaultskinColorTanned/MImage/MAvatarMAvatarMImage Srchttps://avataaars.io/?avatarStyleCircletopTypeLongHairMiaWallaceaccessoriesTypeSunglasseshairColorBlondeGoldenfacialHairTypeBlankclotheTypeBlazerSweatereyeTypeSurprisedeyebrowTypeRaisedExcitedmouthTypeSmileskinColorPale/MImage/MAvatar/MCol/MRow/MTimelineItemMTimelineItem ColorpinkSmallMRow Classpt-1MCol Cols3strong12pm/strong/MColMColstrongLunch break/strong/MCol/MRow/MTimelineItemMTimelineItem ColorColorSmallMRow Classpt-1MCol Cols3strong9-11am/strong/MColMColstrongFinish Home Screen/strongdiv classtext-captionWeb App/div/MCol/MRow/MTimelineItem/MTimeline/MCardText/MCardcode{[CascadingParameter]public string Color { get; set; }
}然后我们把这个页面想要随着主题色变动的颜色改成通过Color变量控制就好了。这样我们就完成了一个时间轴页面并且可以切换主题色这里我们还可以基于这个示例加一些功能比如点击这个号按钮去弹窗再去添加一个时间任务去渲染到页面上也是挺简单的就不做演示了。本篇文章主要介绍了在MAUI中如何使用Masa Blazor并做了一个小demo。抛砖引玉大家也可以尝试用MAUI Blazor去做一些应用体验一下。完整示例代码codding-y/Maui.MasaBlazor (github.com)开源地址MASA.BuildingBlockshttps://github.com/masastack/MASA.BuildingBlocksMASA.Contribhttps://github.com/masastack/MASA.ContribMASA.Utilshttps://github.com/masastack/MASA.UtilsMASA.EShophttps://github.com/masalabs/MASA.EShopMASA.Blazorhttps://github.com/BlazorComponent/MASA.Blazor如果你对我们的 MASA Framework 感兴趣无论是代码贡献、使用、提 Issue欢迎联系我们
