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

Flutter -小部件不能在NestedScrollView中滚动

Flutter是一种跨平台的移动应用开发框架,由Google开发和维护。它使用Dart编程语言,可以同时在iOS和Android平台上构建高性能、美观的原生应用。

在Flutter中,小部件(Widget)是构建用户界面的基本单元。小部件可以是简单的按钮、文本或图像,也可以是复杂的列表、表单或动画。NestedScrollView是一个可以嵌套滚动的小部件,它允许在一个滚动视图中嵌套另一个滚动视图。

然而,由于NestedScrollView的实现机制,它的子小部件默认情况下不能在其中滚动。这是因为NestedScrollView的子小部件被包裹在SliverAppBar和SliverPersistentHeader中,这些小部件会占据NestedScrollView的滚动空间,导致子小部件无法滚动。

解决这个问题的方法是使用SliverList或SliverGrid作为NestedScrollView的子小部件,而不是直接将子小部件放在NestedScrollView中。这样,子小部件就可以在NestedScrollView中滚动了。

推荐的腾讯云相关产品是腾讯云移动开发套件(https://cloud.tencent.com/product/mobdevsuite),它提供了丰富的移动开发工具和服务,包括云端一体化开发环境、移动应用测试、移动应用分析等,可以帮助开发者更高效地构建和管理Flutter应用。

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

相关·内容

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

SliverToBoxAdapter 还记得上节最后的代码,有使用 SliverToBoxAdapter 这个部件吗,这个部件只需要传入一个 child 属性。...不过 Flutter 也提供了专门的部件 SliverPadding 使用方式同 Padding,但是需要传入一个 sliver 作为子类。...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部的部件 SliverPersistentHeader,这个部件可以根据滚动的距离缩小高度,有点类似 SliverAppBar...糟透了的翻译 X 1:一个内部能够嵌套其他滚动部件,并使其滚动位置联结到一起的滚动部件 /// The most common use case for this widget is a scrollable...接着请注意代码的那段 assert 的文字 糟透了的翻译 X 5:sliverOverlapAbsorberHandleFor 传入的参数 context 必须包含 NestedScrollView

2K30

Flutter 首页必用组件NestedScrollView的示例详解

今天介绍的组件是NestedScrollView,大部分的App首页都会用到这个组件。 可以在其内部嵌套其他滚动视图的滚动视图,其滚动位置是固有链接的。...在普通的ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户在标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollView的SliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景,当列表滚动时,隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context...交流 Flutter博客地址(近200个控件用法):http://laomengit.com 总结 到此这篇关于Flutter 首页必用组件NestedScrollView的文章就介绍到这了,更多相关Flutter

3.6K40

Flutter 首页必用组件NestedScrollView

老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...今天介绍的组件是NestedScrollView,大部分的App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图的组件,其滚动位置是固有链接的。...在普通的ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户在标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollView的SliverAppBar折叠以展开。...滚动隐藏AppBar 比如实现如下场景,当列表滚动时,隐藏AppBar,用法如下: NestedScrollView( headerSliverBuilder: (BuildContext context

4K10

不一样角度带你了解 Flutter 的滑动列表实现

本篇主要帮助剖析理解 Flutter 里的列表和滑动的组成,用比较通俗易懂的方式,从常见的 ListView到 NestedScrollView 的内部实现,帮助你更好理解和运用 Flutter 里的滑动列表...「本篇不是教你如何使用 API ,而是一些日常开发不常接触,但是很重要的内容」。...RenderSliver 我们都知道 Flutter 的整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样的过程,而 「Flutter 里的布局和绘制逻辑都在...最后在 _NestedScrollCoordinator 的 drag 和 applyUserOffset 等方法里进行内外滚动的分配; image.png SliverPersistentHeader...所以如果这时候额外做一些处理,那么对于 body 而言,它的 paintOrigin 还是从最顶部开始而不是固定区域的下方。

1K30

不一样角度带你了解 Flutter 的滑动列表实现

本篇主要帮助剖析理解 Flutter 里的列表和滑动的组成,用比较通俗易懂的方式,从常见的 ListView 到 NestedScrollView 的内部实现,帮助你更好理解和运用 Flutter 里的滑动列表...本篇不是教你如何使用 API ,而是一些日常开发不常接触,但是很重要的内容。...RenderSliver 我们都知道 Flutter 的整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样的过程,而 Flutter 里的布局和绘制逻辑都在...最后在 _NestedScrollCoordinator 的 drag 和 applyUserOffset 等方法里进行内外滚动的分配; ?...所以如果这时候额外做一些处理,那么对于 body 而言,它的 paintOrigin 还是从最顶部开始而不是固定区域的下方。 ?

2.1K41

踩坑记 | Flutter升级影响了NestedScrollView

),在新的班车,出现了偶现的滑不动问题。...在 Flutter 1.17 flutter create 命令只有 --androidx 这一个选项。...androidx.fragment、lifecycle和annotation给拉过来了,导致androidx.core也从1.0.0变成了1.1.0,查阅core版本发布,在1.1.0的变更里有一行: 添加了嵌套滚动改进...v3变更内容 1.1.0NestedScrollView实现的接口从v2变成了v3,v3接口又加了一个方法, interface NestedScrollingChild3 extends NestedScrollingChild2...阻断依赖可能造成类丢失,但编译期能及时发现(如果有人用反射去调一个野生类,是不是就发现不了了);而阻断呢,又可能引入一些高版本的库,导致无法预测的问题。

76520

踩坑记 | Flutter升级影响了NestedScrollView

),在新的班车,出现了偶现的滑不动问题。...在 Flutter 1.17 flutter create 命令只有 --androidx 这一个选项。...androidx.fragment、lifecycle和annotation给拉过来了,导致androidx.core也从1.0.0变成了1.1.0,查阅core版本发布,在1.1.0的变更里有一行: 添加了嵌套滚动改进...v3变更内容 1.1.0NestedScrollView实现的接口从v2变成了v3,v3接口又加了一个方法, interface NestedScrollingChild3 extends NestedScrollingChild2...阻断依赖可能造成类丢失,但编译期能及时发现(如果有人用反射去调一个野生类,是不是就发现不了了);而阻断呢,又可能引入一些高版本的库,导致无法预测的问题。

93800

StatefulWidget的使用案例

Flutter,自定义组件其实就是一个类,这个类继承自StatelessWidget/StatefulWidget。 StatelessWidget是无状态组件,状态不可变的Widget。...StatefulWidget是有状态组件,持有的状态可能在Widget生命周期改变。也就是说,如果我们想改变页面的数据,那么就需要用到StatefulWidget。...首先我们在VSCode安装一个名为“Awesome Flutter Snippets”的插件,该插件提供了Flutter各种常用的类和方法的快速构建方式,可以极大地提升开发效率,如下所示: 捷径...自定义剪辑 用于创建自定义形状 customPainter 自定义画家 用于创建自定义绘画 listViewB ListView.Builder 创建按需创建的可滚动的线性小部件数组...inheritedW 继承的小部件 用于沿窗口小部件树传播信息的类。 mounted 安装 此State对象当前是否在树

3.2K20

聊聊Android嵌套滑动

在嵌套滑动控件的场景,可以在Android的事件分发机制本身做一些处理,外部拦截或者内部消化触摸事件。...、 RecyclerView ) ,开始嵌套滑动都依赖NestedScrollingChildHelper 这个对象。...如果是其他手势,滑动的时候拦截,滑动的时候拦截。如果滑动的时候拦截的话,手势事件会交给子view去处理,如果子view是可以滚动的,这时候就会有冲突,所有滚动的时候事件要拦截下来交给自己处理。...接着分发嵌套滚动事件,中间还有一些针对 Scroll mode的处理,我们这里不关心: UP 的时候会根据距离判断是否需要消费快速滑动,如果则会进行分发: 所以我们需要关注的就是: startNestedScroll...例如上图的,当dy大于0,说明是向上滑动,如果最新的top值比展开的状态坐标,那么就把状态置为 STATE_EXPANDED , 然后调用 offsetTopAndBottom 做距离上的变换。

