如何实现扩展列表


我们在上一章回中介绍了MaterialBanner相关的内容,本章回中将介绍扩展列表.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

我们在本章回中介绍的扩展列表和普通的列表类似,不同之处在于列表中的每个项目最右侧有一个倒三角,点击倒三角可以展开项目中的具体的内容,再点击一次可以隐藏
具体的内容,只剩下一个标题。鉴于列表中每个项目都可以隐藏和展开,我们称包含这种项目的列表为扩展列表。Flutter提供了ExpansionPanelList组件来表示扩
展列表,扩展列表中的项目使用ExpansionPane组件表示。官方称列表项中的倒三角为ExpansionIcon.本章回中将详细介绍这些组件的使用方法。

2 使用方法

2.1 ExpansionPanelList

和其它的组件一样,ExpansionPanelList组件与提供了相关的属性来控制自己,下面是常用的属性:

  • expandIconColor属性:用来控制扩展图标的颜色,就是我们在文中叫的倒三角;
  • dividerColor属性: 用来控制列表项目之间的分隔线的颜色;
  • expansionCallback属性: 它是方法类型,点击列表中任意项目时将会回调该属性对应的方法;
  • children属性:用来存放列表中的项目,它可以存放多个项目,不过要求项目类型为ExpansionPanel;

2.2 ExpansionPanel

接下来我们介绍一下ExpansionPanel组件,它主要用来充当ExpansionPanelList中项目,该组件提供了相关的属性来控制自己,详细如下:

  • headerBuilder属性: 主要用来创建组件,被创建的组件用来当作列表项目的标题;
  • body属性:主要用来存放列表项目中具体的内容,项目被隐藏时看不到该项目的内容,项目被展开时才可以看到该项内容;
  • isExpanded属性: 用来控制该组件是否被隐藏,默认值为false,表示隐藏body中的内容,只显示标题中的内容;
  • canTapOnHeader:用来控制是否可以点击标题来展开或者隐藏body中的内容,默认值是false;也就是说默认通过倒三角隐藏或者展开body中的内容;
  • backgroundColor:用来控制项目的背景颜色,包含标题和body中的所有背景色;
    此外,还有一个ExpansionPanelRadio组件,它是ExpansionPanel类的子类,主要用来实现类似单选列表一样的互斥功能:扩展列表中所有子项目中有且只有一个
    项目能展开。它和ExpansionPanel组件的使用方法类似,只是多了个value属性,我在这里就不详细介绍了,大家可以自己动手实践。

3 示例代码

final Map<int,bool> _isExpandList = {
   0:false,1:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值