Masa Blazor是什么

在此之前咱们曾经介绍过什么是Masa Blazor，以及如何应用Masa Balzor，如果还有不理解Masa Blazor的同学能够看我上篇文章【初识Masa Blazor】。那么明天就带大家摸索一下如何在MAUI中应用Masa Blazor,那么咱们先来理解一下什么是MAUI？

MAUI是什么

.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？，本篇文章会带大家应用MAUI+Masa Blazor做一个挪动端常见的时间轴页面，并加一点切换主题色的小性能，效果图如下：

接下来让咱们一步步去实现它。首先咱们先筹备好必备的环境。

<font color=Red>注：文章示例演示环境为（Maui 6.0.200-preview.14.5 + Masa.Blazor 0.3.0）</font>

MAUI环境筹备

  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 仿真程序 & 启用硬件加速

创立MAUI利用并引入Masa Blazor

  1. 创立项目选择.NET MAUI Blazor App。这样的话咱们就能应用Blazor View来写UI界面了<img src="https://s3.bmp.ovh/imgs/2022/04/11/b54c4c0564871e47.jpg" style="zoom:70%;" />

  2. 在nuget中装置Masa.Blazor，并在MauiProgram.cs文件中注册相干服务<img src="https://s2.loli.net/2022/03/29/wA95jPb3yFuiKCX.png" alt="image-20220328145955206.png" style="zoom:70%;" />

    <img src="https://s2.loli.net/2022/03/29/gocbyWnVmCvktKQ.png" alt="image-20220328152448798" style="zoom: 70%;" />

    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" rel="stylesheet"><link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet"><link href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet"><link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet"><script src="_content/BlazorComponent/js/blazor-component.js"></script><script src="https://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.Blazor，BlazorComponent命名空间，这样咱们就不必每个文件都去援用一遍了

时间轴性能实现

咱们先在布局页MainLayout.razor中搞出咱们页面的大略布局，顶部须要一个Toolbar工具条，底部是底部导航，两头是咱们的子页面

这样一种惯例的布局页面，点击工具条下面的菜单咱们能够切换主题色彩，咱们来用Masa Blazor简略实现下。

顶部工具条咱们次要用到了MToolbar组件和MMenu组件，底部因为BottomNavigation组件官网临时临时还没有，前面版本才会进去，影响不大，咱们先用MFooter组件代替。这样咱们布局模板页曾经搞好了，全局的色彩咱们通过变量存起来，通过MMenu选中的值来进行管制

Mainlayout.razor残缺代码：

