ExpansionTile组件

ExpansionTile Widget就是一个可以展开闭合的组件,常用的属性有如下几个。

  • title:闭合时显示的标题,这个部分经常使用Text Widget
  • leading:标题左侧图标,多是用来修饰,让界面显得美观。
  • backgroundColor: 展开时的背景颜色,当然也是有过度动画的,效果非常好。
  • children: 子元素,是一个数组,可以放入多个元素。
  • trailing : 右侧的箭头,你可以自行替换但是我觉的很少替换,因为谷歌已经表现的很完美了。
  • initiallyExpanded: 初始状态是否展开,为true时,是展开,默认为false,是不展开。

代码示例如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme: new ThemeData.dark(),
home:ExpansionTileDemo()
);
}
} class ExpansionTileDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Expansion Tile Demo')),
body: Center(
child: ExpansionTile(
title: Text('Expansion Tile'),
leading: Icon(Icons.ac_unit),
backgroundColor: Colors.white12,
children: <Widget>[
ListTile(
title: Text('list tile'),
subtitle: Text('subtitle'),
),
],
initiallyExpanded: true, //打开状态 不写默认false闭合状态
),
),
);
}
}

Flutter还很贴心的为提供了一个ExpansionPanelList Widget,它可以实现展开闭合的列表功能。

ExpansionPanelList 常用属性

  • expansionCallback:点击和交互的回掉事件,有两个参数,第一个是触发动作的索引,第二个是布尔类型的触发值。
  • children:列表的子元素,里边多是一个List数组。

注意:ExpansionPanelList要在SingleChildScrollView里使用

修改上面的代码如下:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme: new ThemeData.dark(),
//home:ExpansionTileDemo(),
home: ExpansionPanelListDemo(),
);
}
} class ExpandStateBean{ //控制打开关闭状态
var index,isOpen;
ExpandStateBean(this.index, this.isOpen);
} class ExpansionPanelListDemo extends StatefulWidget { _ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();
} class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
List<int> mList; //列表数组
List<ExpandStateBean> expandStateList; //自定义ExpandStateBean的数组expandStateList
_ExpansionPanelListDemoState(){ //构造方法
mList = new List(); //初始化
expandStateList = new List(); //初始化
for(int i=; i<; i++){
mList.add(i);
expandStateList.add(ExpandStateBean(i, false));
}
} _setCurrentIndex(int index, isExpand){
setState(() {
expandStateList.forEach((item){
if(item.index == index){
item.isOpen = !isExpand;
}
});
});
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('expansion panel list'),),
body: SingleChildScrollView( //可滚动的组件
child: ExpansionPanelList(
expansionCallback: (index,bol){
_setCurrentIndex(index,bol);
},
children: mList.map((index){
return ExpansionPanel(
headerBuilder: (context,isExpanded){
return ListTile(
title: Text('This is NO.$index'),
);
},
body: ListTile(
title: Text('expansin no.$index'),
),
isExpanded: expandStateList[index].isOpen
);
}).toList(),
),
),
);
}
}

Flutter之ExpansionTile组件的更多相关文章

  1. Flutter中Expanded组件用法

    Flutter中Expanded组件用法 Expanded组件可以使Row.Column.Flex等子组件在其主轴方向上展开并填充可用空间(例如,Row在水平方向,Column在垂直方向).如果多个子 ...

  2. 【老孟Flutter】Stateful 组件的生命周期​

    老孟导读:关于生命周期的文章共有2篇,第一篇是介绍 Flutter 中Stateful 组件的生命周期. 博客地址:http://laomengit.com/blog/20201227/Statefu ...

  3. 解决flutter的image_cropper组件引入报错问题

    在使用flutter的图片裁剪组件image_cropper,github:https://github.com/hnvn/flutter_image_cropper 根据它的要求,安卓需要在文件[A ...

  4. flutter 自定义输入框组件

    一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何时时得到输入框的值 二.快速 ...

  5. Flutter常用布局组件

    Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...

  6. Flutter ListView 列表组件

    列表常见的情况: 1.垂直列表 2.垂直图文列表 3.横向列表 4.动态列表 名称 类型 说明 scrollDirection Axis Axis.horizontal 横向列表 Axis.verti ...

  7. Flutter Container容器组件、Text文本组件详解

    import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...

  8. 【Flutter学习】组件通信(父子、兄弟)

    一,概述 flutter一个重要的特性就是组件化.组件分为两种状态,一种是StatefulWidget有状态组件,一种是StatelessWidget无状态组件. 无状态组件不能更新状态,有状态组件具 ...

  9. 【Flutter学习】组件学习之目录

    01. Flutter组件-Layout-Container-容器  02. Flutter组件-Text-Text-文本  03. Flutter组件-Text-RichText-富文本  04. ...

随机推荐

  1. rabbitmq 一些属性

    消息属性 消息有14个属性,最常用的几种: deliveryMode:持久化属性 contentType:编码 replyTo:指定一个回调队列 correlationId:消息id mandator ...

  2. jpa 如果返回java对象,会自动更新对象值(坑!!)

    //上一段示例代码List<Member> memberList = memberDao.findByLoginNameIn(names);for (Member m : memberLi ...

  3. 洛谷P2114 起床困难综合症【位运算】【贪心】

    题目:https://www.luogu.org/problemnew/show/P2114 题意:有n个操作,每个可以是与.或.异或 一个数. 初始值是0~m之间的一个数,问经过n个运算之后,可以得 ...

  4. [2019HDU多校第五场][HDU 6626][C. geometric problem]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6626 题目大意:给出平面上六个点\(A,B,M,N,X,Y\)以及两条直线\(L1,L2\),要求在四 ...

  5. 为什么添加了@Aspect 还要加@Component(转)

    官方文档中有写: You may register aspect classes as regular beans in your Spring XML configuration, or autod ...

  6. python自动华 (二)

    Python自动化 [第二篇]:Python基础-列表.元组.字典 本节内容 模块初识 .pyc简介 数据类型初识 数据运算 列表.元组操作 字符串操作 字典操作 集合操作 字符编码与转码 一.模块初 ...

  7. PHP实现页面跳转功能

    PHP跳转到指定页面的问题通常都会建设网站需求上看到,比如我们需要从一个页面跳转到另一个页面来实现某个功能或者效果.其实在PHP中进行页面跳转是有多种方法的,那么这篇文章就给大家介绍下,有哪些方法可以 ...

  8. 009_Linux驱动之_request_irq()函数

    1. request_irq()函数原型 int request_irq(unsigned int irq, irq_handler_t handler, unsigned long irqflags ...

  9. python 改变函数实参的值

    def change(n): n[] = 'Mr Gumby' names = ['Mrs Entity', 'Mrs. Thing'] change(names) print(names) resu ...

  10. 一行代码加快pandas计算速度

    一行代码加快pandas计算速度 DASK https://blog.csdn.net/sinat_38682860/article/details/84844964 https://cloud.te ...