文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Flutter | 滚动组件，ListView，GridVIew等

可滚动组件 当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter 就会提示 Overflow 错误，为此，Flutter 提供了多种可滚动组件，用于显示列表和长布局； 可滚动组件都直接或间接的包含一个...风格的滚动指示器(滚动条)，如果要给可滚动组件添加滚动条，只需要将 Scroolbar 作为可滚动组件的任意一个父级组件即可，如： Scrollbar( child: SingleChildScrollView...，在 Flutter 中，术语 ViewPort (视口) ，如无特别说明，则是指一个 Widget 的实际显示区域； 例如，一个 ListView 的显示区域的高度是 800 像素，虽然其列表项总高度可能远远超过...其实此属性的本质上是决定可滚动组件的初始滚动位置是在 头 还是在 尾 ，如 false 时，初始位置在头，反之则在 尾 primary：指是否使用 widget 树中默认的 PrimaryScrollController...，then 是异步执行完成的回调 还有问题可以参考这篇文章 最终的效果如下： 添加固定列表头 很多时候我们需要给列表添加一个固定表头，比如实现一个商品列表，就需要在列表添加一个 商品列表 标题 以往的经验告诉我

10.2K20

Flutter开发-可滚动组件

，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。...当可滚动组件滚动时，将列表项包裹在RepaintBoundary中可以避免列表项重绘，但是当列表项重绘的开销非常小（如一个颜色块，或者一个较短的文本）时，不添加RepaintBoundary反而会更高效...下面我们看一个例子：奇数行添加一条蓝色下划线，偶数行添加一条绿色下划线。...因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。...实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动），而后者包含滚动模型 ，也正因如此，CustomScrollView才可以将多个Sliver

6K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Flutter SingleChildScrollView 滚动控件

    ，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。...为此，Flutter中提出一个Sliver（中文为”薄片“的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个”薄片“（Sliver），只有当Sliver出现在视口中时才会去构建它...可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模型的，如SingleChildScrollView。...ListWidget> children: str .split("") //每一个字母都用一个Text显示,字体为原来的两倍...ListWidget> children: str .split("") //每一个字母都用一个Text显示

    6K00

    《Flutter》-- 6.高级组件

    }) 6.1.2 Scrollbar组件 Scrollbar是一个Material风格的滚动指示器组件，如果要给可滚动组件添加滚动条，只需将Scrollbar组件作为可滚动组件的父组件使用即可。...如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成多个部分，只有当子组件出现在视口中时才会去构建它。...目前，可滚动组件中的大部分组件都支持基于Sliver的延迟构建模型，如ListView、GridView。...如果一个可滚动组件支持Sliver，那么该可滚动组件可以将子组件分成多个Sliver，只有当Sliver出现在视图窗口时才会去构建它，从而提高渲染的性能。...，为了不造成滚动时的冲突，需要对子组件添加禁止滚动属性。

    12.6K20

    师于源码 | Flutter 区域视口双向滑动

    比如 AndroidStudio 的文件树和编辑器区域，当宽度较窄时，水平方向通过拖拽底部滚动条来滚动视口。...在之前一直想实现这种效果，可惜未能实现，因为两个双向的 ScrollBar 同时存在会产生冲突，会出现一些交互上的问题。...竖直方向上的滑动控制器是 textController ，在 tag3 处和 Lines 组件 绑定，也就是说 Lines 是一个竖直滚动的可滑动组件；水平方向上的滑动控制器是 horizontalController...也有由于这一点，之前一直没能实现区域视口双向滑动的功能。下面是在竖直方向上 ScrollBar 构造时存在的一行代码：可以只监听竖直滚动的通知，忽略水平方滚动向通知。...如下所示，蓝色区域内有一行文字，当窗口宽度缩小到文本溢出时，底部会呈现滑动条支持水平滑动： 这里先总结一下实现区域视口的双向滚动的步骤: 需要两个可滑动的视口: SingleChildScrollView

    1.1K20

    Flutter中构建布局 顶

    如何构建一个Flutter布局。 这是在Flutter中构建布局的指南。 您将构建以下屏幕截图的布局： ? 然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。...（如buildButtonColumn()（它接受一个Icon和Text）并返回一个列以其主要颜色绘制的小部件的效率最高。...将文本放入容器中，以便沿每条边添加32像素的填充。 softwrap属性指示文本是否应在软换行符（如句点或逗号）上断开。...当您重新加载应用程序时，应该会看到截图中显示的相同布局。 您可以通过将交互添加到您的Flutter应用中来为此布局添加交互功能。 Flutter的布局方法 重点是什么？...如何在Flutter中布置单个小部件？ 本节介绍如何创建一个简单的小部件并将其显示在屏幕上。 它还显示了一个简单的Hello World应用程序的完整代码。

    48.5K10

    Flutter 3.13 组件更新 | 欢迎 Slivers 体系 5 位新成员

    交叉轴方向上固定某个 Sliver的尺寸 SliverCrossAxisExpanded 交叉轴延展滑片 交叉轴方向上设置某个 Sliver的尺寸占比 SliverCrossAxisGroup 交叉轴分组滑片 可以容纳多个...有些场景下，我们期望交叉轴方向可以排若干个 Sliver 滑块，共同响应滚动，特别是像宽度充裕的桌面端。 如下所示，左中右三块 SliverList 水平排布，共同滑动。...这种场景在之前是很难实现的，现在有了 SliverCrossAxisGroup 组件，就可以在竖直滑动视口中，将若干个 Sliver 水平排列，作为一个滑片组。...解决的场景是: 在交叉轴方向，需要摆放若干个滑块时，这些滑块可以共同滚动。 ---- 4....现在有了 DecoratedSliver 组件，指定 decoration 装饰对象即可： 其中 decoration 参数类型是 Decoration ，可以使用 BoxDecoration 实现类，添加阴影

    1.5K20

    【Flutter】自定义滚动开关

    **我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序，该程序具有吸引人的动画和一些属性。...该演示视频展示了如何在颤动中创建自定义滚动开关。它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行的切换交互，该开关将滚动到具有动画效果的另一侧，并且在滚动该开关时将更改图标和文本。...在小部件内，我们将添加一个列小部件。在此小部件中，我们将添加mainAxisAlignment为center。在内部，我们将添加带有样式的文本。...我们将添加animationDuration手段来延迟动画的开始并添加onChanged表示用户打开或关闭开关的时间。当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。

    36.5K60

    关于Flutter 2.5稳定版你知道多少？

    当我们讨论滚动时，另一个改进是增加了额外的滚动指标通知 (#85221、#85499)，即使用户没有滚动，也会提供可滚动区域的通知。...例如，如上图所示中的「Column」widget 在 Layout Explorer 中是蓝色背景，在 widget 树视图中也有一个蓝色图标。...要将测试与 IntelliJ 或 Android Studio 连接，请添加一个运行配置，启动集成测试，并连接一个设备供测试使用。运行配置可以让你在运行测试的同时，设置断点、步进等。...在插件的设置 / 偏好页面有一个新的文本字段。 注意，这对定义为类中静态常量的图标有效，如屏幕截图中的示例代码所示。...最后，一如既往地感谢世界各地的 Flutter 社区组织和社区成员们，是社区让这一切成为可能。在本次更新中贡献和审核 1000 多个 PR 的数百位开发者，因为有你们每个人的努力才成就了本次的成果。

    5K20

    CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

    - 作为一个为子视图之间相互协调手势效果的一个协调布局 - ) 该控件也是Design包下的一个控件，然而这个控件可以被称为Design包中最复杂、功能最强大的控件：CoordinatorLayout...比如：在CoordinatorLayout中使用AppBarLayout，如果AppBarLayout的子View（如ToolBar、TabLayout）标记了app:layout_scrollFlags...等）就能够响应（如ToolBar、TabLayout）控件被标记的滚动事件。...– (Tab的宽度平均分配)，也实现了可滚动的选项卡 – (Tab宽度不固定，同时可以横向滚动)，还实现了所有Tab居中显示。...它还有一个重要作用就是结合ViewPager来实现多个Tab之间的切换。 来看看TabLayout的三种实现方式： 固定的Tab，根据TabLayout的宽度适配 ?

    3.1K30

    Flutter布局指南之深入理解BoxConstraints

    如果你把minWidth分别设置为double.infinity或0，那么一个Unbounded约束也可以同时是一个Tight束或Loose约束。...下图中突出显示的部分显示了ContainerWidget收到的严格约束，BoxConstraints(w=392.7, h=737.5)和Container的最终尺寸为392.7宽和737.5，同时忽略了它的额外约束...好吧，首先，你应该知道在不同的条件下，如Tight约束、Loose约束、Unbounded约束、它有一个孩子或它没有更多的孩子或有多个孩子，特定的Widget会选择上述三个选择中的哪一个。...❞ 案例：在父Widget设置的约束条件的同时添加额外的约束条件 ❝用ConstrainedBox包住子Widget ❞ 案例：在滚动的父Widget内限制一个子Widget的大小，在其滚动方向上有无限制的约束...父方或子方都必须设置一个边界，以便框架知道它需要渲染的尺寸。 像ListView这样的滚动Widget在其滚动方向上有Unbounded约束。

    2.8K20

    Flutter可滑动组件

    在Flutter中，我们也有对应的列表Widget，就是ListView。 注意：在Flutter里面想要实现滑动效果，都需要在组件外部包裹滚动的视图。...1.2 默认构造函数 默认构造函数有一个children参数，它接受一个Widget列表（ListWidget>）。这种方式适合只有少量的子组件数量已知且比较少的情况。...如果我们想要在一个页面中，同时包含多个可滚动组件，且使它们的滑动效果能统一起来，比如一个滑动的视图中包括一个列表视图（ListView），一个网格视图（GridView），且让他们的滑动效果统一。...Flutter中有一个可以完成这样滚动效果的Widget：CustomScrollView，其成员变量slivers可以接收一组Sliver，从而达到统一管理多个滚动视图的目的。...比如视图滚动到底部时，我们可能希望做上拉加载更多；比如滚动到一定位置时显示一个回到顶部的按钮，点击回到顶部的按钮，回到顶部；比如监听滚动什么时候开始，什么时候结束； 在Flutter中监听滚动相关的内容由两部分组成

    8.4K30

    开始使用-编写你的第一个Flutter应用程序 顶

    这是创建您的第一个Flutter应用程序的指南。 如果您熟悉面向对象的代码和基本编程概念（如变量，循环和条件），则可以完成本教程。 您不需要以前使用Dart或移动编程的经验。...第1步：创建起始Flutter应用程序 第2步：使用外部包装 第3步：添加一个有状态的小部件 第4步：创建一个无限滚动ListView 第5步：添加交互性 第6步：导航到新的屏幕 第7步：使用主题更改UI...lib/main.dart 第6步：导航到新的屏幕 在这一步中，您将添加一个显示收藏夹的新屏幕（在Flutter中称为路由）。 您将学习如何在主路由和新路由之间导航。...将呼叫添加到Navigator.push，如突出显示的代码所示，将路由推送到导航器的堆栈。...实现一个有状态的小部件，为你的应用增加交互性。 用ListView和ListTiles创建一个延迟加载的无限滚动列表。 创建了一条路由并添加了在主路由和新路由之间移动的逻辑。

    12.5K20

    Flutter 2.5正式版发布，带来重大更新

    另一个改进是添加了 scroll metrics notifications（#85221、#85499），即使用户没有滚动，它也会提供可滚动区域的提示。...同时，在此版本中，我们添加了文本编辑键盘快捷键可覆盖的功能（ #85381），这是在 Flutter 2.0 及其新的文本编辑功能的基础上的进一步优化。...同时，此版本的 DevTools 附带了对 Widget Inspector 的更新，允许将鼠标悬停在 Widget 来获取评估对象、视图属性、小部件状态等信息。...更容易的界面分析和定位：Flutter 框架中常用的 Widget 都会在左侧的 Widget 树视图中显示图标，它们根据类别进一步进行颜色编码，例如布局 Widget 显示为蓝色，而内容Widget...例如，屏幕截图中的“列” Widget 位于布局浏览器中的蓝色背景上，并且在 Widget 树视图中具有蓝色图标。

    6.6K50

    Flutter中的Key

    为了正确交换平铺位置，我们需要向有状态的 widget 添加 key 参数。...当渲染 widget 时，Flutter 不仅会构建 widget 树，同时也会构建其对应的元素树。元素树持有 widget 树中 widget 的信息及其子 widget 的引用。...在将 key 添加到色块 widget 中后，元素树和 widget 树会使用键值进行更新。...至此，这就是 key 如何在内部工作以及其在修改集合中有状态 widget 方面的用处。 键类型 Key 一般分两种类型： 本地类型 全局类型 本地键 在拥有相同父元素的元素中必须是独特的。...页面存储键 该键用来保留用户在滚动视图中的滚动位置，以便以后可以保存。 参考链接 说说 Flutter 中最熟悉的陌生人 —— Key

    2.1K10

    6详解AppBar小部件

    由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中，我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...Flutter AppBar 布局 leading leading 接受一个小部件，可以分配任何东西——文本、图标，甚至一行中的多个小部件。...AppBar( actions: [ Icon(Icons.more_vert), ], ), Flutter AppBar 操作图标 让我们再向列表中添加一个小部件： AppBar...工具栏包含文字，图标，按钮，和其他任何公司的前景，除了小部件，如Container和Image。...用来在 Toolbar 标题下面显示一个 Tab 导航栏 this.elevation,//控件的 z 坐标顺序，默认值 4，对于可滚动的 SliverAppBar，当 SliverAppBar

    21.2K10

    10w单元格滚动卡顿如何解决？腾讯文档的7个秘笈

    导语 |腾讯文档 SmartSheet 视图是多种视图中的一种，该模式下 FPS 仅 20 几帧（普通 Sheet 视图下 58 帧），用户体验非常卡顿。...02 增量渲染 Smart Sheet 看板是多种视图中的一种。它主要是多个分组来组成的，每个分组又包括了多个卡片。滚动的时候包括左右分组滚动、分组内卡片上下滚动两种。...所以只会收集可视区域内的 widget 进行绘制。在滚动的时候，会计算出需要销毁的卡片和需要新增的卡片，然后开始销毁前面的节点，重新创建新的节点，进行增量渲染。...因此，针对看板的情况，可以针对多个卡片做离屏渲染。多个卡片离屏渲染比整屏离屏渲染更有优势。...在这期间，团队总结了相关经验：应该尽量避免滚动的时候有阻塞主线程的耗时操作。很多地方不易被发现，如深拷贝、序列化、反序列化等等。

    6.2K51
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券