Flutter 侧边栏的使用,打开和关闭

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter 侧边栏的使用,打开和关闭相关的知识,希望对你有一定的参考价值。

参考技术A 在网上好多方法 但是有些点没有讲到
简单的说就是在 Scaffold 添加 Drawer

这个AppBarUtil.getAppBar 是我自己创建的方法 当初因为自定义的按钮所以找了一些时间怎么打开和关闭

不过如果不是自定义 的appBar 应该直接就会显示不会出现需要调用打开方法的情况

Angular/Bootstrap - 带有可切换侧边栏的导航栏

【中文标题】Angular/Bootstrap - 带有可切换侧边栏的导航栏【英文标题】:Angular/Bootstrap - Navbar with toggleable sidebar 【发布时间】:2019-07-07 00:41:35 【问题描述】:

我正在尝试使用 Angular 和 Bootstrap 构建一个渐进式网络应用程序。最具挑战性的部分是实现一个在网络和移动视图上看起来都不错的导航栏。到目前为止,我对我的实现非常满意。请参阅Stackblitz上的链接

但是现在我试图将导航栏切换为侧边栏,从右到左打开。此外,侧边栏应将内容(占位符文本)推到左侧。这可能有点困难,因为这可能意味着修改一些 Bootstrap 类。也许你们中的一些人对此有解决方案。目前我的导航栏切换下面的链接。

html

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="navbar-brand d-none d-md-block" href="javascript:void(0)">
        <img  src="https://..."  >
        My Brand
      </a>
    </li>
  </ul>

  <ul class="navbar-nav mr-auto mr-md-3">
    <li class="nav-item">
      <a class="nav-link font-weight-bold" href="javascript:void(0)">Stories</a>
    </li>
  </ul>

    <ul class="navbar-nav mr-auto mr-md-3">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">
          <span>
            <img class="rounded" src="https://..."   >
            <span class="d-none d-lg-inline">&nbsp; Tommy</span>
          </span>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link font-weight-bold" href="javascript:void(0)">
          <div class="img-container" (click)="notificationsViewed = true">
            <img  src="https://..." >
            <span [hidden]="notificationsViewed" class="badge badge-danger notifications-count">3</span>
          </div>
        </a>
      </li>
    </ul>

  <button class="navbar-toggler" (click)="toggleNavbar()" type="button" [attr.aria-expanded]="!isCollapsed">
    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>
  </button>

  <div class="collapse navbar-collapse" [ngClass]=" 'show': isCollapsed ">

    <ul class="navbar-nav float-right ml-auto">
      <li class="nav-item">
        <a class="nav-link font-weight-bold" href="javascript:void(0)">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link font-weight-bold"href="javascript:void(0)">Policy</a>
      </li>
      <li class="nav-item">
        <a class="nav-link font-weight-bold" href="javascript:void(0)">Contact</a>
      </li>
      <li class="nav-item">
        <button (click)="logout()" class="btn btn-bd-logout">
          Logout
        </button>
      </li>
    </ul>

  </div>
</nav>

打字稿

  public isCollapsed: boolean = false;

  toggleNavbar() 
    this.isCollapsed = !this.isCollapsed;
  

【问题讨论】:

【参考方案1】:

第二部分我没看懂侧边栏应该把内容(Placeholder-Text)推到左边。

但对于 Sidebar 的第一部分,请尝试使用 Angular Material Navigation Option:

Angular Material Sidenav

【讨论】:

以上是关于Flutter 侧边栏的使用,打开和关闭的主要内容,如果未能解决你的问题,请参考以下文章

为啥侧边栏的图标有的是没有的

把企业微信侧边栏的 JS-SDK 封装了,还加上了所有 TS 类型

Angular/Bootstrap - 带有可切换侧边栏的导航栏

如何修改你的VScode的侧边栏的字体大小(MAC)

切换侧边栏时如何在导航栏中移动/动画文本值

Vue.js - 使用 vuex 打开/关闭动态侧边栏思想不同的组件(导航栏到侧边栏)