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

带有ListView.builder的Flutter ExpansionTile有奇怪的垂直滚动问题

Flutter是一种跨平台的移动应用开发框架,使用Dart语言编写。ListView.builder是Flutter中的一个构建列表视图的方法,用于构建具有大量项目的列表。ExpansionTile是一个可展开/折叠的小部件,允许用户通过点击标题来展开或折叠内容。

关于带有ListView.builder的Flutter ExpansionTile出现奇怪的垂直滚动问题,可能是由于以下原因之一:

  1. 嵌套滚动问题:ExpansionTile本身具有垂直滚动功能,而ListView.builder也具有垂直滚动功能,这可能导致嵌套滚动冲突。解决方法是将ExpansionTile放置在一个不可滚动的容器中,如SingleChildScrollView。
  2. 重用问题:ListView.builder使用itemBuilder回调函数构建列表项,它会在需要显示新的列表项时动态创建和重用小部件。如果在ExpansionTile中使用ListView.builder,则在展开或折叠ExpansionTile时,列表项可能会重新渲染和重建,导致滚动位置出现问题。解决方法是将ListView.builder放置在ExpansionTile的内容部分之外。

针对这个问题,以下是一种可能的解决方案:

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

class MyWidget extends StatelessWidget {
  final List<String> items = List.generate(100, (index) => "Item $index");
  List<bool> expandedList = List.generate(100, (index) => false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ExpansionTile Example'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: ExpansionTile(
              title: Text(items[index]),
              children: <Widget>[
                Container(
                  height: 200,
                  child: ListView.builder(
                    itemCount: 10,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Nested Item $index'),
                      );
                    },
                  ),
                ),
              ],
              onExpansionChanged: (value) {
                expandedList[index] = value;
              },
              initiallyExpanded: expandedList[index],
            ),
          );
        },
      ),
    );
  }
}

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

在这个示例中,我们将ExpansionTile放置在ListView.builder中的ListTile中,并使用expandedList列表来跟踪每个ExpansionTile的展开状态。同时,我们为了避免嵌套滚动问题,将内部ListView.builder包裹在一个固定高度的容器中。

以上是针对带有ListView.builder的Flutter ExpansionTile奇怪垂直滚动问题的解决方案。希望能帮到你。如果有其他问题,请随时提问。

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

相关·内容

Flutter 入门指北之滑动部件(超详细)

