首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在appbar颤动下滑动页面

在appbar颤动下滑动页面,可以通过以下步骤实现:

  1. 首先,确保你的应用程序使用了一个可滚动的组件,例如ListView、GridView或CustomScrollView。这些组件允许页面内容超出屏幕高度,从而实现滚动效果。
  2. 在你的页面中,将AppBar组件放置在一个SliverAppBar或AppBar的上方。SliverAppBar是一个可滚动的AppBar,当页面滚动时,它可以收缩或展开。AppBar是一个固定的AppBar,不会随页面滚动而变化。
  3. 在你的页面中,将可滚动组件放置在一个CustomScrollView中。CustomScrollView是一个灵活的滚动容器,可以包含多个Sliver组件。
  4. 在CustomScrollView的slivers属性中,添加一个SliverAppBar组件。设置SliverAppBar的floating属性为true,这样当页面滚动时,AppBar会浮动在页面顶部。
  5. 在CustomScrollView的slivers属性中,添加一个SliverList或SliverGrid组件,用于显示页面的内容。这些组件可以包含任何你想要显示的小部件。

下面是一个示例代码,演示如何在appbar颤动下滑动页面:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scrollable Appbar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScrollableAppbarPage(),
    );
  }
}

class ScrollableAppbarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('Scrollable Appbar Demo'),
            floating: true,
            expandedHeight: 200,
            flexibleSpace: Placeholder(),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个CustomScrollView,其中包含一个SliverAppBar和一个SliverList。当页面滚动时,AppBar会浮动在页面顶部,而SliverList会显示100个列表项。

