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

SliverAppBar在小部件测试中不浮动

SliverAppBar是Flutter框架中的一个小部件,用于创建一个可滚动的应用栏。它通常与CustomScrollView一起使用,以实现复杂的滚动效果。

在小部件测试中,SliverAppBar默认情况下是不浮动的。这是因为小部件测试是在一个静态的环境中进行的,没有实际的滚动行为。因此,SliverAppBar不会根据滚动位置来改变其行为。

如果你想在小部件测试中模拟SliverAppBar的浮动行为,你可以使用Flutter的测试工具包中的Scrollable.ensureVisible方法。这个方法可以将指定的小部件滚动到可见区域,从而触发SliverAppBar的浮动效果。

以下是一个示例代码,演示了如何在小部件测试中模拟SliverAppBar的浮动行为:

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

void main() {
  testWidgets('Test SliverAppBar floating behavior', (WidgetTester tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                floating: true,
                title: Text('My App Bar'),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return ListTile(
                      title: Text('Item $index'),
                    );
                  },
                  childCount: 20,
                ),
              ),
            ],
          ),
        ),
      ),
    );

    // Scroll the list to make the SliverAppBar float
    await tester.ensureVisible(find.text('Item 19'));

    // Verify that the SliverAppBar is floating
    expect(find.text('My App Bar'), findsOneWidget);
    expect(tester.widget<SliverAppBar>(find.byType(SliverAppBar)).pinned, isFalse);
  });
}

在这个示例中,我们创建了一个包含SliverAppBar和SliverList的CustomScrollView。我们使用floating: true属性将SliverAppBar设置为浮动。然后,我们使用ensureVisible方法将列表滚动到最后一个项目,以触发SliverAppBar的浮动效果。最后,我们使用expect断言来验证SliverAppBar是否成功浮动。

需要注意的是,这只是一个示例,实际的测试场景可能会更加复杂。你可以根据自己的需求进行调整和扩展。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种计算场景。详情请参考腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。详情请参考腾讯云对象存储

希望以上信息能对你有所帮助!

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

相关·内容

Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

以上的效果图把 SliverFillRemaining 换成列表 SliverFixedExtentList 效果可能会更加明显,这边给小伙伴自己替换测试吧。...SliverToBoxAdapter 还记得上节最后的代码,有使用 SliverToBoxAdapter 这个部件吗,这个部件只需要传入一个 child 属性。...因为 CustomScrollView 只允许传入 Sliver 部件,那么类似 Container 等普通部件就不可以使用了,那么这样就需要更多的 Sliver 组件才能完成视图,所以为了方便,直接通过...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部的部件 SliverPersistentHeader,这个部件可以根据滚动的距离缩小高度,有点类似 SliverAppBar...接着请注意代码的那段 assert 的文字 糟透了的翻译 X 5:sliverOverlapAbsorberHandleFor 传入的参数 context 必须包含 NestedScrollView

