Flutter组件-ListView滑动到指定位置(SingleChildScrollView 实现锚点效果)

最新推荐文章于 2024-04-26 16:48:40 发布
最新推荐文章于 2024-04-26 16:48:40 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： Flutter 文章标签： flutter 滑动到指定位置 锚点 滚动到指定位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eastWind1101/article/details/131366048
版权

一.SingleChildScrollView 简介：

ListView 组件默认内容比较多的时候具有延迟加载的特性。 

SingleChildScrollView 不支持基于 Sliver 的延迟实例化模型，也就是使用 SingleChildScrollView 

默认没有延迟加载的特性。 

SingleChildScrollView 类似于 Android 中的 ScrollView，它只能接收一个子组件，由于默认没 

有延迟加载的特性，所以我们可以刚开始就获取里面所有速度的位置，这样就可以很好的实 

现锚点效果。

二.SingleChildScrollView 锚点的实现流程：

将需要锚点的所有代码使用 SingleChildScrollView 包裹，为每一个锚点创建对应的 GlobalKey， 

使用 Scrollable 的 ensureVisible 方法跳转至每个 key.

步骤一:创建key

GlobalKey gk1 = GlobalKey();

步骤二:将布局的listView(或者Container)更改为SingleChildScrollView

步骤三:实现跳转

Scrollable.ensureVisible(gk1.currentContext as BuildContext)

