首页
学习
活动
专区
工具
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。无论是静态页面切换还是动态滑动切换,都可以根据实际需求选择合适的方法来实现。

19010

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

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

16610

【Flutter】评级对话框组件

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

4K50

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.1K00

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 |悬浮窗解决方案 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.6K30

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.4K11

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.5K30

【Flutter】堆叠式卡轮播

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

3.9K30

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("页面跳转错误"), ), ), ); } }

96520

【Flutter 专题】图解 ListView 下拉刷新与上拉加载 (二)

但列表数据的加载也绝非一种,和尚这次准备用原生尝试一。因为种种原因,和尚这次的整理距离上次时间很长,还是应该加强自控力。...@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(...NotificationListener 中可以根据如下状态进行判断,并在相应的状态进行需要的处理: (notification.metrics.extentAfter == 0.0) 为滑动到 底部...和尚在测试过程中每次滑动列表都会调用一次接口,因为在监听过程中若不做任何处理只要列表滑动便会进行监听,和尚的解决的方式有两种; 监听滑动到底部再进行业务操作调用接口,问题一中的判断; bool dataNotification...和尚以前对列表的处理只包括列表数据为 0 时展示 Loading 等待页,有数据时展示数据列表,但是对于其他异常情况没有处理,这次特意添加上异常页面,这仅仅是业务方面的添加,没有新的技术点。 ?

99821

6详解AppBar小部件

AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。...由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...AppBar 标题图片 默认情况title,根据 Material 指南与 AppBar 的左侧对齐。...工具栏包含文字,图标,按钮,和其他任何公司的前景,除了小部件,Container和Image。...如果你已经做到了这一步,你现在应该明白: AppBar 是什么以及它如何在 Flutter 中使用 AppBar 的布局 ( leading, title, 和actions) 如何自定义 AppBar

16.3K10
领券