1.2K10

Flutter构建布局 顶

这些小部件安排在ListView,而不是列,因为在设备上运行应用程序时,ListView会自动滚动。...撰写简单的小部件来构建复杂的小部件Flutter的布局机制的核心是小部件。 在Flutter,几乎所有东西都是一个小部件 - 甚至布局模型都是小部件。...您还可以使用Window > Scale更改模拟器窗口的大小(更改逻辑像素的数量)。 常见的布局小部件 Flutter拥有丰富的布局小部件库,但这里有一些最常用的布局部件。...Stack摘要: 用于与另一个小部件重叠的小部件 子列表的第一个小部件是基础小部件; 随后的子被覆盖在基础小部件的顶部 堆栈的内容不能滚动 您可以选择剪切超过渲染框的子项 Stack示例: ?...处理Flutter的盒子约束:讨论小部件如何受其渲染框限制。 在Flutter添加资产和图像:说明如何将图像和其他资源添加到应用程序包

43K10

Flutter 1.22 正式发布

新主题遵循Flutter最近在新Material窗口小部件采用的“规范化”模式。如果您想玩演示,DartPad上有一个很棒的演示。...这个想法是要在导航和Flutter的其余部分之间统一模型,同时解决许多问题并添加功能。实际上,这个例子几乎涉及Navigator 2.0的内容。...预览:平滑滚动以提供匹配的输入和显示频率 当输入和显示频率不同时,Flutter团队与Google内部合作伙伴合作,极大地提高了滚动性能。...滚动时,这种匹配会导致性能下降。...从今天的Flutter 1.22 SDK开始,您会发现/ bin文件夹(您可能在PATH包含该文件夹)同时包含flutter和dart命令。有关更多详细信息,请参见Dart 2.10博客文章。

7.4K20

【老孟FlutterFlutter 2 新增的功能

