Xamarin.Froms 第20局:导航
2019-02-19 本文已影响3人
dotNET之家
总目录
前言
本文介绍导航:
一、导航概述
二、传递数据
三、导航堆栈
四、导航栏
环境
1.Visual Studio 2017
2.Xamarin.Froms 4.0.0.62955-pre2
3.Android 4.4(API 19)或更高版本
4.约定:XF代表Xamarin.Forms
内容
一、导航概述
主要介绍页面之间的导航,即:NavigationPage。使用NavigationPage可以向前或向后导航页面。
从一页跳转到另一页,新的页面会置于顶层,原理如下图所示:

从一页返回到上一页,最顶层页面会先释放,原理如下图所示:

实现效果


实现方式

创建根页,即:用MainPage的实例作为参数实例化NavigationPage,并将NavigationPage的实例设为主页。这样才可以在页面中使用Navigation属性的导航方法。




1.Navigation属性:导航主要使用Navigation的方法,其定义如下图所示:

2.跳转到指定页:
- PushAsync(Page page):跳转到指定页(page);
- PushAsync(Page page,bool animated):跳转到指定页(page),animated是否带有动画效果,默认为true;
3.返回到上一页:
- PopAsync():返回上一页;
- PopAsync(bool animated):返回上一页,animated是否带有动画效果,默认为true;
- PopToRootAsync():返回到根页;
- PopToRootAsync(bool animated):返回到根页,animated是否带有动画效果,默认为true;
4.插入指定页
- InsertPageBefore(Page page,Page before):在before页面之前插入page页;
5.移除指定页
- RemovePage(Page page):移除指定页面;
6.导航堆栈:NavigationStack。
二、传递数据
页面之间传递数据有两种方法:
- 通过页面构造函数传递数据
- 通过BindingContext传递数据
实现效果


实现方式




三、导航堆栈
导航堆栈:通过Navigation的NavigationStack属性可以获取导航堆栈中的页面。
NavigationStack是IReadOnlyList<Page>类型,即:它是一个页面的集合,但是只读。可以通过Navigation的方法进行增删。
四、导航栏
导航栏:XF中所有的View都可以在Navigation的导航栏中显示。
实现效果


实现方式

可以在Navigation.TitleView中自定义导航栏。

1.NavigationPage.HasBackButton:是否显示返回按钮。
2.NavigationPage.HasNavigationBar:是否显示导航栏。
后语
下篇介绍消息中心,待续...