×

为你的 MAUI 应用启用 Material 3 新外观

独孤求败 独孤求败 发表于2026-06-01 13:48:14 浏览2 评论0

抢沙发发表评论

从 .NET MAUI 10 开始,只需设置一个 MSBuild 属性,即可让你的 Android 应用启用 Material 3(又名 Material You)样式。目前已有大量控件支持 Material 3,更多控件将在后续服务更新中陆续加入,未来该样式计划成为 Android 平台的默认选项。

本文将带你了解如何启用 Material 3、当前支持哪些控件,以及后续更新计划。

Material 3 到底是什么?

Material 3 是 Google Material Design 设计系统的最新版本。相较于 Material 2,它带来了以下升级:

  • • 动态配色方案:根据用户偏好与系统主题自适应调整(即"Material You"核心特性)
  • • 焕新的组件形态:包括圆角、阴影层级与焦点状态视觉优化
  • • 更灵活的定制能力:通过 Material 的 Color Token(颜色令牌) 实现精细化样式控制

若未启用 Material 3,你的 .NET MAUI Android 应用将继续沿用 Material 2 样式——功能完全正常,但启用后可让控件视觉风格与最新 Android 平台规范保持一致。

注意
.NET MAUI 中的 Material 3 仅支持 Android 平台。iOS、Mac Catalyst 与 Windows 平台将继续使用各自原生设计系统,这符合各平台最佳实践。

如何启用 Material 3

Material 3 支持需要 .NET MAUI 10 环境——你的项目需以 net10.0-android(及其他 net10.0-*TFM(Target Framework Moniker,目标框架标识符))为目标框架。

Material 3 相关功能正通过服务更新(SR, Service Release)逐步落地:

  • • SR3 (10.0.30):构建属性与基础样式支持
  • • SR4 (10.0.40)CheckBox 控件支持
  • • SR6 (10.0.60):最大规模更新,涵盖 ButtonEntrySearchBarDatePickerSliderProgressBarImageButtonSwitch 及 Shell 主题适配

为获得最完整体验,请确保 Microsoft.Maui.ControlsNuGet 包 版本为 10.0.60 或更高。

升级到 .NET 10 后,启用步骤非常简单:打开 .csproj 文件,在 <PropertyGroup> 中添加一行属性:

<PropertyGroup>
  <UseMaterial3>
true</UseMaterial3>
</PropertyGroup>

仅此而已。重新编译并部署到 Android 设备或模拟器,支持的控件将自动应用 Material 3 样式。无需自定义 Handler无需编写自定义 Renderer无需手动修改 Resources/values/styles.xml 文件。

Material 3 样式仅影响控件的默认外观。你在 XAML 或 C# 中显式设置的样式(如 BackgroundColorTextColor 或自定义 Handler)仍具有更高优先级,品牌视觉不受影响。

若尝试后觉得暂不适合?只需从 .csproj 中移除 <UseMaterial3> 属性(或设为 false)。默认值为 false,下次构建时应用将立即恢复 Material 2 样式,与当前效果完全一致。

如需查看属性在实际项目中的位置,以下是一个精简后的 .csproj 示例:

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>

    <TargetFrameworks>
net10.0-android;net10.0-ios;net10.0-maccatalyst</TargetFrameworks>
    <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">
$(TargetFrameworks);net10.0-windows10.0.19041.0</TargetFrameworks>

    <OutputType>
Exe</OutputType>
    <UseMaui>
true</UseMaui>
    <SingleProject>
true</SingleProject>
    <ImplicitUsings>
enable</ImplicitUsings>

    <!-- 在 Android 平台启用 Material 3 设计 -->

    <UseMaterial3>
true</UseMaterial3>
  </PropertyGroup>


  <ItemGroup>

    <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />

  </ItemGroup>


</Project>

启用后长什么样?

以下是 Material 3 示例应用在 Android 端分别以浅色与深色主题运行的效果。仅通过 UseMaterial3 属性,即可让 SearchBarEntryDatePickerPickerSliderProgressBarRadioButtonCheckBoxSwitchButton 及 ImageButton 等控件自动应用全新样式。

Material 3 浅色主题
Material 3 深色主题
Material 3 demo app on Android in light theme
Material 3 demo app on Android in dark theme

视觉变化最显著的控件包括:

  • • Entry & Editor:从经典下划线式 EditText 升级为 Material 3 的轮廓式 TextInputLayout,支持浮动标签(Floating Label)
  • • SearchBar:变为标准的 Material 3 内联文本字段,前置搜索图标 + 后置清空按钮
  • • DatePicker:传统旋转选择器对话框替换为 Google 官方 MaterialDatePicker 全屏日历浮层
  • • TimePicker:采用 Material 3 时钟拨盘对话框,并应用 Material You 动态配色
  • • Slider:轨道与滑块手柄(Thumb)更新为 Material You 新设计
  • • ProgressBar:基于 Material 3 的 LinearProgressIndicator 重新渲染
  • • RadioButton, Picker:自动适配 Material 3 颜色角色(Color Roles)与视觉反馈

哪些功能尚未覆盖?

首轮 Material 3 适配工作优先聚焦于 视觉差异最大 且 需修改底层 Handler 以替换 Material 组件 的控件。

目前已支持 Material 3 的控件包括:EntryEditorSearchBarPickerRadioButtonTimePickerDatePickerSwitchProgressBarActivityIndicatorSliderImageImageButtonButtonCheckBoxLabel 及 Shell,均已完成对应的 Handler 适配代码。

而 StepperCollectionView 等控件在启用 UseMaterial3 后,会通过 Android 系统主题间接继承 Material 3 配色,但尚未进行专属 Handler 优化。

此外,以下方向正单独推进中:

  • • 控件级细粒度开关:当前 UseMaterial3 为 Android 平台全局开关,暂不支持按控件或页面单独启用。
  • • 通过 .NET MAUI API 操作动态颜色令牌:系统已在 Android 主题层支持 Material You 动态配色,但尚未提供从 XAML 或 C# 直接操作 Material 3 颜色角色(Color Roles)的 API(Application Programming Interface) 表面。
  • • 导航框架与集合视图样式NavigationPageTabbedPageFlyoutPageCollectionView 及 Frame/Border 等组件在本版本中未进行 Material 3 专属样式重构。

当前规划是:待上述缺口补齐后,Material 3 将成为 Android 平台的默认样式。

核心总结

.NET MAUI 10 中的 Material 3 支持属于「改一行配置,应用焕然一新」的稀缺型提效特性。

当前已覆盖 EntryEditorSearchBarRadioButtonProgressBarSliderPickerTimePickerDatePickerCheckBoxSwitchImageButtonButton 及 Shell,其余控件亦可通过 Android 主题间接继承 Material 3 配色。


群贤毕至

访客