flutter页面滚动（flutter 滚动布局）

本篇文章给大家谈谈flutter页面滚动，以及flutter 滚动布局对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享flutter页面滚动的知识，其中也会对flutter 滚动布局进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、【Flutter】图片、内容、滚动空间溢出调整
• 2、【Flutter】ListView、GridView高度自适应并随页面滚动
• 3、关于flutter NestedScrollView导致其body的tabbarview的多个list同步滚动的解决方案
• 4、25.Flutter的ListView监听滚动事件之ScrollController

【Flutter】图片、内容、滚动空间溢出调整

空间超出提示

注释 ：Flutter Incorrect use of ParentDataWidget
问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。
解决方案：保持： Expanded、Flexible 只在 Row、Column 等组件内，不在其他组件内使用。

控件Row有一个水平的布局方向，但是内容已经超出了可显示的范围。
建议我们使用有弹性的控件比如Expanded代替，或者使用可裁剪的控件ClipRect代替，还可以使用具体滚动属性的控件比如ListView代替

1、类似图片加载失败,然后溢出挤压空间，可以用Container包裹一下

直接使用，如果图片地址失效，就会溢出

直接使用,图片链接失效引起

2、类似这种超出
A RenderFlex overflowed by 48 pixels on the right.

3、类似这种Column滚动超出!

实现页面滑动需要用到SingleChildScrollView组件，SingleChildScrollView和Android中ScrollView类似

问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。
解决方案：保持：Expanded、Flexible只在Row、Column等组件内，不在其他组件内使用。

【Flutter】ListView、GridView高度自适应并随页面滚动

Cannot hit test a render box that has never been laid out.
当ListView、GridView作为Wrap、Column等组件flutter页面滚动的子组件时flutter页面滚动，若外部没有设置高度flutter页面滚动，则会产生此报错。

解决放案：为ListView、GridView设置属性 shrinkWrap: true,

刷新后，报错消失，但是发现其只可内部滚动。

至此，需求达成。
参考 https://www.jianshu.com/p/60abecfdc51d

关于flutter NestedScrollView导致其body的tabbarview的多个list同步滚动的解决方案

讲道理我起的好长的名字啊flutter页面滚动，不过文如上题，搜索到这里的兄弟应该都知道我说的是啥情况，正好
～～
我这个方案可能有点笨拙TT，不过自测有效，有其它想法的老哥希望可以帮忙指点一下～
下面进入正题

点进源码里面看，可以发现他直接继承了StatelessWidget，那我们就直接看看build方法

可以看到，这里直接返回一个scrollable或者一个子节点是scrollable的InheritedWidget
scrollable是一个StatefulWidget，那我们就看看它的state
首先scrollable持有一个scrollposition对象，是通过其scrollcontroller构建的

在其state的setCanDrag方法中，对其拖动设置了一系列的监听

这里就可以看出来，当拖动触发时，就会通过当前scrollable的position生成一个Drag/Hold对象，并调用相应的方法 这个position有几个子类，我们先随便看一个实现

可以看到生成了一个ScrollDragController对象，当手势拖动而调用这个对象的update方法时

可以看到直接调用其委托对象的applyUserOffset方法进行偏移，而这个委托对象根据刚才的drag方法可以得知正是我们scrollable中的position
最后，由position通知其scrollcontext，也就是之前的scrollable进行滑动

具体的滑动流程这里就不细说了，我们只是要知道这个事件是怎么传递的就好了，有兴趣的老哥可以自行分析

NestedScrollView是一个statefulwidget，那我们就先看看它的build方法

先忽略其他奇奇怪怪的方法，我们发现在我们body的外面，包裹了一层PrimaryScrollController，同时它还持有innerController，这个innerController暂时先不管它是啥
还记不记得在最开始ScrollView的build方法中，生成Scrollable的时候，我们已经见过这个PrimaryScrollController了，再回顾一下

再看看PrimaryScrollController.of(context)

