推荐一个优秀的 .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. <md:Button Style="{DynamicResource ElevatedButtonStyle}" Text="Elevated" />
2. <md:Button Style="{DynamicResource FilledButtonStyle}" Text="Filled" />
3. <md:Button Style="{DynamicResource FilledTonalButtonStyle}" Text="FilledTonal" />
4. <md:Button Style="{DynamicResource OutlinedButtonStyle}" Text="Outlined" />
5. <md:Button Style="{StaticResource TextButtonStyle}" Text="Text" />

复制代码

复选框

1、CheckBox
CheckBox答应用户从列表中选择一个或多个项目，大概开启或关闭某个项目。
2、代码示例

1. <mdc:CheckBox Text="checkbox" />

复制代码

3、属性

4、事件

进度条

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

2、代码示例

1. <md:ProgressIndicator Style="{DynamicResource CircularProgressIndicatorStyle}" />
2. <md:ProgressIndicator Style="{DynamicResource LinearProgressIndicatorStyle}" />

复制代码

3、属性

4、事件

导航栏

1、NavigationBar
导航栏答应用户在较小的设备上切换 UI 视图。

2、代码示例

1. <...
2.  xmlns:icon="clr-namespace:IconPacks.IconKind;assembly=IconPacks.Material"
3. ...>
5. <mdc:FAB IconData="{Static icon:Material.Star}" Style="{DynamicResource SecondaryFABStyle}" />
7. <mdc:NavigationBar>
8.     <mdc:NavigationBarItem IconData="{Static icon:Material.Star}" Text="label 1">
9.   ...
10.  </mdc:NavigationBarItem>
11.     <mdc:NavigationBarItem IconData="{Static icon:Material.Star}" Text="label 2">
12.   ...
13.  </mdc:NavigationBarItem>
14. </mdc:NavigationBar>

复制代码

3、属性

4、事件

还有很多组件，大家如果有必要可以访问在线文档（https://mdc-maui.github.io/ ）学习和参考，包括组件先容、代码示例、属性以及事件等。

组件地址

Github
https://github.com/mdc-maui/mdc-maui
文档地址
https://mdc-maui.github.io/
最后

如果你觉得这篇文章对你有资助，不妨点个赞支持一下！你的支持是我继承分享知识的动力。如果有任何疑问或必要进一步的资助，接待随时留言。