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

Flutter ExpansionPanel不能在ListView上扩展

Flutter ExpansionPanel是一个可折叠面板的小部件,用于在用户点击时展开或折叠内容。然而,由于ListView是一个滚动小部件,它的子项在滚动时会被回收和重建,这导致ExpansionPanel的状态无法正确保存。

解决这个问题的一种方法是使用ExpansionPanelList,它是专门为可折叠面板设计的小部件。ExpansionPanelList可以与ListView一起使用,以实现在ListView上扩展的效果。

以下是使用ExpansionPanelList的示例代码:

代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<Item> _data = generateItems(5);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _data.map<Widget>((Item item) {
        return ExpansionPanelList(
          elevation: 1,
          expandedHeaderPadding: EdgeInsets.all(0),
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              item.isExpanded = !isExpanded;
            });
          },
          children: [
            ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return ListTile(
                  title: Text(item.headerValue),
                );
              },
              body: ListTile(
                title: Text(item.expandedValue),
              ),
              isExpanded: item.isExpanded,
            ),
          ],
        );
      }).toList(),
    );
  }
}

class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

在这个示例中,我们使用ExpansionPanelList来创建一个可折叠面板的列表。每个面板由ExpansionPanel组成,其中包含一个标题和一个内容部分。通过设置isExpanded属性,我们可以控制面板的展开和折叠状态。

这是一个简单的示例,你可以根据自己的需求进行修改和扩展。如果你想了解更多关于Flutter ExpansionPanelList的信息,可以查看腾讯云的Flutter开发文档:ExpansionPanelList

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

相关·内容

Flutter ExpansionPanel 超级实用展开控件

类似于这种,Flutter 给我们提供了相当便捷的 UI 组件 ExpansionPanelExpansionPanel 看名字也能看出来,是一个"扩展面板"。...一个material 扩展面板。它有一个 header 和一个 body ,可以展开或折叠。面板的 body 仅在展开时可见。 扩展面板仅用作于 ExpansionPanelList。...expansionCallback:展开回调,这里会返回点击的 index animationDuration:动画的时间 基本看完构造函数,我们也就知道该怎么去写代码了,那官方也提供给我们了一个...发现什么都没有了,看一下log: flutter: The following assertion was thrown during performLayout(): flutter: RenderListBody...body is ListView 在我们实际业务中,可能最多的业务为展开是一个列表,那需要 body 是ListView。 ?

6.1K30
  • Flutter 专题】图解 ListView 下拉刷新与拉加载 (一)

    和尚上次学 ListView 时,只学习了一下异步请求数据加载新闻和 Loading 等待的小知识点,但对于新闻列表数据的更新和加载更多是必不可少的,而实现【下拉刷新】与【上划加载更多】的方式有很多种...,今天和尚整理一下使用三方库 flutter_refresh 来实现列表的数据更新。...Flutter 的未知有太多,想多尝试几种方式。...flutter_refresh/flutter_refresh.dart'; 数据加载时暂时不用 ListView 变更为 new Refresh,和尚主要是处理 onHeaderRefresh 下拉刷新...问题一:初始化进入页面后,加载完第一页之后刷新数据不加载,第二次刷新数据才加载,且加载的是一次刷新的数据?

    1.6K31

    Flutter 专题】21 图解 ListView 下拉刷新与滑加载(三)

    和尚前段时间整理了两种 ListView 的异步加载数据时,下拉刷新与滑加载更多的方式,每种方式都有自己的优势,网上也有很多大神讲解过 ListView 数据流的种种处理方式,和尚根据实际遇到的情况整理一下尝试的第三种方案...RefreshIndicator 下拉刷新 Flutter 提供了自带刷新效果的 RefreshIndicator,这也是网上大神们用的最多的 Widget 之一,使用方式也很简单,RefreshIndicator...ScrollController 滑动加载更多 至此,列表的下拉刷新就完成了,接下来处理【滑加载更多】,这时我们可以借助 ScrollController,用来监听列表是否滑动到底部,主要分两步...: 初始化时添加监听事件,判断是否滑动到最底部; ListView 中添加监听方法。...rowNumber); isShowLoading = false; return null; }); }); } } ---- 和尚刚接触 Flutter

    1.3K41

    检查 Flutter 应用程序是否在 Web 运行(书籍推荐)

    您可以使用基础kIsWeb常量检查您的 Flutter 应用程序是否在 Web 浏览器运行。...第2章Flutter项目结构。介绍Android Studio开发环境下Flutter项目的创建步骤、Flutter项目目录结构、默认入口文件(main.dart)的构成及项目的运行和调试方法。   ...并结合多个技术范例和仿今日头条的“关注页面”“展示页面”等项目案例阐述Switch、SwitchListTile、SingleChildScrollView、ScrollController、ListTile、ListView...睡眠质量测试系统”“随手拍”“实验室安全测试平台”“天气预报系统”等项目案例阐述I_inearProgresslndicator、AlertDialog、SimpleDialog、BottomSheet、Card、ExpansionPanel...(2)案例典型实用:直接选取“易学、易用、易扩展”的技术范例和“有趣、经典、综合性”的项目案例,既可以激发读者的学习兴趣,巩固理论知识和强化工程实践能力,也可以将这些案例的解决方案创新应用到其他项目中。

    1.7K10

    Flutter代码模板,解放双手,提高开发效率必备

    开发的朋友们都有一个疑问,自带的快捷提示不是很丰富,没有你想要的功能,不管是Android Studio 还是IDEA,斗狠有局限性,有的朋友可能在用VSCode,那个插件有两个,我都试过都不好用,扩展性不好...于是我自己就写了一些常用Flutter代码模板,导入AS或者IDEA可以直接使用。...【说明】本文同步发布在github,欢迎star,https://github.com/AweiLoveAndroid/Flutter-learning ---- 一、导入方式(这里以AS或者IDEA...lvb 创建ListView.builder lvd 创建带分割线的ListView lvr 创建RadioListTile,可以单选的item lvt 创建带有各种ListTile的ListView...---- lv 创建基本的ListView: ? ---- con 创建完整的Container: ?

    1.9K10

    Flutter性能调优、复杂业务保证Flutter的高性能高流畅

    1.Debug Debug模式可以在真机和模拟器同时运行:会打开所有的断言,包括debugging信息、debugger aids(比如observatory)和服务扩展。...2.Release    Release模式只能在真机上运行,不能在模拟器运行:会关闭所有断言和debugging信息,关闭所有debugger工具。优化了快速启动、快速执行和减小包体积。...禁用所有的debugging aids和服务扩展。这个模式是为了部署给最终的用户使用。...3.Profile    Profile模式只能在真机上运行,不能在模拟器运行:基本和Release模式一致,除了启用了服务扩展和tracing,以及一些为了最低限度支持tracing运行的东西(比如可以连接...因为模拟器不能代表真实场景,所以不能在模拟器运行。 4. test    headless test模式只能在桌面上运行:基本和Debug模式一致,除了是headless的而且你能在桌面运行。

    1.2K31

    干货 | 携程火车票Flutter最佳实践

    Flutter是由谷歌开源的跨平台框架,可以快速在 iOS 和 Android 构建高质量的原生用户界面。...1.2 扩展性好 Flutter提供了多种不同的Channel,用于 Dart 和平台之间相互通信。...1)Debug 模式对应 Dart 的 JIT 模式,可以在真机和模拟器运行。该模式会打开所有的断言,以及所有的调试信息、服务扩展和调试辅助。此外,该模式支持有状态的 Hot reload。...2)Release 模式对应 Dart 的 AOT 模式,只能在真机上运行,不能在模拟器运行,其编译目标为最终的线上发布。该模式会关闭所有的断言,以及尽可能多的调试信息、服务扩展和调试辅助。...///Bad code 推荐使用children 构建List ListView(children: getItems(mList)) List getItems(List<FilterNode

    2.2K30

    「0821更新」Flutter入门系列教程汇总

    Flutter对于客户端工程师来说,相信大家已经陌生了,我最近在学习中汇总了一些总结经验,其中大部分内容为我个人见解,希望能给予你们帮助。在此,我想通过抛砖引玉,来吸引更多的人贡献学习心得。...Flutter Stack、Positioned 层叠布局 Flutter SingleChildScrollView 滚动控件 Flutter ListView 列表控件New Flutter ListView...下拉刷新,拉加载更多New Flutter GridView 网格控件New 常见问题 Flutter:从网络获取数据遇到的坑 Flutter问题:Column里面嵌套两个SingleChildScrollView...TextField Button RaisedButton ImageView Image LinearLayout Row/Column FrameLayout/RelativeLayout Stack ListView...ListView GridView GridView ViewPager PageView 友情链接:Flutter中文网 实用工具:json_to_dart

    1K20

    StatefulWidget的使用案例

    StatefulWidget是有状态组件,持有的状态可能在Widget生命周期改变。也就是说,如果我们想改变页面中的数据,那么就需要用到StatefulWidget。...首先我们在VSCode中安装一个名为“Awesome Flutter Snippets”的插件,该插件提供了Flutter中各种常用的类和方法的快速构建方式,可以极大地提升开发效率,如下所示: 捷径...扩展 描述 statelessW 无状态小工具 创建无状态小部件 statefulW 有状态的小工具 创建有状态小部件 build...提供非null itemCount可提高ListView估计最大滚动范围的能力。 customScrollV 自定义ScrollView 创建ScrollView使用条子创建自定义滚动效果的。...debugP 调试打印 将消息打印到控制台,您可以使用flutter工具的logs命令(flutter logs)访问该控制台。

    3.3K20

    Flutter中构建布局 顶

    这些小部件安排在ListView中,而不是列中,因为在小设备运行应用程序时,ListView会自动滚动。...在Flutter中,只需几个步骤即可在屏幕放置文本,图标或图像。 1.选择一个布局小部件来保存该对象。...您可以将行或列的子项放置在扩展小部件中,以控制沿着主轴的小部件大小。 扩展小部件具有flex属性,它是一个整数,用于确定小部件的弹性因子。 扩展小部件的默认弹性因子是1。...Dart code: main.dart Images: images Pubspec: pubspec.yaml 要修复一节中的示例,其中3行图像的行对于其渲染框太宽,并且导致红色条带,请使用扩展小部件包装每个小部件...您还可以使用Window > Scale更改模拟器窗口的大小(更改逻辑像素的数量)。 常见的布局小部件 Flutter拥有丰富的布局小部件库,但这里有一些最常用的布局部件。

    43.1K10

    Flutte部件目录-Material Components 顶

    应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...导航栏的背景色是默认的材质背景色ThemeData.canvasColor(实质是不透明的白色)。 BottomNavigationBarType.shifting,有四个或更多项目时的默认值。...FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容以提升应用程序中的主要操作。...FlatButton 平面按钮是在材料组件部件打印的部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印在材质小部件的图片,通过填充颜色(墨水)对触摸作出反应。 ?...ExpansionPanel 扩展面板包含创建流并允许轻量级地编辑元素。 ExpansionPanel小部件实现了这个组件。 ? SnackBar 带有可选操作的轻量级消息,简要显示在屏幕底部。

    9.5K40
    领券