这是一个基本的实现方法,你可以根据自己的需求进行调整和扩展。希望对你有帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 掌握Flutter底部导航栏:畅游导航之旅

    我们将介绍如何创建基本的底部导航栏结构,自定义其外观,实现与页面的切换和状态管理,并探索一些高级功能,徽章、动画效果等。...在接下来的章节中,我们将深入探讨如何在Flutter中创建和定制底部导航栏,包括基本结构的构建、外观的定制、与页面的切换以及状态管理等方面的内容,帮助读者全面掌握底部导航栏的实现技巧与方法。 3....5.2 利用PageView实现页面滑动切换 另一种常见的底部导航栏与页面切换方式是利用Flutter提供的PageView组件,它可以实现页面滑动切换效果。...下面是一个示例,演示了如何利用PageView实现页面滑动切换: class MyBottomNavigationBar extends StatefulWidget { @override _...在实现底部导航栏与页面切换方面,我们介绍了两种常见的方法:使用IndexedStack和利用PageView。无论是静态页面切换还是动态滑动切换,都可以根据实际需求选择合适的方法来实现。

    36110

    导航栏还是侧栏?flutter 跨平台适配指南

    用户通常期望在导航栏中找到应用的标题和返回按钮,以及其他与当前页面相关的操作按钮。 侧栏: 侧栏通常位于屏幕的左侧,并可以通过从屏幕左侧滑动或点击侧边栏图标来打开。...平台设计规范:某些平台( iOS)更倾向于使用导航栏作为主要的导航方式,因此在遵循平台设计规范的情况,应优先考虑使用导航栏。 何时应该选择侧栏?...移动端使用:在大屏幕设备上,平板电脑和桌面电脑,侧栏可以提供更好的用户体验,但在小屏幕移动设备上(手机),需慎重考虑。...Flutter 中的导航栏与侧栏实现 如何在 Flutter 中实现导航栏? 在 Flutter 中,你可以使用 AppBar 组件来实现导航栏。...'), ), ), ); } } 如何在 Flutter 中实现侧栏?

    26310

    【Flutter】评级对话框组件

    这个库是最好的,因为它伴随着星级评价和联系,甚至可以滑动评级并发光以进行星级评价。之所以命名为“等级”对话框,是因为该库将识别您在颤动的星形图标上做出的手势以提供等级。...当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。...当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。 在此对话框中,您将看到我们将添加图像,标题,描述,星级,评论的textField和最后一个提交按钮。...Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.teal[50], appBar...: AppBar( backgroundColor: Colors.black, title: Text('Rating Dialog In Flutter'),

    4.1K50

    Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

    默认情况,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,而在Android上会出现微光效果。...默认情况,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,而在Android上会出现微光效果。...默认情况,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,而在Android上会出现微光效果。...ListView 和 GridView 都有对应的组合对象:SliverList 和 SliverGrid。...context) { return Material( child: CustomScrollView( slivers: [ // 跟随页面滑动的导航栏

    8.7K51

    Flutter 组件集录 | AppBar 组件 - 从源码中学习

    ---- _AppBarState 中需要处理滑动相关的监听的通知,如果不查阅源码,肯定不知道还有这回事。另外,反过来,我们也能学到:如何在一个状态类中,监听到滑动通知的事件。...有很多朋友都问过如何获组件的状态类对象,其实这里已经给出方案了:通过上下文,可以获取状态类,至于其中的 of 方法然后实现的,可以自己研究一。...AppBar 状态类中的滑动干了什么 下面问题来了,_AppBarState 要监听滑动做什么?在平时的滑动过程中似乎 AppBar 并没有什么和滑动相关的东西。...没用过 MaterialState ,那下面来演示一。...在阅读源码的过程中,这部分的处理看起来比较繁琐,如果不是研究主题对组件表现的作用,可以随便扫略一,了解即可。 ---- 4.

    1.1K30

    Flutter PageView 使用详细概述

    [在这里插入图片描述] PageView可用于Widget的整屏滑动切换,当代常用的短视频APP中的上下滑动切换的功能,也可用于横向页面的切换,APP第一次安装时的引导页面,也可用于开发轮播图功能...$page"); }); } [在这里插入图片描述] 当然在这里的Demo小编写成的是纵向的滑动这样的纵向滑动的一般是整屏视屏播放,然后上下滑动切换。...( appBar: AppBar( title: Text("PageView "), ), body: Container( height...: 200, child: PageView.builder( //当页面选中后回调此方法 //参数[index]是当前滑动到的页面角标索引 从0...= index; }, //值为flase时 显示第一个页面 然后从左向右开始滑动 //值为true时 显示最后一个页面 然后从右向左开始滑动

    4.3K00

    Flutter NestedScrollView实现的一个经典滑动折叠头部图片的效果

    Flutter NestedScrollView 滑动组件是用来处理复杂情况滑动应用场景,向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar...SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { return Scaffold( appBar...: new AppBar(title: Text(" 配制"),), /// 处理滑动 body: buildNestedScrollView(), ); } buildNestedScrollView...方法就是构建了一个滑动布局 NestedScrollView ,其中两部分,头部使用的是 SliverAppBar 来触发折叠效果, body 用来配置页面主体部分,代码如下: ///构建滑动布局...vsync: this); } 上述创建的 TabController 是绑定 TabBarView 与 TabBar 的联动的,当然 TabBar是配置在 SliverAppBar 中的 bottom 属性

    2.7K11

    Flutter实现页面切换后保持原页面状态的3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,...它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍何在flutter中实现类似喜马拉雅的导航效果...@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('demo...@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('demo...child: TabBarView( children: tabBarViewList, // physics: NeverScrollableScrollPhysics(), // 禁止滑动

    2.8K30

    flutter |悬浮窗解决方案 flutter_floating

    特性 全局的悬浮窗管理机制 支持各项回调监听,移动、按下等 支持自定义是否保存悬浮窗的位置信息 支持单页面及全局使用,可插入 N 个悬浮窗 支持自定义禁止滑动区域,例如在 距离顶部 50 到底部的区域内滑动等...isShowLog 属性控制,不同的悬浮窗 Log 会通过不同 key 显示出来 I/flutter (24648): Floating_Log 1 : 按 X:0.0 Y:150.0 I/flutter...单悬浮窗创建 单悬浮窗可用于某个页面中,页面退出后关闭即可。 class CustomPage extends StatefulWidget { const CustomPage({Key?...floating.open(); } @override Widget build(BuildContext context) { return Scaffold( appBar...: AppBar( title: const Text("功能页面"), ), body: Container(), ); } @override

    1.7K30

    Flutter | Slivers 系列

    概述 CustomScrollView:一个滚动的容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动的列表, Appbar, 列表,网格...接着我们来看一都有哪些特殊效果吧 特殊效果 floating SliverAppBar( title: Text("Sliver AppBar"), floating: true, ) 复制代码...在向下滑动的时候,会首先将 SliveAppbar 显示出来,如下: pinned :一直显示在顶部,无视滑动,这样就和普通的导航栏差不多了。...区别就是在滑动的时候 SliveAppbar 的底部会有一点点影子 snap:在滑动停止之后,导航会自动全部显示出来,需要注意的是必须搭配 floating 一起使用,如下: SliverAppBar...详情页面 class DetailPage extends StatelessWidget { final Member member; DetailPage(this.member);

    1.5K11

    【Flutter】堆叠式卡轮播

    作为移动应用程序开发人员,我们有时需要制作滑动的,动画的背景图像轮播。但是,有时候,我们需要制作一张滑动卡片传送带,其中包含一些具有各种背景颜色,图像或渐变的信息。...下面的演示视频显示了如何在Flutter中创建带有垂直旋转木马的堆叠卡。它显示了在您的flutter应用程序中如何使用「stacked_card_carousel」软件包来使用堆叠式卡轮播。...然后在stacked_card_demo页面上调用该卡。...当用户仅以垂直轮播格式向上滑动时,所有卡都将重叠并堆叠到另一个称为堆叠卡轮播中;当用户以垂直格式向下滑动所有向上的卡时,所有卡都将回到原始位置。...当我们运行应用程序时,我们应该获得屏幕的输出,屏幕下方的截图所示。

    4K30

    Flutter开发(15)- 路由导航

    abstractclass Route { } 事实上MaterialPageRoute并不是Route的直接子类: MaterialPageRoute在不同的平台有不同的表现 对Android平台,打开一个页面会从屏幕底部滑动到屏幕的顶部...,关闭页面时从顶部滑动到底部消失 对iOS平台,打开一个页面会从屏幕右侧滑动到屏幕的左侧,关闭页面时从左侧滑动到右侧消失 当然,iOS平台我们也可以使用CupertinoPageRoute MaterialPageRoute...方法一:自定义返回的按钮(在详情页中修改Scaffold的appBarappBar: AppBar( title: Text("详情页"), leading: IconButton( icon: Icon...在这种情况,我们可以使用命名路由(named route) 命名路由是将名字和路由的映射关系,在一个地方进行统一的管理 有了命名路由,我们可以通过Navigator.pushNamed() 方法来跳转到新的页面...: AppBar( title: Text("错误页面"), ), body: Container( child: Center( child: Text("页面跳转错误"), ), ), ); } }

    98520

    《前端实战总结》如何在不刷新页面的情况改变UR

    背景介绍 由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求操作并不会触发浏览器url的变化,这样虽然也能正常请求数据并渲染到页面,但是如果用户在当前页面操作了某个get请求并得到了某条数据...(单纯使用ajax或者fetch实现get请求时) 当我们在该页面将列表切换到第二页时,浏览器url并没有变化,所以将链接复制给其他人打开并不会将列表结果切换到第二页,而是重新初始化。...history API Window.history是一个只读属性,用来获取History 对象的引用,History 对象提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面...注意,调用 pushState() 后浏览器并不会立即加载这个URL,但可能会在稍后某些情况加载这个URL,比如在用户重新打开浏览器时。新URL不必须为绝对路径。...接下来我们就可以监听浏览器url的变化,如果浏览器url有需要的请求参数,那么我们就根据请求参数来请求数据,没有就初始化页面,这样当我们查看某条记录或者某个小秘密时,想把该数据保存下来并分享给被人,是不是就可以实现了呢

    1.5K20
    领券