Xamarin Forms Shell导航栏特定视图添加可切换右侧文本咨询

核心思路 #

借助Shell的导航栏动态配置能力，结合TabView的选中事件，仅在目标ContentView激活时显示右侧文本，并随标签切换更新内容；其他视图激活时隐藏该文本。

具体实现步骤 #

• 步骤1：在Shell中定义可绑定的导航栏控制属性
  在你的Shell子类中添加两个可绑定属性，分别控制右侧文本内容和显示状态：

  public static readonly BindableProperty RightNavBarTextProperty =
      BindableProperty.Create(nameof(RightNavBarText), typeof(string), typeof(YourShell), string.Empty);
  
  public string RightNavBarText
  {
      get => (string)GetValue(RightNavBarTextProperty);
      set => SetValue(RightNavBarTextProperty, value);
  }
  
  public static readonly BindableProperty IsRightTextVisibleProperty =
      BindableProperty.Create(nameof(IsRightTextVisible), typeof(bool), typeof(YourShell), false);
  
  public bool IsRightTextVisible
  {
      get => (bool)GetValue(IsRightTextVisibleProperty);
      set => SetValue(IsRightTextVisibleProperty, value);
  }
  

  接着在Shell的XAML中配置TitleView，绑定上述属性：

  <Shell.TitleView>
      <Grid HorizontalOptions="FillAndExpand">
          <Label Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="Center"/>
          <Label Text="{Binding RightNavBarText, Source={RelativeSource AncestorType={x:Type local:YourShell}}}" 
                 HorizontalOptions="End" VerticalOptions="Center" 
                 IsVisible="{Binding IsRightTextVisible, Source={RelativeSource AncestorType={x:Type local:YourShell}}}"/>
      </Grid>
  </Shell.TitleView>
  

• 步骤2：在目标ContentView中监听TabView选中事件
  在包含TabView的ContentView的XAML中绑定选中事件：

  <toolkit:TabView SelectedIndexChanged="TabView_SelectedIndexChanged">
      <toolkit:TabViewItem Header="月视图">
          <local:MonthContentView/>
      </toolkit:TabViewItem>
      <toolkit:TabViewItem Header="周视图">
          <local:WeekContentView/>
      </toolkit:TabViewItem>
      <toolkit:TabViewItem Header="日视图">
          <local:DayContentView/>
      </toolkit:TabViewItem>
  </toolkit:TabView>
  

  然后在代码后台处理选中事件，更新Shell的属性：

  private void TabView_SelectedIndexChanged(object sender, EventArgs e)
  {
      var shell = (YourShell)Application.Current.MainPage;
      var tabView = (TabView)sender;
      switch (tabView.SelectedIndex)
      {
          case 0:
              shell.RightNavBarText = "月";
              shell.IsRightTextVisible = true;
              break;
          case 1:
              shell.RightNavBarText = "周";
              shell.IsRightTextVisible = true;
              break;
          case 2:
              shell.RightNavBarText = "日";
              shell.IsRightTextVisible = true;
              break;
          default:
              shell.IsRightTextVisible = false;
              break;
      }
  }
  

• 步骤3：处理ContentView的显示/隐藏状态
  在ContentView的生命周期事件中控制文本显示，确保切换到其他Flyout页面时隐藏文本：

  protected override void OnAppearing()
  {
      base.OnAppearing();
      var shell = (YourShell)Application.Current.MainPage;
      shell.IsRightTextVisible = true;
      UpdateRightText();
  }
  
  protected override void OnDisappearing()
  {
      base.OnDisappearing();
      var shell = (YourShell)Application.Current.MainPage;
      shell.IsRightTextVisible = false;
  }
  
  private void UpdateRightText()
  {
      var shell = (YourShell)Application.Current.MainPage;
      switch (tabView.SelectedIndex)
      {
          case 0:
              shell.RightNavBarText = "月";
              break;
          case 1:
              shell.RightNavBarText = "周";
              break;
          case 2:
              shell.RightNavBarText = "日";
              break;
      }
  }
  

MVVM模式下的替代实现 #

如果项目采用MVVM，可以将Shell的属性绑定到ViewModel：

1. 在ViewModel中添加RightNavBarText和IsRightTextVisible属性，实现INotifyPropertyChanged接口。
2. Shell的TitleView直接绑定到ViewModel的对应属性。
3. TabView的选中事件通过Command触发ViewModel中属性的更新，避免直接引用Shell实例，实现解耦。

内容的提问来源于stack exchange，提问作者Higor Pereira