如何在外壳弹出型按钮中将页面设置为仅在登录后加载

Question

我正在尝试创建一个弹出菜单，标题中有登录用户的个人资料图片。我使用一个api来获取配置文件图片的url，但这要等到用户登录后才能实现

使用AppShell，弹出型按钮内容似乎是在应用程序运行后立即创建的，因此它无法获得配置文件图片所需的数据。我尝试绑定到IsLogged属性(但不确定我是否正确实现了它(，但即使IsLogged为false，它似乎仍然在页面上运行代码。

如果用户已登录，我如何才能使此标题部分仅尝试获取图片？

AppShell.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:fontAwesome="clr-namespace:FontAwesome"
xmlns:local="clr-namespace:DOTS.Views"
xmlns:controls="clr-namespace:DOTS.Controls"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Title="DOTS"
x:Class="DOTS.AppShell">
<Shell.FlyoutHeader>
<controls:FlyoutHeader IsVisible="{Binding IsLogged}"/>
</Shell.FlyoutHeader>
<!-- Login/Start Page -->
<ShellItem Route="LoginPage" FlyoutItemIsVisible="False">
<ShellContent ContentTemplate="{DataTemplate local:LoginPage}"/>
</ShellItem>

AppShell.xam.cs

public partial class AppShell : Shell
{

public AppShell()
{
InitializeComponent();
BindingContext = this;
}
public bool IsLogged
{
get => (bool)GetValue(IsLoggedProperty);
set => SetValue(IsLoggedProperty, value);
}
public static readonly BindableProperty IsLoggedProperty =
BindableProperty.Create("IsLogged", typeof(bool), typeof(AppShell), false, propertyChanged: IsLogged_PropertyChanged);
private static void IsLogged_PropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
if ((bool) newValue)
Shell.Current.GoToAsync($"//{nameof(MainPage)}");
else
Shell.Current.GoToAsync($"//{nameof(LoginPage)}");
}

FlyoutHeader.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DOTS.Controls.FlyoutHeader">
<ContentView.Content>
<Grid BackgroundColor="White">
<ImageButton x:Name="ProfilePic" WidthRequest="80" HeightRequest="80" CornerRadius="40"  HorizontalOptions ="Center" Clicked ="UpdateProfile_Clicked" />
</Grid>
</ContentView.Content>

FlyoutHeader.xaml.cs

namespace DOTS.Controls
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class FlyoutHeader : ContentView
{
public FlyoutHeader()
{
InitializeComponent();
GetProfilePic();
}
public void GetProfilePic()
{
ProfilePic.Source = (string)Application.Current.Properties["picUrl"];
//This value is set upon login
}
}
}

Answer 1

在您的AppShell中，当IsLogged值更改为true时，调用GetProfilePic()方法：

public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
BindingContext = this;
}
public bool IsLogged
{
get => (bool)GetValue(IsLoggedProperty);
set => SetValue(IsLoggedProperty, value);
}
public static readonly BindableProperty IsLoggedProperty =
BindableProperty.Create("IsLogged", typeof(bool), typeof(AppShell), false, propertyChanged: IsLogged_PropertyChanged);
private static async void IsLogged_PropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
if ((bool) newValue)
{
await Shell.Current.GoToAsync($"//{nameof(MainPage)}");
(Current.FlyoutHeader as FlyoutHeader)?.GetProfilePic();
}
else
await Shell.Current.GoToAsync($"//{nameof(LoginPage)}");
}

在FlyoutHeader.xaml.cs中，对IsLogged:进行测试

namespace DOTS.Controls
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class FlyoutHeader : ContentView
{
public FlyoutHeader()
{
InitializeComponent();
GetProfilePic();
}
public void GetProfilePic()
{
if ( (Shell.Current as AppShell).IsLogged)
ProfilePic.Source = (string)Application.Current.Properties["picUrl"];
//This value is set upon login
}
}
}