简体   繁体   English

Xamarin表单导航和处理登录页面

[英]Xamarin Forms Navigation and dealing with a Login Page

I'm trying to create an App with a Login Page as the first page. 我正在尝试创建一个带有登录页面的应用程序作为第一页。

Once the user logs in, the pages that come after will be in a standard page stack organisation so I can easily use the build in Navigation object and wrap everything in Navigation pages. 一旦用户登录,之后的页面将位于标准页面堆栈组织中,因此我可以轻松地使用Navigation对象中的构建并将所有内容包装在导航页面中。

eg 例如

Login Page -> MainAppPage  |-> Category1Page -> Cat1SubPage
                           |-> Category2Page -> Cat2SubPage

My understanding is that I should wrap MainAppPage with new NavigationPage() , and then I'll have access to the Navigation object allowing me to do things like this: 我的理解是我应该用new NavigationPage()包装MainAppPage ,然后我将访问Navigation对象,允许我做这样的事情:

await this.Navigation.PushAsync(new Category1Page());

And the various platforms will give me automatic back button support to go back to the previous page. 并且各种平台将为我提供自动后退按钮支持以返回上一页。

But I don't want a user to navigate from LoginPage -> MainAppPage in this manner, because I don't want the backbutton to take them back to Login, without them explicitly hitting the logout button. 但是我不希望用户以这种方式从LoginPage - > MainAppPage导航,因为我不希望后退按钮将它们带回Login,而没有他们明确地点击注销按钮。

So how should I handle that first Page Transition from LoginPage -> MainApp Page. 那么我应该如何处理来自LoginPage - > MainApp Page的第一页转换。

Is there an alternative way to have 2 Primary pages and swap between them? 有有2的另一种方式Primary它们之间页数和交换? Or is there a way to intercept the back button requests on MainAppPage and discard them? 或者有没有办法拦截MainAppPage上的后退按钮请求并丢弃它们?

Not finding an awful lot of info in the documentation regarding this, but it seems like a fairly standard requirement so possibly PEBKAC 没有在文档中找到关于此的大量信息,但它似乎是一个相当标准的要求,所以可能是PEBKAC

I just posted a quick sample on Github for this scenario. 我刚刚在Github上发布了一个针对此场景的快速示例。 The idea is that you want to initially navigate to your NavigationPage, then if necessary (meaning the user isn't already logged in), push the LoginPage modally. 这个想法是你想要最初导航到你的NavigationPage,然后在必要时(意味着用户尚未登录),以模态方式推送LoginPage。 Then, on successful Login, simply pop the LoginPage from the stack. 然后,在成功登录后,只需从堆栈中弹出LoginPage即可。 You can check out the sample here, https://github.com/jamesqquick/Xamarin-Forms-Login-Navigation/blob/master/ReadMe.MD 你可以在这里查看样本, https://github.com/jamesqquick/Xamarin-Forms-Login-Navigation/blob/master/ReadMe.MD

主页截图

I can think of at least two solutions. 我能想到至少两种解决方案。

One way is to create a MainAppPage first and within that page show Login Page as Modal. 一种方法是首先创建一个MainAppPage,然后在该页面中将Login Page显示为Modal。

Other would be to create a platform specific page, load Login Page and only upon successful login navigate to MainPage using platform specific navigation (LoginPage should be NoHistory or something like that to avoid going back) not Forms navigation (ie in Android both pages should be separate activities). 其他方法是创建一个特定于平台的页面,加载登录页面,并且只有在成功登录后才能使用特定于平台的导航导航到MainPage(LoginPage应该是NoHistory或类似的东西以避免返回)而不是表单导航(即在Android中两个页面都应该是单独的活动)。 This involves a bit more work since you have to deal with the three platforms but it shouldn't be much overhead. 这需要更多的工作,因为你必须处理这三个平台,但它不应该是太多的开销。

That said there is a better navigation supposedly coming with, hopefully, 1.3.0. 据说有一个更好的导航,希望是1.3.0。

This is what I have working on Android: 这就是我在Android上的工作:

protected override void OnCreate (Bundle bundle){
    base.OnCreate (bundle);

    string start = "new";
    Bundle extras = Intent.Extras;
    if (extras != null) {
        start = extras.GetString ("start");
    }

    if(start == "new"){
        SetPage (App.GetLoginPage (OnLoginCompleted));
    } else if (start == "login") {
        SetPage (App.GetMainPage (OnSignOutCompleted));
    }
}

void OnLoginCompleted(){
    // ...
    var refresh = new Intent (this, typeof(MainActivity));
    refresh.PutExtra ("start", "login");
    StartActivity (refresh);
    Finish ();
}
void OnSignOutCompleted(){/* mirrors OnLoginCompleted */ }

This is effectively an activity with a configurable landing page. 这实际上是一个具有可配置登录页面的活动。 In order to change to it we restart with a different setting. 为了更改它,我们使用不同的设置重新启动。 It's a tiny bit slower than navigating on my phone but only just noticeable. 它比在我的手机上导航要慢一点,但只是显而易见。

As Miha Markic said, a Modal window is a good option. 正如Miha Markic所说,Modal窗口是一个不错的选择。 One other thing you can also consider, especially if you want the login page to have the same Navigation Bar as your other pages, would be the same thing that I already posted about in the question URL below. 您还可以考虑另一件事,特别是如果您希望登录页面与其他页面具有相同的导航栏,则与我在下面的问题URL中发布的内容相同。

Basically, you would keep a reference to your NavigationPage in the App class (lets call it AppNavPage ), then, when showing your login page, you put your login page within a separate NavigationPage and do a PushAsync() with your new NavigationPage and login page. 基本上,你会在App类中保留对NavigationPage的引用(让我们称之为AppNavPage ),然后,在显示你的登录页面时,你将你的登录页面放在一个单独的NavigationPage ,并用你的新NavigationPage和登录做一个PushAsync()页。

Once the user logs in successfully, you just replace the current MainPage with your old NavigationPage using this code: Application.Current.MainPage = App.AppNavPage 一旦用户成功登录,您只需使用以下代码将当前MainPage替换为旧的NavigationPageApplication.Current.MainPage = App.AppNavPage

Check out the link below for better code examples. 请查看下面的链接以获取更好的代码示例。

https://stackoverflow.com/a/32382852/3850012 https://stackoverflow.com/a/32382852/3850012

I think the best way would be to Remove the LoginPage from the stack once you verify login, then it's not available any longer. 我认为最好的方法是在验证登录后从堆栈中删除LoginPage,然后它就不再可用了。

async void OnLoginButtonClicked (object sender, EventArgs e)
{
  ...
  var isValid = AreCredentialsCorrect (user);
  if (isValid) {
    App.IsUserLoggedIn = true;
    Navigation.InsertPageBefore (new MainPage (), this);
    await Navigation.PopAsync ();
  } else {
    // Login failed
  }
}

Provided that the user's credentials are correct, the MainPage instance is inserted into the navigation stack before the current page. 如果用户的凭据正确,则MainPage实例将在当前页面之前插入到导航堆栈中。 The PopAsync method then removes the current page from the navigation stack, with the MainPage instance becoming the active page. 然后,PopAsync方法从导航堆栈中删除当前页面,MainPage实例成为活动页面。

See full description here 在此处查看完整说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM