前言

在flutter 中，为我们提供了一个可折叠的组件 ExpansionTile ，而且此组件还比较容易扩展，本篇文章将记录扩展的一种，card 可折叠的名片列表。

ExpansionTile 的使用

ExpansionTile({Key key,this.leading,//和ListTitle类似，在文字前面的Widget@required this.title,//和ListTitle类似，文字this.backgroundColor,//背景this.onExpansionChanged,//展开或者关闭的监听this.children = const <Widget>[],//内部孩子this.trailing,//和ListTitle类似，右侧图标this.initiallyExpanded = false,//默认是否展开})

从上面的源码中，我们可以看到 ExpansionTile 相关的一些属性，当然，属性比较多，我挑选的是一些比较常用的属性。

这里我将使用 ListView.builder + card + ExpansionTile 来实现一个卡片型的折叠列表。

初始化数据

  final List<Map<String, dynamic>> itemList = List.generate(50,(index) => {"id": index, "title": "item${index}", "content": "这里是折叠的内容"});

我需要做一个删除操作，因此需要写一个删除数据的方法

removeItem(int id) {itemList.removeWhere((element) => element["id"] == id);notifyListeners();}

ExpansionTile 的使用

ListView.builder(itemCount: model.itemList.length,itemBuilder: (context, index) {var item = model.itemList[index];return Card(// 记录唯一的keykey: PageStorageKey(item["id"]),child: ExpansionTile(expandedCrossAxisAlignment: CrossAxisAlignment.end,expandedAlignment: Alignment.centerRight,childrenPadding: EdgeInsets.all(10),maintainState: true,title: Text(item["title"],),children: [Text(item["content"]),TextButton.icon(onPressed: () => model.removeItem(item['id']),icon: const Icon(Icons.delete),label: const Text('Remove',),style: TextButton.styleFrom(primary: Colors.red),)],),);},)

运行结果如下

总结

整篇文章的记录比较简单，生成卡片折叠列表后，可以展开选项，并点击删除按钮，可以删除当前的cell 选项

Flutter ExpansionTile 折叠组件的使用相关推荐

【Flutter】自定义折叠组件
一.基础组件 import 'package:flutter/material.dart';const Duration _kExpand = Duration(milliseconds: 200); ...
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )
文章目录一.Image 组件简介二.Image 构造函数三.Image.network 构造函数四.Image.file 构造函数五.Image.asset 构造函数六.Image.mem ...
【Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )
文章目录一.StatefulWidget 组件二.创建 StatefulWidget 组件三.MaterialApp 组件四.Scaffold 组件五. 相关资源一.StatefulWid ...
Flutter InkWell Ink组件
文章目录 Flutter InkWell & Ink组件 Flutter InkWell & Ink组件 InkWell组件可以在用户点击是出现水波纹效果. Ink组件可以将水波纹效果 ...
ElementUI折叠组件bug问题及解决
目录 1.嵌套的折叠组件数据渲染问题 1.1场景: 1.2解决思路: 2.折叠组件中使用codemirror插件问题 2.1场景: 2.2 原因: 2.3 解决方法: 1.嵌套的折叠组件数据渲染问题 ...
Flutter Clip剪裁组件
文章目录 Flutter Clip剪裁组件简述使用原图 ClipRect ClipOval ClipRRect ClipPath 自定义剪裁 Flutter Clip剪裁组件简述 Flutte ...
Flutter中动态显示组件之“坑”，我来教你怎样爬上来。
Flutter中动态显示组件之"坑",我来教你怎样爬上来.
Flutter之BoxShadow组件
Flutter之BoxShadow组件 https://www.jianshu.com/p/3fed3b7178de

Flutter ExpansionTile 折叠组件的使用

ExpansionTile 折叠组件的使用

前言

ExpansionTile 的使用

总结

Flutter ExpansionTile 折叠组件的使用相关推荐

最新文章

热门文章