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. Hibernate初探之单表映射——第二章:Hibernate进阶

    第二章:Hibernate进阶 1.hibernate.cfg.xml常用配置 2.session 简介 3.transaction简介 4.session详解 5.对象关系映射常用配置 1.hibe ...

  2. mali --mobile platform GPU arch about vertex pipeline

    顶点这边 我看powerVR也就是说苹果也是如此 还有mali 目前看这俩平台的顶点数据都有这样一步优化 一个render pass的所有顶点shade的时候 先算pos 用这个结果拿最上一层顶点数据 ...

  3. K3CLOUD 常用数据表

    二.K3 Cloud 开发插件<K3 Cloud 常用数据表整理>一.数据库查询常用表 按 Ctrl+C 复制代码 按 Ctrl+C 复制代码 通过表T_META_OBJECTTYPE的F ...

  4. centos 7.3 开放端口并对外开放

    查看已打开的端口 # netstat -anp 查看想开的端口是否已开 # firewall-cmd --query-port=666/tcp 若此提示 FirewallD is not runnin ...

  5. selenium报错以及各解决方法

    1.driver.findElement(By.name("wd")).sendKeys("selenium"); 报错:The method sendKeys ...

  6. koa常用api文档整理

    koa 支持的配置 1.应用配置是 app 实例属性,目前支持的配置项如下 配置项名称 简介 app.name 应用名称(可选项) app.env 默认为 NODE_ENV 或者 developmen ...

  7. zhengrui集训笔记2

    Day_6 计算几何 点积\Large 点积点积 叉积\Large 叉积叉积 极角\Large 极角极角 < π\piπ :叉积判断 else :atan2 旋转\Large 旋转旋转 左乘第一 ...

  8. 第一次的django 和html的插肩而过

    新建一个Python Django工程: Win+R进入cmd命令界面,并cd到指定工程目录下,比如我的工程目录是E:\wamp\Apache24\www\ 输入E: 跳转E盘 输入cd wamp\A ...

  9. [Javascript] Nested generators

    To see how to call another generator inside a generator: function* numbers () { ; ; yield* moreNumbe ...

  10. fadeTo([[speed],opacity,[easing],[fn]])

    fadeTo([[speed],opacity,[easing],[fn]]) 概述 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数.大理石机械构件维修 ...