Material导航栏怎么搭mdc-maui NavigationBar底部导航栏与NavigationDrawer抽屉完整教程【免费下载链接】mdc-mauiMaterial design components for .NET MAUI项目地址: https://gitcode.com/gh_mirrors/md/mdc-mauimdc-maui是为 .NET MAUI 打造的 Material Design 3 组件库其中的NavigationBar底部导航栏与NavigationDrawer导航抽屉是搭建跨平台 App 导航的两大核心组件。本文带你快速上手先认识两个组件的适用场景再用几段 XAML 就能搭出带选中态、点击切换页面、涟漪反馈的专业级导航并附上官方推荐的布局最佳实践。一、先搞懂NavigationBar 和 NavigationDrawer 有什么区别在动手之前用一张表搞清楚什么时候用哪个对比项NavigationBar 底部导航栏NavigationDrawer 导航抽屉适用设备手机等小屏幕平板、桌面等大屏幕项目数量官方建议3~5 个同级入口入口可更多支持分组呈现方式常驻屏幕底部默认收起点击呼出典型用途首页 / 分类 / 收藏 / 我的主菜单、设置等次级入口源码位置src/Material.Components.Maui/Components/NavigationBar/src/Material.Components.Maui/Components/NavigationDrawer/ 官方文档原文建议导航目的地不要频繁变动且应保持同级重要性抽屉则应把最常用的入口放在顶部、相关入口放在一起见 docs/navigation-bar.md 与 docs/navigation-drawer.md。二、3 分钟完成环境准备想要使用 Material 导航组件只需三步创建 MAUI 项目在 Visual Studio 中新建一个 .NET MAUI 应用安装 NuGet 包包名为Material.Components.Maui仓库示例工程sample/中可直接参考注册组件在 MauiProgram.cs 的构建器链中调用builder.UseMaterialComponents()并在 App.xaml 中合并mds:MaterialStyles /资源字典支持Light/Dark双色种子色。完成后所有页面只需声明一个 XML 命名空间前缀md即可直接使用全部 Material 组件。详细步骤见 docs/getting-started.md。三、NavigationBar 底部导航栏实战3 行 XAML 搭出选中态导航底部导航栏的源码入口是 NavigationBar.cs它提供Items导航项集合、SelectedItem当前选中项以及Command命令绑定。每个导航项由 NavigationBarItem.cs 实现内置了选中指示器Active Indicator和涟漪反馈。最小可用示例如下md:NavigationBar md:NavigationBarItem IconData{Static icon:Material.Star} Text首页 / md:NavigationBarItem IconData{Static icon:Material.Star} Text分类 / md:NavigationBarItem IconData{Static icon:Material.Star} Text我的 / /md:NavigationBar要点解析点击自动切换选中态用户点击某一项时组件自动将SelectedItem指向该项并触发SelectedItemChanged事件你只需在事件里切换页面内容命令绑定更简洁通过CommandCommandParameter属性可以直接把选中项对象传给 ViewModel 的命令避免在代码后硬编码判断选中指示器可定制ActiveIndicatorHeight默认 32与ActiveIndicatorColor默认取 SecondaryContainerColor 主题色让你精确控制 Material 3 标志性的胶囊形指示器样式字体图标全套可调Text、IconData、IconColor、FontColor、FontSize、FontWeight均可单独配置支持Clicked、Pressed、LongPressed等触摸事件。进阶用 ContentType 直接绑定页面类型NavigationBarItem支持ContentType属性把导航项与一个ContentView类型关联起来选中时自动实例化对应内容XAML 声明式即可完成页面切换——示例工程 01.OverviewPage.xaml 中的md:Tabs就采用了同样的思路。四、NavigationDrawer 导航抽屉实战标准 模态双风格导航抽屉是桌面与平板场景的导航主力源码见 NavigationDrawer.cs。它比底部导航栏多了两个杀手锏标题栏区TitleBar和底部固定区FooterItems并内置两种 Material 3 官方风格定义于 NavigationDrawerStyles.xaml.csStandardNavigationDrawerStyle标准风格抽屉默认展开占据左侧空间适合大屏常驻ModalNavigationDrawerStyle模态风格抽屉默认收起点击图标弹出点击外部自动关闭适合空间紧凑的布局。完整结构示例如下展示了标题、主导航区、底部固定区三大区域md:NavigationDrawer Style{DynamicResource ModalNavigationDrawerStyle} Label Padding20,0,20,20 FontAttributesBold FontSize18 TextTitle / md:NavigationDrawerItem IconData{Static icon:Material.Category} TextItem 1 / md:NavigationDrawerItem IconData{Static icon:Material.Category} TextItem 2 / md:NavigationBarItem.IconData /md:NavigationBarItem.IconData md:NavigationDrawer.FooterItems md:NavigationDrawerItem IconData{Static icon:Material.Settings} TextSettings / /md:NavigationDrawer.FooterItems /md:NavigationDrawer示例工程 MainPage.xaml 的真实用法更加精炼用ContentType把每个抽屉项直接绑定到具体页面类型Settings 放在FooterItems中常驻底部——这正是官方次级入口下沉建议的最佳实践。抽屉项的 Material 细节NavigationDrawerItem.cs 的每个抽屉项都实现了完整的视觉状态机普通、悬停、按下、选中四个状态normal / hovered / pressed / actived_*配合StateLayerColor状态层与RippleDuration涟漪动画参数在不同平台上都呈现地道的 Material 触感。五、5 条导航最佳实践清单结合官方文档与示例工程整理成可直接照做的清单控制入口数量底部导航栏保持 3~5 个再多就改用导航抽屉 分组保持入口恒定导航项不应随页面动态增删保证用户在任意页面都有相同的心理地图常用入口置顶抽屉中把使用频率最高的项放最上面相关项归为一组次级入口下沉设置、退出、主题切换等低频入口放进FooterItems与主导航视觉分离选中态交给组件优先使用SelectedItem属性与Command命令绑定避免手动逐项设置IsActived代码更少且不易出错。六、写在最后mdc-maui 的 NavigationBar 与 NavigationDrawer 把 Material 3 的导航规范选中指示器、状态层、涟漪、双风格抽屉做成了开箱即用的组件小屏用底部导航栏大屏用导航抽屉Command绑定 ContentType页面关联几行 XAML 即可搭建出专业级导航结构。打开sample/目录运行示例工程对照本文逐段尝试你会很快把这两个组件用熟。【免费下载链接】mdc-mauiMaterial design components for .NET MAUI项目地址: https://gitcode.com/gh_mirrors/md/mdc-maui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考