如果需要实现一个垂直滚动列表,可以直接通过 SingleChildScrollView 包裹 Column 来实现,列表内容全部塞到 Column 即可 class SingleChildScrollDemoPage...body: ListView( // 通过修改滑动方向设置水平或者垂直方向滚动 scrollDirection: Axis.vertical, // 通过 iterable.map...,所以 Flutter 提供了 separated 方法用来快速构建带有分割线 ListView 加入我们 item 之间分割线需要如下样式:奇数位和偶数位之间用黑色分割线,偶数位和奇数位之间用红色分割线...GridView 生成列表可以通过 ListView 来实现,那么同样,实现网格列表 Flutter 也提供了 GridView 来实现,实现 GridView 方法也很多...我数了下,大概 10...例如我们需要实现,当滚动距离大于一定距离时候显示一个回到顶部按钮,了 ScrollController 就能够非常方便实现 ScrollController 因为需要根据滑动距离显示回到顶部按钮

2.4K30
  • UITableView在Flutter中是什么?

    ListView另一个构造函数ListView.builder,则适用于子Widget比较多场景,这个构造函数两个关键参数: itemBuilder,是列表项创建方法。...这时,各自视图滚动和布局模型就是相互独立、分离,就很难保证整个页面统一一致滑动效果。 那么,Flutter是如何解决多ListView嵌套时,页面滑动效果不一致问题呢?...在Flutter中,一个专门控件CustomScrollView,用来处理多个需要自定义滚动效果Widget。...对于前两个问题,我们可以使用ScrollController进行滚动信息监听,以及相应滚动控制;而最后一个问题,则需要接收ScrollNotification通知进行滚动事件获取。...ListView组件,同时支持垂直方向和水平方向滚动,不仅提供了少量一次性创建子视图默认构造方法,也提供了大量按需创建子视图ListView.builder机制,并且支持自定义分割线。

    5.6K10

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

    (类似于 Android 中 id) scrollDirection:滚动方向,默认是垂直 reverse:是否按照阅读方向相反方向滑动。...ScrollController主要作用是控制滚动位置和监听滚动事件 child:子元素 import 'package:flutter/material.dart'; /** * @des Scroll...中 id) scrollDirection:滚动方向,默认是垂直 reverse:是否按照阅读方向相反方向滑动。...ListView.builder 当 listview 列表项较多或数量未知时,就需要使用 ListView.builder 来构建列表了 import 'package:flutter/material.dart...itemCount, ); key:当前元素唯一标识符(类似于 Android 中 id) scrollDirection:滚动方向,默认是垂直 reverse:是否按照阅读方向相反方向滑动

    8.7K51

    Flutter 首页必用组件NestedScrollView示例详解

    昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末链接,如果你想升级到最新版本...今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 可以在其内部嵌套其他滚动视图滚动视图,其滚动位置是固有链接。...在普通ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...交流 Flutter博客地址(近200个控件用法):http://laomengit.com 总结 到此这篇关于Flutter 首页必用组件NestedScrollView文章就介绍到这了,更多相关Flutter

    3.8K40

    Flutter 首页必用组件NestedScrollView

    老孟导读:昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末链接,...今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...在普通ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...: AlwaysScrollableScrollPhysics:总是可以滑动 NeverScrollableScrollPhysics:禁止滚动 BouncingScrollPhysics :内容超过一屏

    4.1K10

    Flutter》-- 6.高级组件

    参阅书籍: 《Flutter跨平台开发入门与实践》-- 向治洪(著) 6. 高级组件 6.1 可滚动组件 对于列表和长布局显示溢出问题,可以使用Flutter提供滚动组件来处理。...,//滚动方向,默认在垂直方向滚动 this.reverse = false,//控制从头还是从尾开始滚动,默认false,即从头开始滚动 this.padding,//插入子组件时内边距...key, Axis scrollDirection = Axis.vertical,//滚动方向,默认在垂直方向滚动 bool reverse = false,//控制从头还是从尾开始滚动...如果滚动方向是垂直方向,则表示子组件高度;如果滚动方向为水平方向,则表示子组件长度。...分层渲染可以降低视图渲染带来性能开销。 无论是创建组合组件还是创建自绘组件,首先需要考虑如何将复杂布局简化,把大问题拆分成若干小问题

    10.6K20

    Flutter 构建完整应用手册-列表 顶

    创建一个水平列表 有时,您可能想要创建一个水平滚动而不是垂直滚动列表。 ListView部件支持开箱即用水平列表。...我们将使用标准ListView构造函数,通过横向scrollDirection,这将覆盖默认垂直方向。...虽然默认ListView构造函数要求我们一次创建所有条目,但ListView.builder构造函数将在滚动到屏幕上时创建条目。 1.创建一个数据源 首先,我们需要一个数据源来处理。...这是ListView.builder将发挥作用地方。 在我们例子中,我们将在它自己行上显示每个字符串。...速度很快,并会自动将每个项目转换为适当类型。 但是,如果您更喜欢另一种模式,则有不同方法可以解决此问题

    2.5K20

    Flutter 视图布局(二)

    在 Flutter 视图布局(一)中文章结束时留下了一个问题,大家有尝试去实现吗? 如果大家认真看文章的话,我觉得这并不是很难东西。...Axis scrollDirection 滚动方向,即轴方向,Axis.vertical 垂直方向 和 Axis.horizontal 水平方向,默认为垂直方向 bool reverse 是否反向/颠倒顺序...cacheExtent 在视图可见区域之外有一个区域(即垂直是上下部分,水平是左右部分),用于缓存滚动即进入可见区域子类。...03 - 无线滚动例子 很好,我很佩服你提问勇气!不过没关系,Flutter 让然也知道这个问题,那么我们就来看看它有哪些相关方法可以使用。 不用多说,我们还是来先看源码。...源码中说到 ListView 4中设置子元素方式: List ListView.builder ListView.separated ListView.custom 第一种 List

    3K10

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

    这次 Flutter 小技巧是 ListView 和 PageView 花式嵌套,不同 Scrollable 嵌套冲突问题相信大家不会陌生,今天就通过 ListView 和 PageView 三种嵌套模式带大家收获一些不一样小技巧...,只有横向移动时才会触发 PageView 手势,当然, 如果要说这个粗暴写法什么问题的话,大概就是降低了 PageView 响应灵敏度。...同方向 PageView 嵌套 ListView介绍完常规使用,接着来点不一样,在垂直切换 PageView 里嵌套垂直滚动 ListView , 你第一感觉是不是觉得不靠谱,为什么会有这样场景...答案是肯定,毕竟产品小脑袋,怎么会想不到在垂直滑动 ListView 里嵌套垂直切换 PageView 这种需求。...= true;来让 Flutter 输出手势竞技处理过程。

    2K20

    Flutter 刷新页面:通过下拉刷新提升用户体验

    当我们使用 RefreshIndicator 来包裹滚动内容,用户就可以通过下拉页面来触发更新动作。...Flutter RefreshIndicator 被设计来配合 ListView 或者其他滚动挂件使用,通过可视化反馈和平缓更新动作来提升用户体验。...RefreshIndicator 挂件应该覆盖在需要刷新滚动内容上。还有很重要一点需要注意,RefreshIndicator 只在垂直滚动 child 上才可工作,。...错误处理和用户反馈 错误处理是任何与数据源交互功能重要一点,下来刷新也不例外。当实现 onRefresh 回调,预测和处理潜在错误至关重要,比如网络问题或者服务错误,这些会在拉取新数据时候发生。...在复杂 Flutter 应用程序中拉动刷新 在更复杂 Flutter 应用程序中,下拉刷新可能和多个状态层和数据源交互。在这种场景中,实现一个能够处理复杂性强大状态管理解决方案至关重要。

    21510

    Flutter | 滚动组件,ListView,GridVIew等

    滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局; 可滚动组件都直接或间接包含一个...由于可滚动组件默认方向一般都是沿垂直方向,所以默认情况下主轴就是指垂直方向,水平方向同理 SingleChildScrollView SingleChildScrollView 类似于 Android... 长度为 itemExtent 值;这里长度指的是方向上子组件长度,也就是说滚动垂直方向,则 itemnExtent 代表子组件高度;如果是水平方向,则是子组件宽度。...是异步执行完成回调 还有问题可以参考这篇文章 最终效果如下: 添加固定列表头 很多时候我们需要给列表添加一个固定表头,比如实现一个商品列表,就需要在列表添加一个 商品列表 标题 以往经验告诉我...因此,为了能让可滚动组件能和 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件 Sliver 版,如 SliverList,SliverGrid 等,实际上 Sliver

    8.5K20

    革命性移动端开发框架-Flutter时间简史

    Flutter是最流行框架呢,是没有任何问题,但它并不是一个最近才出现开发框架。...,工具问题,版本问题 Flutter入门:快速上手Flutter开发 Dart基础知识 什么是声明式UI Flutter入门基础知识 项目结构、资源、依赖和本地化 认识视图(Views) 布局与列表 状态管理...JSON解析与复杂模型转换实用技巧 基于shared_preferences本地存储操作 Flutter进阶提升:玩转列表组件 基于ListView实现水平和垂直方式滚动列表 基于ExpansionTile...应用 Flutter进阶拓展:Flutter升级与适配指南 Flutter升级与适配指南 当你系统化Get到上面的是技术之后,成为一名优秀Flutter开发人员,以及从事中型甚至大型Fltter项目开发是不会有什么问题...哪些学习资料? 视频教程《Flutter从入门到进阶实战携程网App》 awesome-flutter-cn Flutter专栏

    1.6K20

    三段代码打造好看流式布局,flutter之wrap【flutter20个实例之七】

    二、讲解 1.结构拆分 首先,页面是个滚动列表,所以一定需要一个listview来容纳 然后每一个item,个标题,比如精选 标题下方是一个流式布局,可自动切换行,用到了flutterwrap组件...if (_list.isEmpty) { return Text('加载中....'); } else { return ListView.builder(...这里通过column来设置,一个组件就是标题,第二个组件就是wrap流式布局 4.wrap流式布局 我们重要来说这个 Wrap可以为子控件进行水平或者垂直方向布局,且当空间用完时,Wrap会自动换行,...: Wrap( direction: Axis.vertical, ... ) alignment属性控制主轴对齐方式,crossAxisAlignment属性控制交叉轴对齐方式,对齐方式只对剩余空间行或者列起作用...属性表示Wrap交叉轴方向上子控件方向,取值范围是up(从上到下)和down(从下到上) 三、源码(可直接运行调试) import 'package:flutter/material.dart';

    1.1K20

    Flutter ListView 列表控件

    FlutterListView与Android中ListView具有同等功能。...Sliver延迟构建模型请参见本系列文章《Flutter SingleChildScrollView 滚动控件》中基本概念处。 本文示例效果图(全) ?...,本章第一节中已经介绍过,不再赘述;第二组是ListView各个构造函数(ListView多个构造函数)共同参数,我们重点来看看这些参数。...cacheExtent 预加载区域。 不支持Sliver懒加载模型。 默认构造函数一个children参数,它接受一个Widget列表。...可滚动组件构造函数如果需要一个列表项Builder,那么通过该构造函数构建滚动组件通常就是支持基于Sliver懒加载模型,反之则不支持,其他可滚动组件亦是如此。

    3K20

    android使用flutterListView实现滚动列表示例代码

    这里表现其实就相当于一个固定长度容器,然后超出内容是不可见,只有当你向上或向下滑动屏幕时,视窗外看不见内容才会出现在视窗中。...如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单,因为 Flutter 为我们提供了 ListView 组件。...你可以对比用 ListView 和用 ListView.builder 渲染 1000 个列表时,体验是否差别。...比如,我们需要列表每个 item 之间一个分割线,就可以跟下面那样,加一个 Divider 组件。...正常来说,前面三个已经可以满足我们日常使用需求了,无需自定义。 总结,上面主要讨论了 ListView 几个构造函数及用法,讨论如何实现常见滚动列表。

    1.8K40
    领券