关于后端:在MAUI中使用Masa-Blazor

8次阅读

共计 7746 个字符，预计需要花费 20 分钟才能阅读完成。

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

首先要确保装置了最新版的 Visual Studio，并且装置了 Mobile development with .NET 工作负载。
启用硬件加速能力最大化 Android 模拟器性能，咱们能够启用 Hyper- V 或 HAXM 减速，这里只介绍第一种
- 在 Windows 搜寻框中输出“Windows 性能”，而后在搜寻后果中抉择“关上或敞开 Windows 性能”。在“Windows 性能”对话框中，启用“Hyper-V”和“Windows 虚拟机监控程序平台”：
进行这些更改后，重新启动计算机。

请确保在 Android Device Manager 中创立的虚构设施是 x86 64 或基于 x86的零碎映像。如果应用基于 Arm 的零碎映像，则不会减速虚构设施，并且运行速度会迟缓。启用 Hyper-v 后，能够运行减速 Android 仿真器。HAXM 减速和具体设置可参考：如何应用 Android 仿真程序 & 启用硬件加速

创立项目选择.NET MAUI Blazor App。这样的话咱们就能应用 Blazor View 来写 UI 界面了 <img src=”https://s3.bmp.ovh/imgs/2022/04/11/b54c4c0564871e47.jpg” style=”zoom:70%;” />
在 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 服务器的参加。

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 文件

在_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，欢送分割咱们

正文完

后端

发表至：后端

2022-04-26

0

关于后端:ELEC-279-面向对象详细教程

关于后端:SSM框架校园疫情防控小程序的设计与实现

关于后端:MATH3070-Course-code

关于后端:极致体验基于阿里云-Serverless-快速部署-Function

关于pmp:在项目经理眼中一切都是项目

关于后端:在MAUI中使用Masa-Blazor

Masa Blazor 是什么

MAUI 是什么

MAUI 环境筹备

创立 MAUI 利用并引入 Masa Blazor

时间轴性能实现

开源地址

站内搜索