可以看到，在生成scrollable的时候，在primary = true的情况下是会向上查找的，看看有没有PrimaryScrollController，如果有的话，scrollable使用的controller实际就是nestedscrollview中的innerController了
而之前看过了，scrollable中的position就是scrollcontroller来生成的，那么在这种情况下flutter页面滚动：

实际上是生成了_NestedScrollPosition并返回给了body中的scrollable
构造方法中有一个参数coordinator 暂时先不管
好了，下面我们在回头看刚才NestedScrollView的build方法，实际上是生成了一个_NestedScrollViewCustomScrollView，继承自大名鼎鼎的CustomScrollView，它当然也是scrollview啦，而我们传给它的controller也是一个_NestedScrollController，不过叫做_outerController，和body中的不是同一个罢了，那么自然这个父scrollview的position也是_NestedScrollPosition。
下面我们按照之前的逻辑，当拖动开始时，就会调用position.drag方法

可以看到，实际上吧方法交给了我们之前多次见到的coordinator来完成，那我们就简单看一下吧

这里可以看到，他把返回的ScrollDragController的委托者设成了自己
那么自然在拖动的时候，调用的就是coordinator的applyUseroffset方法了 我们分析一下

可以看到，在需要子列表滚动时，是对innerPositions中的所有position调用滑动方法的
而这innerPositions中的position是怎么来的呢flutter页面滚动？跟踪一下可以发现是在调用NestedScrollController的attach时添加进来的，如下

因为之前我们看到过，子scrollable中的controller就是这个NestedScrollController，所以在updateopsition时会把旧的detach调，把新生成的position attach进来

另外，在dispose中也会detach

由此我们就知道啦，因为开启了缓存后就不会调用划出屏幕的页面的dispose，自然所有子scrollable的position都存在nestedScrollController里面了，当发生滑动时，遍历调用positions数组，就导致屏幕外的列表也跟着滑动了～

既然开启了缓存，手动dispose肯定是没啥意义的，实际上我们只要在页面切换过后把未显示的position 给detach掉就好了。
然鹅，因为flutter不支持反射，子布局传递的position我们拿不到，nestedScrollController我们也不能直接拿到=。=
不过有一个对象我们之前见到过，scrollable就是通过他获取controller的，而position则是传给了获取到的controller 就是PrimaryScrollController了，所以我打算在中间第三者插足，对传递Position的PrimaryScrollController进行Hook

在使用的时候把子列表添加进去，并设置对应的GlobalKey。

然后监听Tab切换

以上是我的方案，有问题的话还希望老哥帮忙指正，也希望有其他思路的老哥指点一下～～
上一下Github项目地址 用Flutter写的WanAndroid 其中用到了这个方案

https://github.com/Doooyao/wanandroid-flutter

= =
<3

25.Flutter的ListView监听滚动事件之ScrollController

对于滚动的视图，我们经常需要监听它的一些滚动事件，在监听到的时候去做对应的一些事情。

比如视图滚动到底部时，我们可能希望做上拉加载更多；

比如滚动到一定位置时显示一个回到顶部的按钮，点击回到顶部的按钮，回到顶部；

比如监听滚动什么时候开始，什么时候结束；

在Flutter中监听滚动相关的内容由两部分组成：ScrollController和ScrollNotification。
ScrollController

在Flutter中，Widget并不是最终渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常这种监听事件以及相关的信息并不能直接从Widget中获取，而是必须通过对应的Widget的Controller来实现。
ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。

另外，通常情况下，我们会根据滚动的位置来改变一些Widget的状态信息，所以ScrollController通常会和StatefulWidget一起来使用，并且会在其中控制它的初始化、监听、销毁等事件。

我们来做一个案例，当滚动到1000位置的时候，显示一个回到顶部的按钮：

jumpTo(double offset)、animateTo(double offset,...)：这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。

ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件。 关于flutter页面滚动和flutter 滚动布局的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 flutter页面滚动的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter 滚动布局、flutter页面滚动的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。