Xamarin自定义导航栏：仅让继承NavigationSearchPage的页面显示搜索栏

我来帮你搞定这个问题！要实现只有继承自NavigationSearchPage的页面才显示导航栏里的搜索栏，咱们可以从页面类型判断、条件渲染这几个核心方向入手，给你几个具体的可落地方案：

方案1：在导航栏组件中直接判断页面类型 #

不管你用的是前端框架（React/Vue/Blazor）还是后端渲染（ASP.NET MVC等），核心思路都是获取当前页面的实例，判断它是否属于NavigationSearchPage的子类/实例，再决定是否渲染搜索栏。

举几个不同技术栈的例子： #

• Blazor 示例：

  @* 导航栏组件代码 *@
  <nav class="navbar">
      <!-- 其他导航链接 -->
      <a href="/">首页</a>
      <a href="/about">关于我们</a>
  
      <!-- 仅当当前页面是NavigationSearchPage的实例时显示搜索栏 -->
      @if (Component is NavigationSearchPage)
      {
          <div class="search-container">
              <input type="text" placeholder="输入关键词搜索..." />
              <button>搜索</button>
          </div>
      }
  </nav>
  

• React 示例：
  可以通过路由元信息给继承页面标记标识，再在导航栏中读取判断：

  // 路由配置时给继承页面添加meta
  const routes = [
      { path: '/', component: HomePage },
      { path: '/search-page', component: MySearchPage, meta: { showSearch: true } },
      // 其他继承自NavigationSearchPage的页面都加上这个meta
  ];
  
  // 导航栏组件中判断
  import { useRouteMatch } from 'react-router-dom';
  
  function Navbar() {
      const { meta } = useRouteMatch();
      return (
          <nav className="navbar">
              {/* 其他导航项 */}
              {meta?.showSearch && (
                  <div className="search-bar">
                      <input placeholder="搜索..." />
                  </div>
              )}
          </nav>
      );
  }
  

方案2：在基类中统一定义搜索栏渲染逻辑 #

你可以在NavigationSearchPage基类中封装搜索栏的渲染方法，然后在导航栏中仅当当前页面是该基类的实例时，调用这个方法渲染：

ASP.NET MVC 示例： #

// 在NavigationSearchPage基类中
public abstract class NavigationSearchPage : Controller
{
    public virtual IHtmlContent RenderSearchBar()
    {
        return new HtmlString(@"
            <div class='search-bar'>
                <input type='text' placeholder='搜索内容...' />
                <button type='submit'>搜索</button>
            </div>
        ");
    }
}

// 在导航栏布局页(_Layout.cshtml)中
@{
    var currentPage = ViewContext.Controller as NavigationSearchPage;
}
<nav class="navbar">
    <!-- 其他导航内容 -->
    @if (currentPage != null)
    {
        @currentPage.RenderSearchBar()
    }
</nav>

方案3：通过CSS类控制显示隐藏 #

这种方式更轻量化，给所有继承自NavigationSearchPage的页面统一添加一个标识类，再用CSS控制搜索栏的显示：

1. 在基类中添加页面标识类：

   // 比如在Blazor的基类OnInitialized方法中
   public class NavigationSearchPage : ComponentBase
   {
       protected override void OnInitialized()
       {
           base.OnInitialized();
           // 给页面根元素添加类
           BodyClass += " has-search-bar";
       }
   }
   

2. CSS中控制搜索栏显示：

   /* 默认隐藏搜索栏 */
   .navbar .search-bar {
       display: none;
   }
   
   /* 当页面根元素有has-search-bar类时，显示搜索栏 */
   .has-search-bar .navbar .search-bar {
       display: flex;
   }
   

最后提醒下：如果已经做了导出设置，要确保NavigationSearchPage的类型能被导航栏正确识别，比如检查命名空间是否一致、基类的访问权限是否为公开，避免类型判断时出现null的情况。

内容的提问来源于stack exchange，提问作者M.Cuijl