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做一个移动端常见的时间轴页面，并加一点切换主题色的小功能，效果图如下：
接下来让我们一步步去实现它。首先我们先准备好必备的环境。
注：文章示例演示环境为（maui 6.0.200-preview.14.5 + masa.blazor 0.3.0）
maui环境准备
首先要确保安装了最新版的 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 仿真程序 & 启用硬件加速
创建maui应用并引入masa blazor
创建项目选择.net maui blazor app。这样的话我们就能使用blazor view来写ui界面了
在nuget中安装masa.blazor，并在mauiprogram.cs文件中注册相关服务
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
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>
/mcol>
micon>
mdi-account-details/micon>
micon>
mdi-compass/micon>
/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去做一些应用体验一下。
通过以上内容的阐述，相信大家对“maui的优点是什么，怎么配置和应用”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： maui的优点是什么，怎么配置和应用
本文地址： https://pptw.com/jishu/654434.html