20个Flutter实例视频教程-第14节: 展开闭合列表案例
博客地址;
https://jspang.com/post/flutterDemo.html#toc-5b0
视频地址:
https://www.bilibili.com/video/av39709290/?p=14
新建类:
expansion_panel_list.dart 这是一个动态的widget
然后新建类,开和 和 打开,我们要做一个控制这个的类
声明两个List。一个int类型的List,为了生成数组
第二个数组是ExpandStateBean的List
List<int> mList;
List<ExpandStateBean> expandStateBeanList;
然后再去写构造方法
开始写最主要的build方法
expandState这个组件必须放在可滚动的组件内,这里我们使用SingleChildScrollView这是个最简单的可滚动的widget
下面就是我们的主角:ExpansionPanelList
修正一个地方。这里的动态类名之前写错了。应该叫做:ExpanionPanelListDemo
如果不纠正这个错误。在写真正的ExpanionPanelList组件的时候,里面的callback函数就快捷键打不出来了。
这里遍历一下mList这个对象。最后需要再toList().
toList是Dart的语法
这样就基本差不多了。还需要完善一下回调的方法:
再修正代码一个地方 变量名和视频中命名的不一致
我们声明一个内部的方法:_setCurrentIndex
传递索引值和 一个打开关闭的状态。循环遍历我们的对象expandStateList,找到对应的索引值进行取反
这样我们直接传递给ExpansionPanelList插件的回调函数
main.dart
效果展示:
最终代码:
import 'package:flutter/material.dart';
import 'expansion_tile.dart';
import 'expansion_panel_list.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
//home: ExpansionTileDemo()
home: ExpansionPanelListDemo()
);
}
}
main.dart
import 'package:flutter/material.dart'; class ExpansionPanelListDemo extends StatefulWidget {
@override
_ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();
} class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
List<int> mList;
List<ExpandStateBean> expandStateList;
_ExpansionPanelListDemoState(){
mList=new List();
expandStateList=new List();
for(int i=;i<;i++){
mList.add(i);
expandStateList.add(ExpandStateBean(i,false));//索引是i,状态全部关闭
}
} _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('expansion no.$index'),
),
isExpanded: expandStateList[index].isOpen
);
}).toList(),
),
),
);
}
} class ExpandStateBean {
var isOpen;
var index;
ExpandStateBean(this.index,this.isOpen);
}
expansion_panel_list.dart
20个Flutter实例视频教程-第14节: 展开闭合列表案例的更多相关文章
- 20个Flutter实例视频教程-第13节: 展开闭合案例
20个Flutter实例视频教程-第13节: 展开闭合案例 视频地址: https://www.bilibili.com/video/av39709290/?p=13 博客地址: https://js ...
- 20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1
20个Flutter实例视频教程-第10节: 一个不简单的搜索条-1 视频地址: https://www.bilibili.com/video/av39709290/?p=10 博客地址: https ...
- 20个Flutter实例视频教程-第03节: 不规则底部工具栏制作-1
第03节: 不规则底部工具栏制作-1 博客地址: https://jspang.com/post/flutterDemo.html#toc-973 视频地址: https://www.bilibili ...
- 20个Flutter实例视频教程-第05节: 酷炫的路由动画-1
视屏地址: https://www.bilibili.com/video/av39709290/?p=5 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第02节: 底部导航栏制作-2
视频地址: https://www.bilibili.com/video/av39709290?p=2 博客地址: https://jspang.com/post/flutterDemo.html#t ...
- 20个Flutter实例视频教程-第04节: 不规则底部工具栏制作-2
视频地址: https://www.bilibili.com/video/av39709290/?p=4 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2
博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...
- 20个Flutter实例视频教程-第07节: 毛玻璃效果制作
视频地址: https://www.bilibili.com/video/av39709290/?p=7 博客地址: https://jspang.com/post/flutterDemo.html# ...
- 20个Flutter实例视频教程-第08节: 保持页面状态
博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av397092 ...
随机推荐
- 可空类型Nullable
Nullable类型: 值类型变量默认为0,不可空,为了使它可空,出现了Nullable类型,类型前面加? 变为引用类型 值类型是没有null值的,比如int,DateTime,它们都有默认值.举个 ...
- 英特尔和Red Hat合作实现Gnome桌面的Wayland支持
在发布支持XMir的Linux图形驱动程序xf86-video-intel 2.99.901后数天,英特尔宣布撤回对XMir的支持,XMir补丁不会合并到上游项目.XMir是Mir显示服务器的X11兼 ...
- 如何与强势的人相处zz
要和强势的人相处良好,须知道强势的人有两个很显著的特点:一.以自我观点为中心.二.怕别人否定自己.强势的主要作用也有两个:一.支配别人.二.掩盖自卑. 首先,要区分一下强势的人和特立独行的人,这两类人 ...
- # kubernetes调度之nodeName与NodeSelector
系列目录 Kubernetes的调度有简单,有复杂,指定NodeName和使用NodeSelector调度是最简单的,可以将Pod调度到期望的节点上. 本文主要介绍kubernetes调度框架中的No ...
- docker--caffe
Running an official image You can run one of the automatic builds. E.g. for the CPU version: docker ...
- 第 2 章 第 2 题 找" 重数/漏数 "问题 位向量实现
问题分析 输入:一个包含了4 300 000 000个32位整数的文件( 其中可能有重复出现的数字 ) 输出:一个在这个文件中重复出现过了的数字 约束:无 解答思路 第一章中,我们学习了如何用位向量进 ...
- 【windows phone】CollectionViewSource的妙用
在windows phone中绑定集合数据的时候,有时候需要分层数据,通常需要以主从试图形式显示.通常的方法是将第二个ListBox(主视图)的数据源绑定到第一个ListBox (从视图)的Selec ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- 关于WordPress后台设置中的WordPress地址和站点地址的解读
今天我在TeachCourse博客中不小心把WordPress地 址和站点地址都改为了http://www.qgjie123.com,结果重新刷新TeachCourse博客页面的时候,页面排版错乱的情 ...
- machine learning for hacker记录(3) 贝叶斯分类器
本章主要介绍了分类算法里面的一种最基本的分类器:朴素贝叶斯算法(NB),算法性能正如英文缩写的一样,很NB,尤其在垃圾邮件检测领域,关于贝叶斯的网上资料也很多,这里推荐那篇刘未鹏写的http://mi ...