2.2K30
  • flutter 起步

    比如 Navigator.pushNamed(context, '/');当部件WidgetStatelessWidget.build函数被返回时,这个部件会成为父部件。...所以这意味着StatelessWidget.build方法的context和函数内部部件Widegt的context不是同一个上下文。所以它们两个不同上下文能够调用的方法是有区别的。... Material 设计定义的单个界面上的各种布局元素, Scaffold 中都支持。Scaffold 有下面几个主要属性:appBar - 显示界面顶部的一个 AppBar。...elevation → double - 控件的 z 坐标顺序,默认值为 4,对于可滚动的 SliverAppBar,当 SliverAppBar 和内容同级的时候,该值为 0, 当内容滚动 SliverAppBar...flexibleSpace → Widget - 一个显示 AppBar 下方的控件,高度和 AppBar 高度一样,可以实现一些特殊的效果,该属性通常在 SliverAppBar 中使用。

    4.5K20

    6详解AppBar小部件

    它可用于容纳搜索字段、以及页面之间导航的按钮,或者只是页面标题。由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。...本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。 以下是我们将介绍的内容: Flutter 的 AppBar 是什么?...它通常位于屏幕顶部,并且能够在其布局包含其他小部件。AppBar 通常显示概括本页的功能模块,例如图标和标题,并且通常包含按钮或其他用户交互点。...Flutter AppBar 布局 leading leading 接受一个小部件,可以分配任何东西——文本、图标,甚至一行的多个小部件。...用来 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件的 z 坐标顺序,默认值 4,对于可滚动的 SliverAppBar,当 SliverAppBar

    16.4K10

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

    本节是使用 NestedScrollView 结合 SliverAppBar 与 TabBar 、TabBarView 实现的折叠头部效果undefined 【x1】微信公众号的每日提醒 随时随记...主体部分 body: buildTabBarView(), ); } [在这里插入图片描述] body对应的是页面主体部分,使用 TabBarView 装载了三个 Widget ,当然实际应用场景...SliverAppBar 的 bottom 属性下,通过 buildTabBar 方法来封装的, 代码如下: TabBar buildTabBar() { return TabBar(...SliverAppBar 的 flexibleSpace 属性配置的,当然就是使用了 FlexibleSpaceBar,代码如下: String imageUrl = "https://timgsa.baidu.com...width: 400, ), ), ], ), ), ); } *** 完毕 当然 以编的性格

    2.7K11

    Flutter SliverAppBar全解析,你要的效果都在这了!

    先来简单看下部分效果图: 本文内容可能有点多,但是都很简单,配上效果图味道更佳~ 什么是SliverAppBar SliverAppBar 类似于Android的CollapsingToolbarLayout...图标主题 this.actionsIconTheme,//action图标主题 this.textTheme,//文字主题 this.primary = true,//是否显示状态栏的下面...要加载本地图片,还需要在pubspec.yaml 文件配置一下 assets: - images/a.jpg 修改flexibleSpace flexibleSpace...添加TabBar SliverAppBar的bottom属性添加TabBar,直接改造源码的例子 var _tabs = []; _tabs = [...关于TabBar的使用可以看这篇:https://blog.csdn.net/yechaoa/article/details/90482127 ok,以上的效果基本满足日常开发需求了,也可以自己改改属性测试效果

    2.6K30

    Flutter | Slivers 系列

    最主要的原因就是可以 slives 添加多个组件,如在列表的上面和下面添加更多的内容。... SliverPrototypeExtentList ,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕上,在运行的过程,Flutter 会将原型的尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型的尺寸... slivers 系列SliverAppbar 可以说是使用频率比较高的组件了,SliverAppbar 为应用栏提供了自定义滚动行为,下面我们来看一下 class _MyHomePageState...,并没有实现任何特殊效果,默认的效果如下: 可以看到滑动的过程SliverAppbar 被顶上去了,这也是非常正常的。...区别就是滑动的时候 SliveAppbar 的底部会有一点点影子 snap:滑动停止之后,导航会自动全部显示出来,需要注意的是必须搭配 floating 一起使用,如下: SliverAppBar

    1.5K11

    毛刺的危害及常见去毛刺方法技巧整理

    工业生产中,零部件由于生产工艺存在的问题,可能存在各种不同类型的毛刺。毛刺的危害很大,直接影响零件的检测、装配、使用性能、工作寿命,对密封件、轴承、齿轮、液压元件等零部件正常运行带来极大的影响。...2、产品装置程序因为具有毛刺,导致构造之间滑润,出现卡住的现象。尤其是自动设备上特别关键。 3、有些电气设施在工作因为毛刺的掉下而造成电路的短路,损坏设施。...1、机器人浮动去毛刺。...将零件与磨料一同放入封闭的滚筒滚筒转动的过程,动态扭矩传感器、零件与磨料一起产生磨削,去除毛刺。磨料可以用石英砂、木屑、氧化铝、陶瓷以及金属环等等。 4、高温去毛刺。...化学去毛刺是利用化学能进行加工,化学离子会附着零件表面,形成电阻大、电导率的膜层,保护工件不受到腐蚀,而毛刺由于高出表面,可以通过化学作用去除掉毛刺。

    93320

    Kivy 5种常用图形界面布局初探

    它就像人体的骨骼、房屋的钢筋混凝土梁架,支撑起整个图形界面、条理好各个小部件的位置。 Web 开发的前端 CSS ,最常见的有栅格布局、绝对布局和相对布局。... Python 的 PyQt5 ,州的先生比较常使用的时网格布局、垂直布局和水平布局。 而 Kivy 也提供了不少的布局方式,供我们使用 Kivy 开发跨平台的图形界面程序时使用。 ?...浮动布局 浮动布局,小部件基本上不受限制,浮动布局。我们通过设置小部件的大小和位置,来自由地控制布局内的小部件。 ?...相对布局 RelativeLayout 相对布局和浮动布局类似,但是浮动布局内的小部件是基于布局层的绝对定位,而相对布局使用的则是相对定位。 ?...网格布局 网格布局GridLayout各类图形界面开发中都是很常用的布局层。通过行和列的设置,它可以灵活地自适应地控制小部件布局层的位置。

    3.6K10

    建造一个人造大脑,现在就可以

    上述基础部件已经都有了简单的硅基版本。这就是金属-氧化物半导体场效应管,简称MOSFET。这一元件已被用于现代数字处理器,制造了数十亿逻辑电路。 这些装置与神经元有很多共同点。...当MOSFET工作“亚阈值”模式时,也就是低于控制数字开关的电压时,流过器件的电流非常,不到典型数字逻辑门开关中的千分之一。...STLS1994年发布,并成为工程师建造现代模拟电路(例如物理神经网络)的重要工具。神经网络,每个节点具有与其关联的权重,这些权重决定了如何组合来自不同节点的数据。...普通的MOSFET,门通过载流通道控制电流。浮栅晶体管具有位于该电门和通道之间的第二栅极。该浮动直接接地或任何其他组件。 由于通过高质量硅绝缘体接口增强的电隔离,电荷长时间停留在浮动栅极。...由于浮动栅极存储器可在很宽的范围内编程,与很多纳米器件相比,可以更容易地进行微调,以补偿器件与器件之间的制造差异。一些试图将纳米器件集成到设计的神经元研究小组,最近正在使用浮动栅极器件。

    69750

    Flutter 创建可拖动的浮动操作按钮

    Flutter 允许您使用FloatingActionButton小部件添加浮动操作按钮。但是,它不允许您拖动按钮。如果你想让它可拖动怎么办。...本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围的任何位置。 创建可拖动的浮动操作按钮 我们将为这样的小部件创建一个类。...一个浮动的动作按钮通常可以点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 的参数作为参数。...所以,我们可以检查内部onPointerUpcallback 仅onPressed值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮的类。...您需要向父小部件添加一个键并将其传递给DraggableFloatingActionButton小部件从key,你可以从currentContext属性获取RenderBox,它有findRenderObject

    5.7K10

    Flutter可滑动组件

    Android,我们可以使用ListView或RecyclerView来实现,Ios,我们可以通过UITableView来实现。...Flutter,我们也有对应的列表Widget,就是ListView。 注意:Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动的视图。...Flutter我们可以使用GridView来实现,使用方式和ListView也比较相似。...对可滑动组件懒加载的原理进行简单归纳后,可总结如下: SliverChildListDelegatechildren是创建视图是传入的一组明确的Widget,展示前这组Widget便已存在;而SliverChildBuilderDelegate...该回调可以返回一个布尔值,代表是否阻止该事件继续向上冒泡,如果为true时,则冒泡终止,事件停止向上传播,如果返回或者返回值为false 时,则冒泡继续。

    7.2K30

    Python Qt GUI设计:UI界面可视化组件、属性概述(基础篇—3)

    sizePolicy属性 sizePolicy属性用于说明组件布局管理的缩放方式,当部件没有布局管理器时,该设置无效。...如果组件布局管理器,且布局管理器也设置了最小尺寸,则部件本身的最小尺寸以部件的mimimumSize为准,布局管理器设置的不起作用。...启用的情况下,对应部件只接收在鼠标移动同时至少一个鼠标按键按下时的鼠标移动事件,启用鼠标跟踪的情况下,任何鼠标移动事件部件都会接收。...toolTip属性 toolTip属性设置组件的toolTip提示信息,toolTip提示信息鼠标放到控件上会浮动出一个框显示提示信息。...styleSheet属性 styleSheet属性是定义组件外观的属性样式表,QtstyleSheet样式表是类似于html的css样式一样的方法,只是专门为Qt部件开发的。

    5.7K50
    领券