推荐一个良好的 .NET MAUI 组件库

前言

.NET MAUI 的发布，项目中可以使用这个新的跨平台 UI 框架来轻松搭建的移动和桌面应用。
为了帮助各人更快地构建美观且功能丰富的应用，本文将推荐一款良好的 .NET MAUI 组件库MDC-MAUI，它不但提供了丰富的 UI 组件，而且易于集成和使用。
通过本文的介绍，希望可以或许帮助各人在开发过程中节省时间并提升应用的用户体验。
组件介绍

MDC-MAUI 是一个专为 .NET MAUI 开发的组件库，为每个平台提供一致的视觉效果。
该库开箱即用，提供了丰富的 UI 组件，包括按钮、卡片、导航、开关、进度条等，可以帮助我们快速构建美观且功能丰富的应用。

组件展示

布局

1、WrapLayout
WrapLayout 是一种布局容器，允许根据 Orientation 属性将项目排列成行或列。当空间被填满时，容器会自动将项目换行到新的一行或一列。

2、示例代码

1. <md:WrapLayout Orientation="Horizontal">
2.      <md:Chip IconData="{Static icon:Material.Add}" Text="chip" />
3.      <md:Chip IconData="{Static icon:Material.Add}" Text="chip" />
4.      <md:Chip IconData="{Static icon:Material.Add}" Text="chip" />
5.      <md:Chip IconData="{Static icon:Material.Add}" Text="chip" />
6.      <md:Chip IconData="{Static icon:Material.Add}" Text="chip" />
7.      <md:Chip IconData="{Static icon:Material.Add}" Text="chip" />
8.      <md:Chip IconData="{Static icon:Material.Add}" Text="chip" />
9. </md:WrapLayout>

复制代码

3、属性

按钮

1、Button
常用按钮触发 UI 中的大多数操作。
提供五种样式：添补按钮（Filled）、凸起按钮（Elevated）、添补色调按钮（Filled Tonal）、边框按钮（Outlined）和文本按钮（Text）。

2、代码示例

1. [/code][size=4][b]复选框[/b][/size]
3. [b]1、CheckBox[/b]
4. CheckBox允许用户从列表中选择一个或多个项目，或者开启或关闭某个项目。
5. [b]2、代码示例[/b]
6. [code]

复制代码

3、属性

4、事故

进度条

1、ProgressIndicator
进度指示器实时显示流程的状态。

2、代码示例

1. [/code][b]3、属性[/b]
2. [align=center][img]https://files.mdnice.com/user/9786/6d59a48f-5ffc-40d3-89b4-b2e34f077efd.png[/img][/align][b]4、事故[/b]
3. [align=center][img]https://files.mdnice.com/user/9786/a1fe7540-b00c-4772-af64-ce879f75c789.png[/img][/align][size=4][b]导航栏[/b][/size]
5. [b]1、NavigationBar[/b]
6. 导航栏允许用户在较小的设备上切换 UI 视图。
7. [align=center][img]https://files.mdnice.com/user/9786/7c8db777-44f5-4495-986e-5569afeede5d.png[/img][/align][b]2、代码示例[/b]
8. [code]<...
9. xmlns:icon="clr-namespace:IconPacks.IconKind;assembly=IconPacks.Material"
10. ...>
12. <mdc:FAB IconData="{Static icon:Material.Star}" Style="{DynamicResource SecondaryFABStyle}" />
14. <mdc:NavigationBar>
15.     <mdc:NavigationBarItem IconData="{Static icon:Material.Star}" Text="label 1">
16.   ...
17. </mdc:NavigationBarItem>
18.     <mdc:NavigationBarItem IconData="{Static icon:Material.Star}" Text="label 2">
19.   ...
20. </mdc:NavigationBarItem>
21. </mdc:NavigationBar>

复制代码

3、属性

4、事故

另有很多组件，各人如果有需要可以访问在线文档（https://mdc-maui.github.io/ ）学习和参考，包括组件介绍、代码示例、属性以及事故等。

组件地址

• Github
  

1. https://github.com/mdc-maui/mdc-maui

复制代码

• 文档地址
  

1. https://mdc-maui.github.io/

复制代码

最后

如果你以为这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。也可以参加微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交换心得，共同成长！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。