WebEnh

.net7 mvc jquery bootstrap json 学习中 第一次学PHP,正在研究中。自学进行时... ... 我的博客 https://enhweb.github.io/ 不错的皮肤:darkgreentrip,iMetro_HD
  首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

.NET Core 3 WPF MVVM框架 Prism系列之导航系统

Posted on 2023-12-21 17:51  WebEnh  阅读(59)  评论(0编辑  收藏  举报

本文将介绍如何在.NET Core3环境下使用MVVM框架Prism基于区域Region的导航系统git

在讲解Prism导航系统以前,咱们先来看看一个例子,我在以前的demo项目建立一个登陆界面:github

 

咱们看到这里是否是一开始想象到使用WPF带有的导航系统,经过Frame和Page进行页面跳转,而后经过导航日志的GoBack和GoForward实现后退和前进,其实这是经过使用Prism的导航框架实现的,下面咱们来看看如何在Prism的MVVM模式下实现该功能express

一.区域导航
咱们在上一篇介绍了Prism的区域管理,而Prism的导航系统也是基于区域的,首先咱们来看看如何在区域导航c#

1.注册区域
LoginWindow.xaml:app

<Window x:Class="PrismMetroSample.Shell.Views.Login.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:PrismMetroSample.Shell.Views.Login"
xmlns:region="clr-namespace:PrismMetroSample.Infrastructure.Constants;assembly=PrismMetroSample.Infrastructure"
mc:Ignorable="d"
xmlns:prism="http://prismlibrary.com/"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
Height="600" Width="400" prism:ViewModelLocator.AutoWireViewModel="True" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
Icon="pack://application:,,,/PrismMetroSample.Infrastructure;Component/Assets/Photos/Home, homepage, menu.png" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding LoginLoadingCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
<ContentControl prism:RegionManager.RegionName="{x:Static region:RegionNames.LoginContentRegion}" Margin="5"/>
</Grid>
</Window>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
2.注册导航
App.cs:框架

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
containerRegistry.Register<IMedicineSerivce, MedicineSerivce>();
containerRegistry.Register<IPatientService, PatientService>();
containerRegistry.Register<IUserService, UserService>();

//注册全局命令
containerRegistry.RegisterSingleton<IApplicationCommands, ApplicationCommands>();
containerRegistry.RegisterInstance<IFlyoutService>(Container.Resolve<FlyoutService>());

//注册导航
containerRegistry.RegisterForNavigation<LoginMainContent>();
containerRegistry.RegisterForNavigation<CreateAccount>();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
3.区域导航
LoginWindowViewModel.cs:ide

public class LoginWindowViewModel:BindableBase
{

private readonly IRegionManager _regionManager;
private readonly IUserService _userService;
private DelegateCommand _loginLoadingCommand;
public DelegateCommand LoginLoadingCommand =>
_loginLoadingCommand ?? (_loginLoadingCommand = new DelegateCommand(ExecuteLoginLoadingCommand));

void ExecuteLoginLoadingCommand()
{
//在LoginContentRegion区域导航到LoginMainContent
_regionManager.RequestNavigate(RegionNames.LoginContentRegion, "LoginMainContent");

Global.AllUsers = _userService.GetAllUsers();
}

public LoginWindowViewModel(IRegionManager regionManager, IUserService userService)
{
_regionManager = regionManager;
_userService = userService;
}

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
LoginMainContentViewModel.cs:this

public class LoginMainContentViewModel : BindableBase
{
private readonly IRegionManager _regionManager;

private DelegateCommand _createAccountCommand;
public DelegateCommand CreateAccountCommand =>
_createAccountCommand ?? (_createAccountCommand = new DelegateCommand(ExecuteCreateAccountCommand));

//导航到CreateAccount
void ExecuteCreateAccountCommand()
{
Navigate("CreateAccount");
}

private void Navigate(string navigatePath)
{
if (navigatePath != null)
_regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);

}


public LoginMainContentViewModel(IRegionManager regionManager)
{
_regionManager = regionManager;
}

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
效果以下:spa

 

这里咱们能够看到咱们调用RegionMannager的RequestNavigate方法,其实这样看不能很好的说明是基于区域的作法,若是将换成下面的写法可能更好理解一点:3d

//在LoginContentRegion区域导航到LoginMainContent
_regionManager.RequestNavigate(RegionNames.LoginContentRegion, "LoginMainContent");
1.
2.
换成

//在LoginContentRegion区域导航到LoginMainContent
IRegion region = _regionManager.Regions[RegionNames.LoginContentRegion];
region.RequestNavigate("LoginMainContent");
1.
2.
3.
其实RegionMannager的RequestNavigate源码也是大概实现也是大概如此,就是去调Region的RequestNavigate的方法,而Region的导航是实现了一个INavigateAsync接口:

public interface INavigateAsync
{
void RequestNavigate(Uri target, Action<NavigationResult> navigationCallback);
void RequestNavigate(Uri target, Action<NavigationResult> navigationCallback, NavigationParameters navigationParameters);

}
1.
2.
3.
4.
5.
6.
咱们能够看到有RequestNavigate方法三个形参:

target:表示将要导航的页面Uri
navigationCallback:导航后的回调方法
navigationParameters:导航传递参数(下面会详解)
那么咱们将上述加上回调方法:

//在LoginContentRegion区域导航到LoginMainContent
IRegion region = _regionManager.Regions[RegionNames.LoginContentRegion];
region.RequestNavigate("LoginMainContent", NavigationCompelted);

private void NavigationCompelted(NavigationResult result)
{
if (result.Result==true)
{
MessageBox.Show("导航到LoginMainContent页面成功");
}
else
{
MessageBox.Show("导航到LoginMainContent页面失败");
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
效果以下:

 

二.View和ViewModel参与导航过程
1.INavigationAware
咱们常常在两个页面之间导航须要处理一些逻辑,例如,LoginMainContent页面导航到CreateAccount页面时候,LoginMainContent退出页面的时刻要保存页面数据,导航到CreateAccount页面的时刻处理逻辑(例如获取从LoginMainContent页面的信息),Prism的导航系统经过一个INavigationAware接口:

public interface INavigationAware : Object
{
Void OnNavigatedTo(NavigationContext navigationContext);

Boolean IsNavigationTarget(NavigationContext navigationContext);

Void OnNavigatedFrom(NavigationContext navigationContext);
}
1.
2.
3.
4.
5.
6.
7.
8.
OnNavigatedFrom:导航以前触发,通常用于保存该页面的数据
OnNavigatedTo:导航后目的页面触发,通常用于初始化或者接受上页面的传递参数
IsNavigationTarget:True则重用该View实例,Flase则每一次导航到该页面都会实例化一次
咱们用代码来演示这三个方法:

LoginMainContentViewModel.cs:

public class LoginMainContentViewModel : BindableBase, INavigationAware
{
private readonly IRegionManager _regionManager;

private DelegateCommand _createAccountCommand;
public DelegateCommand CreateAccountCommand =>
_createAccountCommand ?? (_createAccountCommand = new DelegateCommand(ExecuteCreateAccountCommand));

void ExecuteCreateAccountCommand()
{
Navigate("CreateAccount");
}

private void Navigate(string navigatePath)
{
if (navigatePath != null)
_regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
}

public LoginMainContentViewModel(IRegionManager regionManager)
{
_regionManager = regionManager;
}

public bool IsNavigationTarget(NavigationContext navigationContext)
{
return true;
}

public void OnNavigatedFrom(NavigationContext navigationContext)
{
MessageBox.Show("退出了LoginMainContent");
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
MessageBox.Show("从CreateAccount导航到LoginMainContent");
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
CreateAccountViewModel.cs:

public class CreateAccountViewModel : BindableBase,INavigationAware
{
private DelegateCommand _loginMainContentCommand;
public DelegateCommand LoginMainContentCommand =>
_loginMainContentCommand ?? (_loginMainContentCommand = new DelegateCommand(ExecuteLoginMainContentCommand));

void ExecuteLoginMainContentCommand()
{
Navigate("LoginMainContent");
}

public CreateAccountViewModel(IRegionManager regionManager)
{
_regionManager = regionManager;
}

private void Navigate(string navigatePath)
{
if (navigatePath != null)
_regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
}

public bool IsNavigationTarget(NavigationContext navigationContext)
{
return true;
}

public void OnNavigatedFrom(NavigationContext navigationContext)
{
MessageBox.Show("退出了CreateAccount");
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
MessageBox.Show("从LoginMainContent导航到CreateAccount");
}

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
效果以下:

 

修改IsNavigationTarget为false:

public class LoginMainContentViewModel : BindableBase, INavigationAware
{
public bool IsNavigationTarget(NavigationContext navigationContext)
{
return false;
}
}

public class CreateAccountViewModel : BindableBase,INavigationAware
{
public bool IsNavigationTarget(NavigationContext navigationContext)
{
return false;
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
效果以下:

 

咱们会发现LoginMainContent和CreateAccount页面的数据不见了,这是由于第二次导航到页面的时候当IsNavigationTarget为false时,View将会从新实例化,致使ViewModel也从新加载,所以全部数据都清空了

2.IRegionMemberLifetime
同时,Prism还能够经过IRegionMemberLifetime接口的KeepAlive布尔属性控制区域的视图的生命周期,咱们在上一篇关于区域管理器说到,当视图添加到区域时候,像ContentControl这种单独显示一个活动视图,能够经过Region的Activate和Deactivate方法激活和失效视图,像ItemsControl这种能够同时显示多个活动视图的,能够经过Region的Add和Remove方法控制增长活动视图和失效视图,而当视图的KeepAlive为false,Region的Activate另一个视图时,则该视图的实例则会去除出区域,为何咱们不在区域管理器讲解该接口呢?由于当导航的时候,一样的是在触发了Region的Activate和Deactivate,当有IRegionMemberLifetime接口时则会触发Region的Add和Remove方法,这里能够去看下Prism的RegionMemberLifetimeBehavior源码

咱们将LoginMainContentViewModel实现IRegionMemberLifetime接口,而且把KeepAlive设置为false,一样的将IsNavigationTarget设置为true

LoginMainContentViewModel.cs:

public class LoginMainContentViewModel : BindableBase, INavigationAware,IRegionMemberLifetime
{

public bool KeepAlive => false;

private readonly IRegionManager _regionManager;

private DelegateCommand _createAccountCommand;
public DelegateCommand CreateAccountCommand =>
_createAccountCommand ?? (_createAccountCommand = new DelegateCommand(ExecuteCreateAccountCommand));

void ExecuteCreateAccountCommand()
{
Navigate("CreateAccount");
}

private void Navigate(string navigatePath)
{
if (navigatePath != null)
_regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
}

public LoginMainContentViewModel(IRegionManager regionManager)
{
_regionManager = regionManager;
}

public bool IsNavigationTarget(NavigationContext navigationContext)
{
return true;
}

public void OnNavigatedFrom(NavigationContext navigationContext)
{
MessageBox.Show("退出了LoginMainContent");
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
MessageBox.Show("从CreateAccount导航到LoginMainContent");
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
效果以下:

 

咱们会发现跟没实现IRegionMemberLifetime接口和IsNavigationTarget设置为false状况同样,当KeepAlive为false时,经过断点知道,从新导航回LoginMainContent页面时不会触发IsNavigationTarget方法,所以能够

知道判断顺序是:KeepAlive -->IsNavigationTarget

3.IConfirmNavigationRequest
Prism的导航系统还支持再导航前容许是否须要导航的交互需求,这里咱们在CreateAccount注册完用户后寻问是否须要导航回LoginMainContent页面,代码以下:

CreateAccountViewModel.cs:

public class CreateAccountViewModel : BindableBase, INavigationAware,IConfirmNavigationRequest
{
private DelegateCommand _loginMainContentCommand;
public DelegateCommand LoginMainContentCommand =>
_loginMainContentCommand ?? (_loginMainContentCommand = new DelegateCommand(ExecuteLoginMainContentCommand));

private DelegateCommand<object> _verityCommand;
public DelegateCommand<object> VerityCommand =>
_verityCommand ?? (_verityCommand = new DelegateCommand<object>(ExecuteVerityCommand));

void ExecuteLoginMainContentCommand()
{
Navigate("LoginMainContent");
}

public CreateAccountViewModel(IRegionManager regionManager)
{
_regionManager = regionManager;
}

private void Navigate(string navigatePath)
{
if (navigatePath != null)
_regionManager.RequestNavigate(RegionNames.LoginContentRegion, navigatePath);
}

public bool IsNavigationTarget(NavigationContext navigationContext)
{
return true;
}

public void OnNavigatedFrom(NavigationContext navigationContext)
{
MessageBox.Show("退出了CreateAccount");
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
MessageBox.Show("从LoginMainContent导航到CreateAccount");
}

//注册帐号
void ExecuteVerityCommand(object parameter)
{
if (!VerityRegister(parameter))
{
return;
}
MessageBox.Show("注册成功!");
LoginMainContentCommand.Execute();
}

//导航前询问
public void ConfirmNavigationRequest(NavigationContext navigationContext, Action<bool> continuationCallback)
{
var result = false;
if (MessageBox.Show("是否须要导航到LoginMainContent页面?", "Naviagte?",MessageBoxButton.YesNo) ==MessageBoxResult.Yes)
{
result = true;
}
continuationCallback(result);
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
效果以下:

 

三.导航期间传递参数
Prism提供NavigationParameters类以帮助指定和检索导航参数,在导航期间,能够经过访问如下方法来传递导航参数:

INavigationAware接口的IsNavigationTarget,OnNavigatedFrom和OnNavigatedTo方法中IsNavigationTarget,OnNavigatedFrom和OnNavigatedTo中形参NavigationContext对象的NavigationParameters属性
IConfirmNavigationRequest接口的ConfirmNavigationRequest形参NavigationContext对象的NavigationParameters属性
区域导航的INavigateAsync接口的RequestNavigate方法赋值给其形参navigationParameters
导航日志IRegionNavigationJournal接口CurrentEntry属性的NavigationParameters类型的Parameters属性(下面会介绍导航日志)
这里咱们CreateAccount页面注册完用户后询问是否须要用当前注册用户来做为登陆LoginId,来演示传递导航参数,代码以下:

CreateAccountViewModel.cs(修改代码部分):

private string _registeredLoginId;
public string RegisteredLoginId
{
get { return _registeredLoginId; }
set { SetProperty(ref _registeredLoginId, value); }
}

public bool IsUseRequest { get; set; }

void ExecuteVerityCommand(object parameter)
{
if (!VerityRegister(parameter))
{
return;
}
this.IsUseRequest = true;
MessageBox.Show("注册成功!");
LoginMainContentCommand.Execute();
}

public void ConfirmNavigationRequest(NavigationContext navigationContext, Action<bool> continuationCallback)
{
if (!string.IsNullOrEmpty(RegisteredLoginId) && this.IsUseRequest)
{
if (MessageBox.Show("是否须要用当前注册的用户登陆?", "Naviagte?", MessageBoxButton.YesNo) == MessageBoxResult.Yes)
{
navigationContext.Parameters.Add("loginId", RegisteredLoginId);
}
}
continuationCallback(true);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
LoginMainContentViewModel.cs(修改代码部分):

public void OnNavigatedTo(NavigationContext navigationContext)
{
MessageBox.Show("从CreateAccount导航到LoginMainContent");

var loginId= navigationContext.Parameters["loginId"] as string;
if (loginId!=null)
{
this.CurrentUser = new User() { LoginId=loginId};
}

}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
效果以下:

 

四.导航日志
Prism导航系统一样的和WPF导航系统同样,都支持导航日志,Prism是经过IRegionNavigationJournal接口来提供区域导航日志功能,

public interface IRegionNavigationJournal
{
bool CanGoBack { get; }

bool CanGoForward { get; }

IRegionNavigationJournalEntry CurrentEntry {get;}

INavigateAsync NavigationTarget { get; set; }

void GoBack();

void GoForward();

void RecordNavigation(IRegionNavigationJournalEntry entry, bool persistInHistory);

void Clear();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
咱们将在登陆界面接入导航日志功能,代码以下:

LoginMainContent.xaml(前进箭头代码部分):

<TextBlock Width="30" Height="30" HorizontalAlignment="Right" Text="" FontWeight="Bold" FontFamily="pack://application:,,,/PrismMetroSample.Infrastructure;Component/Assets/Fonts/#iconfont" FontSize="30" Margin="10" Visibility="{Binding IsCanExcute,Converter={StaticResource boolToVisibilityConverter}}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="{Binding GoForwardCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#F9F9F9"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
BoolToVisibilityConverter.cs:

public class BoolToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value==null)
{
return DependencyProperty.UnsetValue;
}
var isCanExcute = (bool)value;
if (isCanExcute)
{
return Visibility.Visible;
}
else
{
return Visibility.Hidden;
}
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
LoginMainContentViewModel.cs(修改代码部分):

IRegionNavigationJournal _journal;

private DelegateCommand<PasswordBox> _loginCommand;
public DelegateCommand<PasswordBox> LoginCommand =>
_loginCommand ?? (_loginCommand = new DelegateCommand<PasswordBox>(ExecuteLoginCommand, CanExecuteGoForwardCommand));

private DelegateCommand _goForwardCommand;
public DelegateCommand GoForwardCommand =>
_goForwardCommand ?? (_goForwardCommand = new DelegateCommand(ExecuteGoForwardCommand));

private void ExecuteGoForwardCommand()
{
_journal.GoForward();
}

private bool CanExecuteGoForwardCommand(PasswordBox passwordBox)
{
this.IsCanExcute=_journal != null && _journal.CanGoForward;
return true;
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
//MessageBox.Show("从CreateAccount导航到LoginMainContent");
_journal = navigationContext.NavigationService.Journal;

var loginId= navigationContext.Parameters["loginId"] as string;
if (loginId!=null)
{
this.CurrentUser = new User() { LoginId=loginId};
}
LoginCommand.RaiseCanExecuteChanged();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
CreateAccountViewModel.cs(修改代码部分):

IRegionNavigationJournal _journal;

private DelegateCommand _goBackCommand;
public DelegateCommand GoBackCommand =>
_goBackCommand ?? (_goBackCommand = new DelegateCommand(ExecuteGoBackCommand));

void ExecuteGoBackCommand()
{
_journal.GoBack();
}

public void OnNavigatedTo(NavigationContext navigationContext)
{
//MessageBox.Show("从LoginMainContent导航到CreateAccount");
_journal = navigationContext.NavigationService.Journal;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
效果以下:

 

选择退出导航日志
若是不打算将页面在导航过程当中不加入导航日志,例如LoginMainContent页面,能够经过实现IJournalAware并从PersistInHistory()返回false

public class LoginMainContentViewModel : IJournalAware
{
public bool PersistInHistory() => false;
}
1.
2.
3.
4.
五.小结:
prism的导航系统能够跟wpf导航并行使用,这是prism官方文档也支持的,由于prism的导航系统是基于区域的,不依赖于wpf,不过更推荐于单独使用prism的导航系统,由于在MVVM模式下更灵活,支持依赖注入,经过区域管理器可以更好的管理视图View,更能适应复杂应用程序需求,wpf导航系统不支持依赖注入模式,也依赖于Frame元素,并且在导航过程当中也是容易强依赖View部分,下一篇将会讲解Prism的对话框服务


-----------------------------------
©著作权归作者所有:来自51CTO博客作者bruce1992的原创作品,请联系作者获取转载授权,否则将追究法律责任
.NET Core 3 WPF MVVM框架 Prism系列之导航系统
https://blog.51cto.com/u_4018548/6421075