@inherits LayoutComponentBase<MApp>    <MToolbar MaxHeight="64" Color="@_color" Dark>        <MAppBarNavIcon></MAppBarNavIcon>        <MSpacer></MSpacer>        Timeline        <MSpacer></MSpacer>        <MMenu Left               OffsetY               Transition="slide-x-transition"               Bottom>            <ActivatorContent>                <MButton Icon @attributes="@context.Attrs">                    <MIcon>mdi-dots-vertical</MIcon>                </MButton>            </ActivatorContent>            <ChildContent>                <MList>                    @foreach (var item in _colors)                    {                        <MListItem OnClick="()=>{_color = item.Value;}">                            <MListItemTitle>@item.Text</MListItemTitle>                        </MListItem>                    }                </MList>            </ChildContent>        </MMenu>    </MToolbar>    <div style="width:100%; height:100%">        <CascadingValue Value="_color">            @Body        </CascadingValue>    </div>        <MFooter Color="#FAFAFA" Elevation="2">        <MRow NoGutters Justify="JustifyTypes.SpaceBetween">            <MCol Style="display:flex; justify-content:center;">                <MButton Color="@_color" Icon Class="my-2 white--text">                    <MBadge OverLap Color="error" Content="6">                        <ChildContent>                            <MIcon>mdi-chat</MIcon>                        </ChildContent>                    </MBadge>                </MButton>            </MCol>            <MCol Style="display:flex; justify-content:center;">                <MButton Color="@_color" Icon Class="my-2 white--text">                    <MIcon>mdi-account-details</MIcon>                </MButton>            </MCol>            <MCol Style="display:flex; justify-content:center;">                <MButton Color="@_color" Icon Class="my-2 white--text">                    <MIcon>mdi-compass</MIcon>                </MButton>            </MCol>        </MRow>    </MFooter></MApp>@code{        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 Elevation="0" Class="mx-auto">    <MCard Dark           Flat>        <MButton Absolute                 Bottom                 Color="@Color"                 Right                 Fab>            <MIcon>mdi-plus</MIcon>        </MButton>        <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/forest.jpg"                Gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)" Dark>            <MContainer Class="fill-height">                <MRow Align="@AlignTypes.Center">                    <strong class="text-h1 font-weight-regular mr-6">8</strong>                    <MRow Justify="@JustifyTypes.End">                        <div class="text-h5 font-weight-light">                            Monday                        </div>                        <div class="text-uppercase font-weight-light">                            February 2015                        </div>                    </MRow>                </MRow>            </MContainer>        </MImage>    </MCard>    <MCardText Class="py-0">        <MTimeline AlignTop                   Dense>            <MTimelineItem Color="pink"                           Small>                <MRow Class="pt-1">                    <MCol Cols="3">                        <strong>5pm</strong>                    </MCol>                    <MCol>                        <strong>New Icon</strong>                        <div class="text-caption">                            Mobile App                        </div>                    </MCol>                </MRow>            </MTimelineItem>            <MTimelineItem Color="@Color"                           Small>                <MRow Class="pt-1">                    <MCol Cols="3">                        <strong>3-4pm</strong>                    </MCol>                    <MCol>                        <strong>Design Stand Up</strong>                        <div class="text-caption mb-2">                            Hangouts                        </div>                        <MAvatar>                            <MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFrida&accessoriesType=Kurt&hairColor=Red&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=GraphicShirt&clotheColor=Gray01&graphicType=Skull&eyeType=Wink&eyebrowType=RaisedExcitedNatural&mouthType=Disbelief&skinColor=Brown"></MImage>                        </MAvatar>                        <MAvatar>                            <MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairFrizzle&accessoriesType=Prescription02&hairColor=Black&facialHairType=MoustacheMagnum&facialHairColor=BrownDark&clotheType=BlazerSweater&clotheColor=Black&eyeType=Default&eyebrowType=FlatNatural&mouthType=Default&skinColor=Tanned"></MImage>                        </MAvatar>                        <MAvatar>                            <MImage Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Sunglasses&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerSweater&eyeType=Surprised&eyebrowType=RaisedExcited&mouthType=Smile&skinColor=Pale"></MImage>                        </MAvatar>                    </MCol>                </MRow>            </MTimelineItem>                <MTimelineItem Color="pink"                           Small>                <MRow Class="pt-1">                    <MCol Cols="3">                        <strong>12pm</strong>                    </MCol>                    <MCol>                        <strong>Lunch break</strong>                    </MCol>                </MRow>            </MTimelineItem>                <MTimelineItem Color="@Color"                           Small>                <MRow Class="pt-1">                    <MCol Cols="3">                        <strong>9-11am</strong>                    </MCol>                    <MCol>                        <strong>Finish Home Screen</strong>                        <div class="text-caption">                            Web App                        </div>                    </MCol>                </MRow>            </MTimelineItem>        </MTimeline>    </MCardText></MCard>@code{        [CascadingParameter]        public string Color { get; set; }}

而后咱们把这个页面想要随着主题色变动的色彩改成通过Color变量管制就好了。

这样咱们就实现了一个时间轴页面并且能够切换主题色，这里咱们还能够基于这个示例加一些性能，比方点击这个＋号按钮去弹窗再去增加一个工夫工作去渲染到页面上，也是挺简略的，就不做演示了。本篇文章次要介绍了在MAUI中如何应用Masa Blazor，并做了一个小demo。抛砖引玉，大家也能够尝试用MAUI + Blazor去做一些利用体验一下。

残缺示例代码：codding-y/Maui.MasaBlazor (github.com)

开源地址

MASA.BuildingBlocks：https://github.com/masastack/...

MASA.Contrib：https://github.com/masastack/...

MASA.Utils：https://github.com/masastack/...

MASA.EShop：https://github.com/masalabs/M...

MASA.Blazor：https://github.com/BlazorComp...

如果你对咱们的 MASA Framework 感兴趣，无论是代码奉献、应用、提 Issue，欢送分割咱们