为什么我不能滚动listView？我得到一个典型的错误：‘A RenderFlex overflowed by xx pixels on the bottom`’ - 腾讯云开发者社区

文章/答案/技术大牛

发布

当永恒的软键盘问题遇到Flutter

从场景开始说起我的场景是一个从底部弹出的 Dialog，Dialog 里主要就是一个 TextField 输入框。...overflowed by 17 pixels on the bottom....也就是，当键盘没弹出的时候，输入框在下面，键盘出来的时候，输入框在键盘的上方。底部对话框再怎么样，也不能被输入框顶到屏幕外面去吧。...在 didChangeMetrics 回调里面，我们在当前 frame 结束的时候根据不同的高度来设置对话框的高度, 这里我准备了一个 initHeight 来表示对话框的初始高度: @override...优化首先我需要随时能感知到输入框的高度，那么最实在的就是在输入的时候顺便监听一下输入框自己的 height，我选择自己封装了一个 Widget: final ValueChanged

4.5K3 0

Flutter 遇到的坑

Flutter Error: Navigator operation requested with a context that does not include a Navigator 解决办法：不能直接在...是根据下拉时的偏移量触发刷新，当条目较少时(未占满一个屏幕)，ListView不能滚动，所以无法触发下拉刷新，给ListView的physice属性设置值为new AlwaysScrollableScrollPhysics...()，让ListView在任何情况下都可以滑动，也就可以触发RefreshIndicator的刷新。...yourpasswordhere keyPassword=yourkeypasswordhere keyAlias=youralias storeFile=/your/path/key.jks 【flutter 溢出BUG】 bottom...overflowed by 104 PIXELS 一开始直接使用Scaffold布局，body:new Column 然后结果调出键盘的时候就报这个错了解决办法是使用SingleChildScrollView

1.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

之从源码分析mScrollX，scrollTo()，smoothScrollTo

还费时费力的！如何才能完全掌握一个知识？当你能把它讲清楚的时候，你才算掌握了他，所以这也是我整理这些知识点最大的原因。...---- 地址我的CSDN主页：http://blog.csdn.net/xiangyong1521 文章地址：http://blog.csdn.net/xiangyong1521/article/details...例如：我要移动view到坐标点（100，100），那么我的偏移量就是(0,，0) - （100，100） = （-100 ，-100），我就要执行view.scrollTo(-100,-100),达到这个效果...= getChildAt(0).getHeight(); //获取当前能看到的item高度 final int maxY = Math.max(0, bottom - height...smoothScrollTo(int x, int y)：从源码中看出，它实际上是调用了smoothScrollBy(x - mScrollX, y - mScrollY);方法根据x,y的值来计算剩余可滚动的位移量

1.7K6 0

Flutter完整开发实战详解(十八、神奇的ScrollPhysics与Simulation)

Flutter 中的 ListView 、CustomScrollView 等 Scrollable 控件，在 Android 和 iOS 平台的滚动和边界拖拽效果，会有如下图所示的平台区别呢？...overscroll 就一直是0 /// 返回边界条件 double applyBoundaryConditions(ScrollMetrics position, double value) ///创建一个滚动的模拟器...这也是为什么普通慢速拖动，不会触发自动滚动的原因。...value ，然后在动画的回调中获取 Simulation 计算后得到的 value 进行 setPixels(value) 实现滚动。...这里需要着重提及的就是，为什么 BouncingScrollPhysics 会自动回弹呢？

16.6K6 1

一种统计ListView滚动距离的方案

虽然觉得这个需求很扯淡，但做为开发的我还是老老实实去寻找实际的统计解决方案。但搜索了一圈并没有找到一个满足需求的解决方案。于是就有了此文。...2 方案 2.1 ListView滚动监听 ListView提供了一个setOnScrollListener的接口来接收List的滚动事件： public class AbsListView{ ......item的高度来判断当前滚动了多少距离，大方案只能统计滚动刚好超过item时滚动距离，但如果滚动未超过一个item时，其滚动距离则不能累加item的高度来处理，比如：实际滚动距离为红色部分，并没有超过一个...在拿到这两个阶段的top值时，我们就可以通过这两个值来计算出红色部分的实际滚动距离： //这里大家可以思考下为什么可以通过减掉当前的top值就能获取到当前实际滚动的距离的； int itemHeight...(new ScrollListener()); 3 总结本文从实际使用的场景出发，提出了一个可记录ListView滚动距离的实际方案，该方案可精确统计各种场景下ListView的实际滚动距离，并兼容了常见的边界统计的问题

1.5K2 0

Flutter开发中的一些Tips

闲着没事，用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了，所以都是些死数据，实现效果可以说是很完美了（得到了设计的认可。。。）。...1.部件溢出 ---- 异常大致如下： A RenderFlex overflowed by 22 pixels on the bottom....2.输入框的遮挡 ---- 页面如下：上图中，我选中了最后一个输入框，但因为输入法默认都是在输入框的下方弹出，然而上面盖着这个“提交”按钮，发生了遮挡。...比较成熟有效的方案是在键盘弹出的上方悬浮一个按钮，点击可以关闭键盘。当然了，这种问题也有对应的库可以解决，我使用的是flutter_keyboard_actions来解决了这个问题。...具体我们可以去查看调用TargetPlatform枚举类的代码。如果你觉得这样真麻烦，我给你支个大招，修改ThemeData的platform，指定一个平台。

2.7K3 0

【Flutter 组件集录】NotificationListener｜ 8月更文挑战

既然 Notification 是抽象类，那么并不能直接构造对象，所以 Flutter 框架中自然要提供相关的实现类，如下是 Notification 的众多实现类，包括引子中的 ScrollUpdateNotification...Notification 类型，比如下面的 OverscrollNotification，这个监听将会在列表滑动到最顶端或最底端时被触发，在回调的数据中可以得到越界的尺寸 overscroll 。...这样只要在 ListView 外层嵌套一个 Scrollbar ，在滑动过程中右侧就可以出现指示器。...Flutter 的滑动体系中通过 Notification 的分发与监听，让我们可以在任何地方去监听组件的滑动。这样滑动事件的得到了极大地解耦。至于滑动通知的具体流程，不是一言半语能够介绍完的。...作为普通的使用者，了解到这样就已足够。我的第四本小册《Flutter 滑动探索 - 珠联璧合》中将会全面分析 Flutter 滑动体系的源码实现，敬请期待。

2.2K2 0

之滚动布局的监听的和smoothScrollBy方法分析使用

是我们常用的滚动类型布局，应工作中的一个需求，需要监听这些布局的页面停留状态，以配合更新页面UI，然后通过按钮点击以控制这些页面的滚动；目录 scroollview监听方法 listview监听方法...view, int scrollState) {} @Override public void onScroll(AbsListView view, //报告滚动状态的视图...int firstVisibleItem,//第一个可见item的索引 int visibleItemCount,//可见item的数量...=null) { Log.i("TAG","view2.getY()"+view2.getY()); //可获取到任何状态下的第一个可见item索引的getY...---- 预告下一篇，我将整理下scrollTo,scrollBy,smoothScrollBy,smoothScrollTo的资料，以对页面滑动相关的方法有更加清晰的认识。

3.1K6 0

Flutte部件目录-基本部件（一）

Row部件不会滚动（并且一般认为在一行中有更多的孩子比适合可用的房间更好是错误的）。如果您有一行小部件，并希望它们在空间不足的情况下能够滚动，请考虑使用ListView。...// otherwise the logo will be tiny child: const FlutterLogo(), ), ), ], ) 疑难解答为什么我的行有黄色和黑色的警告条纹...Column部件不滚动（并且通常认为宁愿在列中有更多子项也不使用适合可用空间是错误的）。如果您有一行小部件，并希望它们在空间不足的情况下能够滚动，请考虑使用ListView。...在这种情况下，解决方案通常只是将内部列包装在Expanded中，以表明它应该占用外部列的剩余空间，而不仅仅是它需要的空间。显示此消息的另一个原因是将列嵌套到ListView或其他垂直滚动条中。...在这种情况下，确实存在无限的垂直空间（垂直滚动列表的整个点是允许垂直无限空间）。在这种情况下，通常值得研究内部列为什么应该有一个Expanded或Flexible的子部件：内部子部件应该是多大？

8.9K2 0

View的事件体系

两者只能改变view内容的位置，不能改变在布局中的位置。...，比如设置滚动模式，开始时间，持续时间等等，并没有任何对View的滚动操作其实整个过程是这样的：View重绘后会在draw方法中调用computeScroll，这是个空方法，要自己实现 @Override...MotionEvent.ACTION_DOWN){ return false; }else{ return true; } } 为什么不能拦截呢.../51007062 看该文的最后，scrollview和listview的滑动冲突我决定采用外部拦截法。...MotionEvent.ACTION_MOVE: Log.e("ACTION_MOVE", "ACTION_MOVE"); //getChildAt(0)得到的就是

6303 0

那些初学者实践 Flutter 最常出现的错误

哔哩哔哩漫画APP实践Flutter 也有大半年时间了，我针对线上收集到的错误进行分析，挑选出了一些有一般代表性的错误，列在本文，可供实践 Flutter 的初学者们作为一点参考。...典型错误一：无法掌握的Future 典型错误信息：NoSuchMethodError: The method 'markNeedsBuild' was called on null....控制ListView滚动到开头： final ScrollController _primaryScrollController = ScrollController(); // 回到开头 void...为什么多了(Too many elements)： ScrollController还没来得及 detach旧的 position，就又attach了一个新的。...但容错办法又来自于一次次经验教训，谁也不能凭空就认识到要做什么样的错误处理，所以相信在经过一段时间到处踩坑的洗礼后，初学者也可以快速成长，将来各个都是精通。

3.7K2 1

SliverAppBar

接下来我们来介绍下SliverAppBar SliverAppBar ---- 我看还是先来看下SliverAppBar的构造方法构造方法也是非常的简单，但是我们却不能直接使用它，由官方文档可以看到我们通常结合...来构建了一个可以滚动的区域最后我们给NestedScrollView的body加了一个ListView 然后我们来看下效果： ?...很丑有没有，由于TabBar的高度所以我们并不能让SliverAppBar滑动到顶部，所以要想实现随着SliverAppBar的移动，把TabBar放在bottom也不是很合适的。...但是有童鞋就问问了，我们怎么让这个SliverPersistentHeader中的内容（TabBar）不随着ListView的滚动而滑动呢？...其实很简单，因为SliverPersistentHeader跟SliverAppBar一样都有一个 pinned属性，将它设置为true这里面的内容就会在到达顶部后停止跟随ListView移动了。

2K3 0

Android系统联系人全特效实现(下)，字母表快速滚动

在上一篇文章中，我和大家一起实现了类似于Android系统联系人的分组导航和挤压动画功能，不过既然文章名叫做《Android系统联系人全特效实现》，那么没有快速滚动功能显然是称不上"全"的。...因此本篇文章我将带领大家在上篇文章的代码基础上改进，加入快速滚动功能。如果还没有看过我上一篇文章，请抓紧去阅读一下 Android系统联系人全特效实现(上)，分组导航和挤压动画。...其实ListView本身是有一个快速滚动属性的，可以通过在XML中设置android:fastScrollEnabled="true"来启用。...首先通过字母表按钮的getHeight方法获取到字母表的总高度，然后用event.getY方法获取到目前手指在字母表上的纵坐标，用纵坐标除以总高度就可以得到一个用小数表示的当前手指所在位置(0表在#端，...由于我们的字母表中一共有27个字符，再用刚刚算出的小数再除以1/27就可以得到一个0到27范围内的浮点数，之后再把这个浮点数向下取整，就可以算出我们当前按在哪个字母上了。

1.3K8 0

Flutter 入门指北之滑动部件（超详细）

如果需要实现一个垂直的滚动列表，可以直接通过 SingleChildScrollView 包裹 Column 来实现，列表内容全部塞到 Column 即可 class SingleChildScrollDemoPage...加入我们的 item 之间的分割线需要如下样式：奇数位和偶数位之间用黑色分割线，偶数位和奇数位之间用红色分割线 // 需要分割线的时候才使用，不能指定 item 的高度 body: ListView.separated...，我这边主要就是为了偷懒就随便弄了，接着修改下 body 的代码 body: ListView( children: _keys .map((key) =...GridView 生成列表可以通过 ListView 来实现，那么同样，实现网格列表 Flutter 也提供了 GridView 来实现，实现 GridView 的方法也很多...我数了下，大概有 10...例如我们需要实现，当滚动的距离大于一定距离的时候显示一个回到顶部的按钮，有了 ScrollController 就能够非常方便的实现 ScrollController 因为需要根据滑动的距离显示回到顶部按钮

3.1K3 0

win10 uwp 毛玻璃 Compositor 创建毛玻璃win2D最简单方法

使用 win2d 得到软件内控件毛玻璃，而使用 Compositor 可以获得窗口毛玻璃。先来说下如何使用 Compositor 做窗口毛玻璃，感觉小伙伴感兴趣的是窗口毛玻璃。...但是模糊的玻璃可以看不到里面控件，于是就把控件放在一个Grid 的最前，这样看起来背景就是毛玻璃最外层的 Grid 不要设置 BackGround 的图片参见：win10 uwp 截图获取屏幕显示界面保存图片于是在界面显示一个图片，界面的左边就是图片，右边就是毛玻璃。...然后把得到的效果显示但是在什么时候截图？也就是什么时候才是截图最好的时候？...为了简单，我就不写如何获得dpi, 96, pixels); await encoder.FlushAsync(); stream.Seek

1.3K1 0

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套

虽然从我个人体验上并不觉得这是个问题，但是如果产品硬是要你修改，难道要自己重写 PageView 的手势响应吗？...同方向 PageView 嵌套 ListView介绍完常规使用，接着来点不一样的，在垂直切换的 PageView 里嵌套垂直滚动的 ListView ，你第一感觉是不是觉得不靠谱，为什么会有这样的场景...，如下代码所示：通过 NeverScrollableScrollPhysics 禁止了 PageView 和 ListView 的滚动效果通过顶部 RawGestureDetector的 VerticalDragGestureRecognizer...接着在 _handleDragUpdate 方法里，主要是判断响应是不是需要切换到 PageView:如果不需要就继续用前面得到的 _drag?....ListView 做一个 KeepAlive ，然后用简单的方法去除 Android 边缘滑动的 Material 效果：通过 with AutomaticKeepAliveClientMixin 让

2.7K2 0

「前端进阶」高性能渲染十万条数据(虚拟列表)

比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、收入等)，此时对于用户的持仓列表一般是不能分页的。...，才会触发渲染线程对页面进行渲染第一个 console.log的触发时间是在页面进行渲染之前，此时得到的间隔时间为JS运行所需要的时间第二个 console.log是放到 setTimeout 中的...= listData.slice(startIndex,endIndex) 当滚动后，由于渲染区域相对于可视区域已经发生了偏移，此时我需要获取一个偏移量 startOffset，通过样式控制将渲染区域偏移至...这是我选择的实现方式，可以避免前两种方案的不足。...基于这个方案，个人开发了一个基于Vue2.x的虚拟列表组件：vue-virtual-listview Github地址：https://github.com/chenqf/vue-virtual-listview

11.8K7 4

Floating Action Button-Android M新控件

但是目前我们能从CoordinatorLayout得到的好处是它可以让一个元素浮动在另一个元素之上。...实际上只需要指定一个布局文件，就可以看到效果了，只不过是这时候的FAB是固定在屏幕指定位置的，而无法随之滚动，不着急，下面会介绍如何设置成可滚动的FAB 属性介绍 FAB 默认使用应用主题中设置的浮起色作为按键背景...用RecyclerView替换ListViews 目前，你需要用RecyclerView来替换ListView。就如这节所描述的，RecyclerView是ListView的继承者。...根据谷歌的这篇文章所讲的，不支持CoordinatorLayout和ListView一起使用。...ListView, ScrollView 或者 RecyclerView 关联起来，这样按钮就会随着list的向下滚动而隐藏，向上滚动而重现： ListView listView = (ListView

2K4 0

轻松又酷炫地实现弹幕效果——手把手教学

大体思路我们的目标是将各式各样的itemView展示到播放器上方，并且使之滚动起来，itemView支持自定义，这样看起来和ListView的功能很相像，但与之不一样的是，弹幕是多行多列，需要计算每个...itemView的位置，且一直在滚动。...所以，我采用适配器模式，仿ListView的Adapter来实现弹幕功能。想到这里，很多人就会觉得这不典型的横向瀑布流嘛，用RecyclerView或者flexbox很轻松就实现了。...、实体类实体类当然不能少了： ?...首先要有这样一个思路，在适配器中抽取出方法，返回itemView的高度，在弹幕View中根据弹幕绘制区域高度，除以itemView的高度，算出合理的弹幕行数（这里大家也理解了为什么在写适配器的时候要定义

1.3K2 0

Android开发之漫漫长途 XIV——ListView

那么本篇我们来说一下ListView，虽然现在ListView逐渐的被RecyclerView取代，包括我自己的项目中也是使用的RecyclerView。那么为什么要分析一个“过时”的东西呢？...ListView的使用 ListView的简单使用关于ListView的简单使用我这里就不详细分析了，只贴上一个实例源码以及做一个小结，对应的源码目录已用红框标出 ?...需要注意的是当你的滚动内容较小，不到当前ListView的3个屏幕高度时则不会出现这个快速滚动滑块，同时该方法仍然是AbsListView的基础方法，可以在ListView或GridView等子类中使用快速滚动辅助...例如ListView展示成千上万条数据为什么没有发生OOM呢？ListView在滑动的时候异步请求所导致的图片错位问题产生的原理及如何解决？？...视图如果被发现，就会从mActiveViews删除，也就是说不能从同一个位置的View不能从mActiveViews中获得第二次） ?

1.2K3 0

点击加载更多

当永恒的软键盘问题遇到Flutter

Flutter 遇到的坑

之从源码分析mScrollX，scrollTo()，smoothScrollTo

Flutter完整开发实战详解(十八、神奇的ScrollPhysics与Simulation)

一种统计ListView滚动距离的方案

Flutter开发中的一些Tips

【Flutter 组件集录】NotificationListener｜ 8月更文挑战

之滚动布局的监听的和smoothScrollBy方法分析使用

Flutte部件目录-基本部件（一）

View的事件体系

那些初学者实践 Flutter 最常出现的错误

SliverAppBar

Android系统联系人全特效实现(下)，字母表快速滚动

Flutter 入门指北之滑动部件（超详细）

win10 uwp 毛玻璃 Compositor 创建毛玻璃win2D最简单方法

Flutter 小技巧之 ListView 和 PageView 的各种花式嵌套

「前端进阶」高性能渲染十万条数据(虚拟列表)

Floating Action Button-Android M新控件

轻松又酷炫地实现弹幕效果——手把手教学

Android开发之漫漫长途 XIV——ListView

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