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

有没有办法当子listview在flutter中结束时滚动父listview?

在Flutter中,可以通过使用NotificationListenerScrollController来实现当子ListView结束滚动时滚动父ListView的效果。

首先,我们需要创建一个ScrollController对象来控制子ListView的滚动行为。然后,将该ScrollController对象传递给子ListViewcontroller属性。

接下来,在父ListView的外层包裹一个NotificationListener组件,并监听ScrollEndNotification通知。当子ListView结束滚动时,会发送该通知。在通知的回调函数中,可以通过ScrollController来获取子ListView的滚动位置,并根据需要来控制父ListView的滚动。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class NestedListView extends StatefulWidget {
  @override
  _NestedListViewState createState() => _NestedListViewState();
}

class _NestedListViewState extends State<NestedListView> {
  ScrollController _childScrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nested ListView'),
      ),
      body: NotificationListener<ScrollEndNotification>(
        onNotification: (notification) {
          if (notification.depth == 0 && notification is ScrollEndNotification) {
            // 判断是否为子ListView的滚动结束通知
            // 在此处理父ListView的滚动逻辑
            double offset = _childScrollController.position.pixels;
            print('Child ListView Scroll Offset: $offset');
            // TODO: 控制父ListView的滚动

            return true;
          }
          return false;
        },
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return Container(
              height: 200,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                controller: _childScrollController,
                itemCount: 5,
                itemBuilder: (context, index) {
                  return Container(
                    width: 200,
                    margin: EdgeInsets.all(8),
                    color: Colors.blue,
                    child: Center(
                      child: Text(
                        'Item ${index + 1}',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ),
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: NestedListView(),
  ));
}

在上述示例代码中,通过_childScrollController控制子ListView的滚动行为,并在父ListView中的NotificationListener中监听子ListView的滚动结束通知。在回调函数中,可以根据需要来控制父ListView的滚动行为。

这样,当子ListView结束滚动时,就可以触发父ListView的滚动。

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

相关·内容

Flutter 视图布局(二)

 Flutter 视图布局(一)中文章结束时留下了一个问题,大家有尝试去实现吗? 如果大家认真看文章的话,我觉得这并不是很难的东西。...YAML 是一个标记性语言,它对大小写敏感,由于不像其他类型文件的数据格式拥有明显的级标记而是默认使用空格缩进(2个空格)代表层级,比如用“- ”(划线+空格)来表示列表。...默认情况下,如果列表元素不足以超出可视范围则不会产生可滚动行为。如超出可视范围则到达列表尽头时会停留并有水波样式出现。...源码说到 ListView 有4设置元素的方式: List ListView.builder ListView.separated ListView.custom 第一种 List... itemCount 设置为 null 时就可以实现无限下拉列表。少侠小伙伴们可以代码尝试修改一下看看效果。

3K10

UITableViewFlutter是什么?

这样的需求,iOS是用UITableView实现的;而在Flutter,实现这种需求的则是列表控件ListView。...ListView FlutterListView可以沿一个方向(垂直或者水平方向)来排列其所有Widget,因此常被用于需要展示一组连续视图元素的场景,比如通讯录、优惠券、商家列表等。...列表滚动到相应位置时,ListView会调用该方法创建对应的Widget。 itemCount,表示列表项的数量,如果为空,则表示ListView为无限列表。...Flutter,有一个专门的控件CustomScrollView,用来处理多个需要自定义滚动效果的Widget。...总结 处理展示一组连续、可滚动的视图元素的场景Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。

5.5K10

Flutter | 滚动组件,ListView,GridVIew等

滚动组件 组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局; 可滚动组件都直接或间接的包含一个...这种机制带来的好处是组件可以控制子树滚动组件的滚动行为,例如,Scaffold 正是使用这种机制 IOS 上实现了点击导航栏回到顶部的功能 Scrollbar Scrollbar 是一个 Material..., Flutter ,术语 ViewPort (视口) ,如无特别说明,则是指一个 Widget 的实际显示区域; 例如,一个 ListView 的显示区域的高度是 800 像素,虽然其列表项总高度可能远远超过... ListView 中指定 itemExtent 比让组件自己决定吱声的长度会更有效,因为指定后,滚动系统可以提前知道列表的长度,而无需每次构建组件是都去计算一下,尤其是滚动位置频繁变化时(滚动系统需要频繁去计算列表的高度... ListView 一个无边界(滚动方向上)的容器时, shrinkWrap 必须为 true addAutomaticKeepAlives:该属性表示是否将列表项(组件) 包裹在 AutomaticKeepAlive

8.5K20

Flutter技术与实战(4)

StateLessWidget Flutter ,Widget 采用由、自顶向下的方式进行构建, Widget 控制着 Widget 的显示样式,其样式配置由 Widget 构建时提供...ListView Flutter ListView 可以沿一个方向(垂直或水平方向)来排列其所有 Widget,因此常被用于需要展示一组连续视图元素的场景,比如通信录、优惠券、商家列表等。...列表滚动到相应位置时,ListView 会调用该方法创建对应的 Widget。 itemCount,表示列表项的数量,如果为空,则表示 ListView 为无限列表。...关联后才可以监听到滚动信息;通过 NotificationListener 则可以监听其 Widget 的任意 ListView,不仅可以得到这些 ListView 的当前滚动位置信息,还可以获取当前的滚动事件信息...问题 ListView,如何提前缓存元素?

10.8K20

Flutter可滑动组件

Android,我们可以使用ListView或RecyclerView来实现,Ios,我们可以通过UITableView来实现。...Flutter,我们也有对应的列表Widget,就是ListView。 注意:Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动的视图。...Widget即将被展示到屏幕时,itemBuilder函数才会被调用。...Flutter我们可以使用GridView来实现,使用方式和ListView也比较相似。...比如视图滚动到底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; Flutter监听滚动相关的内容由两部分组成

7.1K30

Flutter开发-可滚动组件

前言 组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误。...ListView,指定itemExtent比让组件自己决定自身长度会更高效,这是因为指定itemExtent后,滚动系统可以提前知道列表的长度,而无需每次构建组件时都去再计算一下,尤其是滚动位置频繁变化时...ListView一个无边界(滚动方向上)的容器时,shrinkWrap必须为true。...当可滚动组件滚动时,将列表项包裹在RepaintBoundary可以避免列表项重绘,但是列表项重绘的开销非常小(如一个颜色块,或者一个较短的文本)时,不添加RepaintBoundary反而会更高效...可滚动组件的Sliver版 但是CustomScrollView,需要粘起来的可滚动组件就是CustomScrollView的Sliver了,如果直接将ListView、GridView作为CustomScrollView

4.5K20

给Android开发者Flutter上手指南

您可以为widget构造函数指定相对于组件的布局规则。 推荐参考StackOverflow上的一个Flutter构建RelativeLayout的例子。 如何使用widget定义布局属性?...Android,我们可以使用FrameLayout布局进行分层。 Flutter 使用Stack widget 控制widget一层。...ScrollViewFlutter中等价于什么? Android,ScrollView允许您包含一个控件,以便在用户设备的屏幕比控件内容小的情况下,使它们可以滚动。...Flutter,最简单的方法是使用ListView。但在Flutter,一个ListView既是一个ScrollView,也是一个Android ListView。... iOS ,你给 view 包裹上 ScrollView 来允许用户需要时滚动你的内容。 Flutter ,最简单的方法是使用 ListView widget。

2K20

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,如滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,应用不同的显示效果,如滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...指定 itemExtent 的值比让元素决定自身长度绘制时更高效,特别是滚动位置频繁变化的状态下,因为设置 itemExtent 可以让滚动系统提前知道列表的长度。...ListView.builder listview 的列表项较多或数量未知时,就需要使用 ListView.builder 来构建列表了 import 'package:flutter/material.dart...ListView.separated listview 的 item 间需要分割线时,我们就需要用到 ListView.separated import 'package:flutter/material.dart

8.7K51

Flutter 视图布局-前言

在学习 Flutter 的过程也看到一些江湖侠客们对于 Flutter 的议论。他们大多觉得 Flutter 不够友好、括号太多了,导致看起来代码非常复杂,对此呲之以鼻并以唱衰之。... Flutter 主要的布局方式有两种: 多子类元素布局 单子类元素布局 还有一个比较特殊的 LayoutBuilder,这个主要是构建一个可以依赖窗口大小的 Widget 树。...ListBody 一个 Widget,它沿着一个给定的轴,顺序排列它的元素。 ListView滚动的列表控件。...ListView 是最常用的滚动 Widget,它在滚动方向上一个接一个地显示它的元素。纵轴上,元素们被要求填充ListView。 Table 为其元素使用表格布局算法的 Widget。...FittedBox 按自己的大小调整其元素的大小和位置。 LimitedBox 一个其自身不受约束时才限制其大小的盒子。

2.2K110

Flutter

布局过程,渲染对象树的每个渲染对象都会接收对象的布局约束参数,决定自己的大小,然后父对象按照控件逻辑决定各个子对象的位置,完成布局过程。...五、Flutter的基础 StatelessWidget Widget 采用由、自顶向下的方式进行构建, Widget 控制着 Widget 的显示样式,其样式配置由 Widget 构建时提供...ListView控件 ListView 的构造函数 ListView.builder,则适用于 Widget 比较多的场景。其中,itemExtent 并不是一个必填参数。...因为如果这个参数为 null,ListView 会动态地根据 Widget 创建完成的结果,决定自身的视图高度,以及 Widget ListView 的相对位置。...通过 NotificationListener 则: 可以监听其 Widget 的任意 ListView; 不仅可以得到这些 ListView 的当前滚动位置信息,还可以获取当前的滚动事件信息 。

1.9K40

第130期:flutter的状态组件和状态管理

flutter无状态组件有很多,比如:Icon, IconButton, and Text。他们继承StatelessWidget类。...例如,ListView的内容超过渲染框时,它会自动滚动。大多数使用ListView的开发人员不想管理ListView滚动行为,所以就让ListView本身管理其滚动偏移量。..._active用来控制组件TapboxB的展示 组件定义了_handleTapboxChanged,组件TapboxB被点击的时候会更新_active 组件TapboxB接受active属性,同时定义了...onChanged属性方法,点击组件TapboxB时,会触发组件的_handleTapboxChanged方法,通知组件,从而实现组件的更新。...onTapDown和onTapUp调用setState()方法更新UI,并且_higlight状态发生变化。 _handleTap时,将状态传递到付组件,通知组件进行更新。

1.5K20

Flutter 布局常用的 widgets(Common layout widgets)

GridView 将多个widget放在一个可滑动的表格ListView 将多个widget放在一个可滑动的列表。 Stack 一个widget上面盖上另一个widget。...GridView 小结: 将多个widget放进一个表格 超出渲染范围时,自动提供滚动功能 可自定义格子,也可用下面提供的2种 GridView.count 指定列的数目 GridView.extent...ListView ListView能以列的形式展示数据。内容超过渲染范围时,自动提供滚动的功能。...ListView 小结 把子视图装进列表 水平或竖直都可以 支持滑动 相比于Column,可选配置比较少,但更易用并且支持滑动 和AndroidListView差别不大 示例1 把ListTile...Stack 小结: 用来在当前widget上面再盖上一层widget Stack children的第一个widget放在最下,后面的widget会一层层盖上去 Stack的内容不支持滚动 可以裁剪超出范围的

1.3K30

Android的FixScrollView自定义控件

-20170331111723820-1491053367.gif 基本思路:是最外层有个ScrollView,tab页面中有ListView(React-native原生实现也是ScrollView...),现在外部的ScrollView设定一个固定高度(屏幕高度+视频高度一半),接下来解决的难点是要使用原生的ScrollView根据手势以及ScrollView滚到底部判断是否把事件分发给页面ListView...) up--手指抬起事件 3如何在ViewGroup寻找控件 使用递归+instanceof可以ScrollView找到一组类型相同的控件,想找某一个tab页面某一个ListView,太坑了!...那么有没有其他的方法了呢?采用Hierarchy Viewer去寻找不同tab页面的listview不同点,上个两个tab布局树形的图。...group.getChildAt(i); if (child instanceof ScrollView) { //获取view整个屏幕的坐标如果

1.8K80

FlutterListView加载图片数据的优化

重要消息 网易云【玩转大前端】配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 *** 使用ListView懒加载模式时,ListView的Item中有图片信息时,快速滚动过程中会大量的浪费流量与内存...,甚至会造成滚动过程页面的卡顿效果。...在这里提出优化方案,开始滚动时不加载图片,滚动结束后再加载图片,这个优化方案实现的效果如下图所示,快速滑动列表数据时,图片未加载,运行内存无明显波动。...滚动组件滑动时就会分发滚动通知 child: buildListView(), ///每当有滑动通知时就会回调此方法 onNotification:...) { if (isLoadingImage) { ///这时将条目单独封装在了一个StatefulWidget return Image.network

3.5K11

Flutter布局基础——Column竖直布局

--more--> Column不能滑动(通常来说使用Column时,视图内容不能超过视图的高度),如果真的有很多子视图,需要滑动的时候,建议使用ListView。...: 视图视图上竖直方向,占用大小 MainAxisSize.min: 最小,设置了这个之后,再设置mainAxisAlignment,显示效果一致都是start的效果 MainAxisSize.max...: 最大,默认是这个,按视图大小来 mainAxisAlignment: 视图视图上的布局方式,竖直方向布局 MainAxisAlignment.spaceAround: 视图之间和视图距离视图都留有间距...的视图中,有Expanded或者Flexiable的视图,而且这个Column Widget又放在了一个Column Widget或ListView 或其他不固定高度的Widget,那么此时就会报错...需要注意的:二 和Row类似,视图内容超出了视图区域时,FlutterDebug模式下,会显示黄色的提示。效果如下: <!

1.6K50

羊皮书APP(Android版)开发系列(二十四)不常用但是很有用的两个属性:clipToPadding 和 clipChildren

提出问题: 当我们为ListView、ScrollView、GridView设置了paddingTop或paddingBottom的时候,我们发现滑动到顶部和底部的时候,默认情况下padding/margin...解决办法布局ListView、ScrollView、GridView中将clipToPadding设置为false即可。...提出问题: 类似微信未读消息的布局,设置的角标总是布局的内部,也就是在其父页面的内部,达不到微信的效果。 问题原因: clipChildren默认是true,导致布局不能绘制到布局的外面。...解决办法: 将clipChildren设置为false,这样子布局就可以绘制到布局的外面,就能达到预计的效果。...案例 ListView滚动的时候可以透过ActionBar看到下面的ListView的内容。 ?

1K20

Flutter 遇到的坑

Flutter Error: Navigator operation requested with a context that does not include a Navigator 解决办法:不能直接在...new MaterialApp调用Navigator.of(context).push() RefreshIndicatorListView条目较少时不触发下拉刷新 RefreshIndicator...是根据下拉时的偏移量触发刷新,条目较少时(未占满一个屏幕),ListView不能滚动,所以无法触发下拉刷新,给ListView的physice属性设置值为new AlwaysScrollableScrollPhysics...StatelessWidget或者StatefulWidget类的参数必须使用final定义,否则Dart Analysis会报warning,因为StatelessWidget是不可变的,StatefulWidget...实例本身是不可变的,并将其可变状态存储由createState方法创建的单独State对象,或者存储该State所订阅的对象,例如Stream或ChangeNotifier对象,其引用存储StatefulWidget

1.6K20
领券