~废弃回忆 �༄
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Flutter】Flutter 滚动到指定位置
Code Metaverse
08-01 2273
在 Flutter 开发中，我们经常会遇到需要滚动到列表的指定位置的需求，例如，用户可能希望点击一个按钮后，页面能够自动滚动到某个特定的位置。这种需求在实际开发中非常常见，但是对于初学者来说，可能会感到有些困惑。本文将详细介绍如何在 Flutter 中实现滚动到指定位置的功能。
auto_scroll_tab_bar_anchors:带有页面锚点的Flutter Auto Scroll标签栏-条子
03-21
固定 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
android使用flutter的ListView实现滚动列表的示例代码
01-05
现如今打开一个 App，比如头条、微博，都会有长列表，随着我们不断地滑动，视窗内的内容也会不断地更新。今天就用 Flutter 实现一下这种效果。 这里的表现其实就相当于有一个固定长度的容器，然后超出的内容是不可见的，只有当你向上或向下滑动屏幕时，视窗外看不见的内容才会出现在视窗中。如果在 web 开发时，是需要容器加上样式 overflow: auto; 要想用 Flutter 实现，其实也是很简单的，因为 Flutter 为我们提供了 ListView 组件。 ListView 主要有以下几种使用方式 ListView ListView.builder ListView.
Flutter ListView 滚动到指定item
qq_43573997的博客
08-04 5018
一、定义ScrollController控制器变量 ScrollController _controller = ScrollController(); 二、为ListView添加控制器 SizedBox( child: ListView.builder( controller:_controller, physics: const BouncingScrollPhysics(), itemCount: eList.length,
flutter listview 滚动到底部_Flutter 入门指北之弹窗和提示（干货）
weixin_39906192的博客
11-28 409
码个蛋(codeegg)第 607 次推文Flutter系列文章:《Flutter 入门指北(Part 1)之 Dart》《Flutter 入门指北(Part 2)之基础部件》《Flutter 入门指北(Part 3)之 Appbar，Scaffold 填坑》《Flutter 入门指北(Part 4)之容器部件》《Flutter 入门指北(Part 5)之输入处理及实战》《Flutter 入门指北...
Flutter之ListView翻转，自动滑动到底部
前端菜鸟好先森的博客
10-17 2871
Flutter之ListView翻转，自动滑动到底部
winform listview 设置选中项 图片_Flutter 之 ListView
weixin_39747577的博客
12-10 576
在 Flutter 中，ListView 可以沿一个方向(垂直或水平方向)来排列其所有子 Widget，常被用于需要展示一组连续视图元素的场景ListView 构造方法ListView：仅适用于列表中含有少量元素的场景ListView.build：适用于子 Widget 比较多的场景ListView.separated：适用于需要设置分割线的场景构造方法名 特点 使用场景 ListView 一次性...
Flutter ListView滚动到指定条目
qq_35364808的博客
06-04 2689
找遍全网没有看到listview滚动到指定条目的方法，基本都是通过条目的高度计算达到效果。这样比较麻烦。通过研究发现一种简单的方法，但是不能使用listview组件，需要使用SingleChildScrollView这种没有条目缓存，一次性加载的滑动控件。如果是长列表必须使用ListView的话，那还是老老实实计算高度去吧。计算高度的实现方式查看我的其他博客。下面是主要代码这块就是显示列表中指定的context的条目......
flutter页面内跳转——锚点效果的实现
qq_44888570的博客
11-02 2637
问题描述 点击一个按钮，跳转到页面对应的内容区域，类似于HTML中的target跳转，也就是锚点标签。 在HTML中，此种效果的实现是不需要手动计算元素高度的，所以我在flutter实现的首先原则为不手动计算组件高度。 解决方法 一. 第三方插件 1. indexed_list_view 该组件需要创建controller，使用controller中的方法，根据索引值来跳转到ListView组件中的某一项。 缺点是没有属性shrinkwrap，布局时需要注意。在其git社区，也有很多人请求官方加入这个属性。
Flutter 滚动距离来设置TabBar的位置，点击TabBar滚动的到指定的位置
yujunlong3919的专栏
03-25 5072
文章目录效果git定义属性每个组件设置Key获取控件的距离顶部的位置设置监听设置TabBar 点击getY 效果git 定义属性 ScrollController _controller = new ScrollController(); var globalKeyOne = GlobalKey(); var globalKeyTwo = GlobalKey(); var gl...
Flutter列表组件ListView
01-20
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件...
Flutter实现webview与原生组件组合滑动的示例代码
08-26
主要介绍了Flutter实现webview与原生组件组合滑动的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter-Nested-ListView
05-15
flutter_nested_listview 一个新的Flutter应用程序。 入门 要获得Flutter入门方面的帮助，请查看我们的在线。 “＃Flutter-Nested-ListView”
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与目标 我们的目标是在嵌入式系统中使用Flutter。 我们正在开发此嵌入器，以在嵌入式产品中使用Flutter。 最终，我们希望向...
Flutter Console运行命令报错解决
c_studer_的博客
04-22 304
通过clone远程仓库到本地后问题得到解决。通过将包下载到本地点击打开发生闪退。
flutter利用get中的GetConnect实现拦截请求
最新发布
weixin_40466351的博客
04-26 287
【代码】flutter利用get中的GetConnect实现拦截请求。
Flutter-自定义画板
dalong的博客
04-24 305
详情见 github.com/yixiaolunhui/flutter_xy。定义画板类DrawingBoard。定义工厂类 factory。实现线、圆、矩形绘制。
flutter开发实战-build apk名称及指令abiFilters常用gradle设置
一名开发者
04-26 338
flutter开发实战-build apk名称及指令abiFilters常用gradle设置最近通过打包flutter build apk lib/main.dart --release，发现apk命名规则需要在build.gradle设置。这里记录一下。
探索Vue.js状态管理的艺术：深入理解与实践Vuex
2302_76609856的博客
04-23 952
1.什么是VuexVuex是一个专门为Vue.js应用程序设计的状态管理库。它提供了一个中心化的存储系统（通常称为“store”），用于集中管理应用中所有组件共享的状态。这个“store”不仅是数据仓库，还定义了改变状态的严格规则，确保状态变化的透明性和可追踪性。2.Vuex的核心价值单一可信源（Single Source of Truth）：所有组件都从同一个store获取状态，消除了组件间状态不一致的问题。状态变更的可预测性：通过actions触发异步操作，mutations。
Flutter NestedScrollView TabView ListView 滚动到指定的位置
05-25
要让 `ListView` 滚动到指定的位置，可以使用 `ScrollController`，将其传递给 `ListView` 的 `controller` 参数。然后，调用 `animateTo` 方法，传递要滚动到的位置。以下是一个简单的示例代码： ```dart class MyPage extends StatefulWidget { @override _MyPageState createState() => _MyPageState(); } class _MyPageState extends State<MyPage> { final List<String> items = List.generate(100, (index) => "Item $index"); final ScrollController _scrollController = ScrollController(); void _scrollToIndex(int index) { _scrollController.animateTo( index * 50.0, // 50.0 为每个 item 的高度 duration: Duration(milliseconds: 500), curve: Curves.easeInOut, ); } @override Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( headerSliverBuilder: (context, _) { return [ SliverAppBar( title: Text("My Page"), pinned: true, expandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar( background: Image.network( "https://picsum.photos/200/300", fit: BoxFit.cover, ), ), bottom: TabBar( tabs: [ Tab(text: "Tab 1"), Tab(text: "Tab 2"), Tab(text: "Tab 3"), ], ), ), ]; }, body: TabBarView( children: [ ListView.builder( controller: _scrollController, itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, ), Container(color: Colors.green), Container(color: Colors.blue), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () => _scrollToIndex(20), // 滚动到第 20 个 item child: Icon(Icons.arrow_downward), ), ); } } ``` 在这个示例中，我们创建了一个 `MyPage` widget，使用了 `NestedScrollView` 和 `TabBarView`，其中包含了一个 `ListView`。我们创建了一个 `_scrollController`，并将其传递给了 `ListView` 的 `controller` 参数。然后，我们定义了一个 `_scrollToIndex` 方法，用于将 `ListView` 滚动到指定位置，这里以第 20 个 item 为例。最后，我们在页面中添加了一个悬浮按钮，点击它会调用 `_scrollToIndex` 方法，将 `ListView` 滚动到指定位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值