平台惯用功能的另一项改进是更新的滚动条,该滚动条可以正确显示桌面形状因素。...此版本包括一个更新的Scrollbar小部件,该小部件在桌面环境中非常有效 滚动条小部件已更新,以提供桌面上预期的交互功能,包括拖动拇指,单击轨道以上下滚动页面以及在鼠标悬停在鼠标的任何部分上时显示轨道的功能...所谓“好”,是指它在屏幕,屏幕和大屏幕上看起来都不错,它利用了触摸,键盘和鼠标输入的优势,并且对于平台的惯用语言也很好用(例如,通过使用网络上的链接和桌面上的菜单)。...可用的修复程序列表,如带灯泡的快速修复程序,可帮助您单击鼠标来更改代码。...举例来说,假设您的应用包含以下代码行: 使用不推荐使用的参数创建Flutter部件 由于不赞成使用此构造函数的参数,因此应将其替换为以下内容: 图片发布 创建一个Flutter部件,其中推荐使用的参数已替换

7.8K20

Flutter】自定义滚动开关

本文中,我们将探讨Flutter 的**Custom Rolling Switch in Flutter。...**我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序,该程序具有吸引人的动画和一些属性。...pub地址:https://pub.dev/packages/lite_rolling_switch 介绍 在Flutter,开关是一个小部件,用于在两种选择(ON或OFF)之间进行选择。...当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...在小部件内,我们将添加一个列小部件。在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式的文本。

33.3K60

Android scrollview如何监听滑动状态

ScrollView 视图的滚动过程,其实是在不断修改原点坐标。当手指触摸后,ScrollView会暂时拦截触摸事件,使用一个计时器。...首先说一下NestedScrollView 的滑动事件的监听, 如果使用 nestedScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener...} } 这样我们就可以通过实现 onScrollChanged() 监听滑动事件了 ,其中可以监测到滑动距离,这样就可以做好多事情了; 但是现在有一个需求就是【滑动的时候隐藏 一个靠边的悬浮框,滑动是悬浮框显示出来...} else { scrollCountTimer.start(); } } }); //最后记得页面销毁时,cancel掉timer 总结 以上所述是编给大家介绍的...Android scrollview如何监听滑动状态,希望对大家有所帮助,如果大家有任何疑问请给我留言,编会及时回复大家的。

5.1K30

Flutter 入门指北之滑动部件(超详细)

那么这里提下可滑动的容器部件 SingleChildScrollView 这个部件非常简单,贴源码了。最简单的使用方式只需要提供一个 child 即可。...ExpansionTile 既然讲到了 ListView,在日常开发,折叠列表也是一个比较常用的,所以这边要提下 ExpansionTile 这个部件,因为相对比较简单,所以直接上代码了 class...因为 GridView 和 ListView 亮着都是可滑动的部件,直接拼接肯定会有「滑动冲突」,所以 Flutter 就提供了一个粘合剂,CustomScrollView,那么 Flutter 如何实现呢...,但是以上介绍的在平时开发过程够用了,如果后期发现还需要别的部件,我会继续补上。...scrollController 进行监听 _scrollController.addListener(() { // _scrollController.position.pixels 获取当前滚动部件滚动的距离

2.4K30

Flutte部件目录-基本部件(一)

使用Flutter的视觉,结构,平台和交互式小部件集合更快地创建漂亮的应用程序。 基本部件 在构建您的第一个Flutter应用程序之前,您绝对需要了解这些小部件。...Row部件不会滚动(并且一般认为在一行中有更多的孩子比适合可用的房间更好是错误的)。如果您有一行小部件,并希望它们在空间不足的情况下能够滚动,请考虑使用ListView。...如果该行的非弹性内容比该行(那些包含在Expanded或Flexible部件的)本身多,则该行被认为已经溢出。当一行溢出时,该行没有任何剩余空间Expanded和Flexible的子项。...Column部件滚动(并且通常认为宁愿在列中有更多子项也不使用适合可用空间是错误的)。 如果您有一行小部件,并希望它们在空间不足的情况下能够滚动,请考虑使用ListView。...在这种情况下,解决方案通常只是将内部列包装在Expanded,以表明它应该占用外部列的剩余空间,而不仅仅是它需要的空间。 显示此消息的另一个原因是将列嵌套到ListView或其他垂直滚动

7.4K20

Flutter应用程序添加交互性 顶

管理状态 小部件管理自己的状态 父母管理小部件的状态 混搭方法 其他交互式小部件 标准小部件 材料组件 资源 准备好 如果您已经在Flutter布局构建布局,请跳到下一节。...Lib/main.dart pubspec.yaml - 更改此文件 lakes.jpg-更改为此文件 如果您仍然有疑问,请参阅获取支持。...小部件管理自己的状态 有时,小部件在内部管理其状态是最有意义的。 例如,当ListView的内容超过渲染框时,ListView自动滚动。...大多数使用ListView的开发人员不想管理ListView的滚动行为,因此ListView本身管理其滚动偏移量。 _TapboxAState类: 管理TapboxA的状态。...处理手势,Flutter Widget框架导览的一部分:如何创建按钮并使其响应输入。 Flutter的手势:Flutter手势机制的描述。

4.2K20
领券