滚动时的技巧

    • 状态栏:24dp
    • 导航栏:在手机上为56dp ,在平板电脑和台式机上使用64dp
    • Flexible space: space to (accommodate a desired aspect ratio)适应所需的纵横比 for images or (extended app bars)扩展的应用程序栏.
      弹性区域:为了给扩展的应用程序栏或图片提供调节纵横比的区域
      为了适应应用程序栏伸缩时的所需的纵横比


    滚动技巧 - Scrolling techniques - 图2

    The standard app bar height is 56dp on mobile and 64dp on larger screen sizes. There are two options when it comes to scrolling.
    标准的应用程序栏在手机端的高度为56dp,在更大尺寸的屏幕上是64dp
    这里有两种不同的方式来实现滚动
    1.The app bar can (scroll off screen)滚动出屏幕 with the content and (come back)恢复 when the user (reverse- scrolls)反相滚动.
    1.应用程序栏可以随着内容的滚动褪出屏幕也可以在反向滚动时恢复原态
    2.The app bar can stay fixed at the top and let the content scroll under it.
    2.应用程序栏可以在它下面的内容滚动的时候在顶部保持不变

    The standard app bar can be extended to include (tabs)标签 or (a search box)一个搜索框. Using the blocks as a (mental model)工作模式 is helpful when determining确定,决定 the (scrolling behavior)滚动行为. In this case, you have two options:
    标准应用程序栏可以被扩大到容纳标签或一个搜索框。使用模块化的工作模式对实现滚动很有益
    你有两种实现方式:
    1.The (navigation bar)导航栏 scrolls off and the tab bar stays anchored固定 at the top.
    1.导航栏在滚动出屏幕的时候标签栏在顶部保持不动
    2.The app bars (stays in place)保持不变,固定不动 and the content scrolls under it.
    2.应用程序栏保持不动,下面的内容滚动

    滚动技巧 - Scrolling techniques - 图5

    To use images in the app bar, you can use flexible space to accommodate the desired aspect ratio. In this example, the aspect ratio is 4:3. When scrolling, the content pushes up the image so that the flexible space shrinks. The last 20% of the image’s flexible space is tinted with the primary color for the app.
    在应用程序栏中使用图片时,可以用弹性区域来调节所需的纵横比。在这个例子中,纵横比是4:3。当滚动时,图片被内容推到上方使弹性空间缩小了。剩余的20%的图片的弹性空间会被程序原本的颜色渲染