Flutter ExpansionPanel 可展开的收缩控件
文档:https://api.flutter.dev/flutter/material/ExpansionPanel-class.html
demo:
import 'package:flutter/material.dart'; class ExpansionPanelItem {
final String headerText;
final Widget body;
bool isExpanded; ExpansionPanelItem({
this.headerText,
this.body,
this.isExpanded,
});
} class ExpansionPanelDemo extends StatefulWidget {
@override
_ExpansionPanelDemoState createState() => _ExpansionPanelDemoState();
} class _ExpansionPanelDemoState extends State<ExpansionPanelDemo> {
List<ExpansionPanelItem> _expansionPanelItems; @override
void initState() {
super.initState(); _expansionPanelItems = <ExpansionPanelItem>[
ExpansionPanelItem(
headerText: 'Panel A',
body: Container(
padding: EdgeInsets.all(16.0),
width: double.infinity,
child: Text('Content for Panel A.'),
),
isExpanded: false,
),
ExpansionPanelItem(
headerText: 'Panel B',
body: Container(
padding: EdgeInsets.all(16.0),
width: double.infinity,
child: Text('Content for Panel B.'),
),
isExpanded: false,
),
ExpansionPanelItem(
headerText: 'Panel C',
body: Container(
padding: EdgeInsets.all(16.0),
width: double.infinity,
child: Text('Content for Panel C.'),
),
isExpanded: false,
),
];
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ExpansionPanelDemo'),
elevation: 0.0,
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ExpansionPanelList(
expansionCallback: (int panelIndex, bool isExpanded) {
setState(() {
_expansionPanelItems[panelIndex].isExpanded = !isExpanded;
});
},
children: _expansionPanelItems.map(
(ExpansionPanelItem item) {
return ExpansionPanel(
isExpanded: item.isExpanded,
body: item.body,
headerBuilder: (BuildContext context, bool isExpanded) {
return Container(
padding: EdgeInsets.all(16.0),
child: Text(
item.headerText,
style: Theme.of(context).textTheme.title,
),
);
},
);
}
).toList(),
),
],
),
),
);
}
}
效果:
Flutter ExpansionPanel 可展开的收缩控件的更多相关文章
- Markdown渲染后文章标题收缩控件
文章首发于szhshp的第三边境研究所(szhshp.org), 转载请注明 一个让Markdown-Post的标题拥有Collapse功能的JS 直接把鼠标放在这篇文章下方的header上,点击标题 ...
- Flutter 宽高比(比率)控件 AspectRatio
const AspectRatio({ Key key, @required this.aspectRatio, Widget child,}) void main() { runApp( n ...
- IOS 多级列表展开控件
项目中实现了一个可以多级展开的列表控件.每次展开都是互斥的,就是说,展开一个cell 就会关闭其他展开的层. 可以呈现的效果如下图.第一个图片是应用中实现的效果.第二个是Demo中的效果.如果有新的需 ...
- java Swing 如何添加点击可展开菜单控件( JMenuBar如何使用?)
准备: JMenuBar 点击可展开控件本体 JMenu 点击可展开控件中的一级菜单 JMenuItem 点击可展开控件中的二级菜单 JFrame 程序运行时弹出的那个框框 这是一个使用点击可展开菜 ...
- Flutter 布局控件完结篇
本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...
- Flutter 轻量级的ToolTip控件
轻提示的效果在应用中是少不了的,其实Flutter已经准备好了轻提示控件,这就是toolTip. 轻量级操作提示 其实Flutter中有很多提示控件,比如Dialog.Snackbar和BottomS ...
- Flutter样式和布局控件简析(二)
开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 ...
- windowsPhone一些不常见控件
1.InkPresenter:可以产生手写效果的控件. http://www.cnblogs.com/randylee/archive/2010/08/10/1791222.html 2.Thumb: ...
- (转载) Android RecyclerView 使用完全解析 体验艺术般的控件
Android RecyclerView 使用完全解析 体验艺术般的控件 标签: Recyclerviewpager瀑布流 2015-04-16 09:07 721474人阅读 评论(458) 收藏 ...
随机推荐
- 使用CIFAR-10样本数据集测试卷积神经网络(ConvolutionalNeuralNetwork,CNN)
第一次将例程跑起来了,有些兴趣. 参考的是如下URL: http://www.yidianzixun.com/article/0KNz7OX1 本来是比较Keras和Tensorflow的,我现在的水 ...
- Python练习题---判断回文数
设n是一个任意自然数,如果n的各位数字反向排序所得的自然数与n相等,则n被称为回文数,从键盘输入一个5位数字 ,请编写程序判断这个数字是不是回文数. 思路:先获取一个字符串,再判断该字符串是否满足是自 ...
- postgresql —— 数组类型
创建数组 CREATE TABLE sal_emp ( name text, pay_by_quarter integer[] --还可以定义为integer[4]或integer ARRAY[4] ...
- java通过url读取网络图片
使用java.net读取网络文件 import java.io.BufferedInputStream; import java.io.FileOutputStream; import java.io ...
- 行为型模式(三) 迭代器模式(Iterator)
一.动机(Motivate) 在软件构建过程中,集合对象内部结构常常变化各异.但对于这些集合对象,我们希望在不暴露其内部结构的同时,可以让外部客户代码透明地访问其中包含的元素:同时这种"透明 ...
- 2019-2020-1 20199312 《Linux内核原理与分析》 第八周作业
ELF(Executable and Linkable Format)可执行的和可链接的格式.(对应Windows为PE) 其包含了以下三类: 可重定位文件:保存着代码和适当的数据,用来和其它的目标文 ...
- STAF Trust Level 4 required for FS copy request
C#中使用STAF从本机传输文件到远程的电脑,出现如下错误: 解决方法: 修改service.ini文件,添加信任IP段,并将trust level 设置为5,修改后文件内容如下 trace enab ...
- 【转发】c#做端口转发程序支持正向连接和反向链接
可以通过中转server来连接sql server,连接的时候用ip,port,不是冒号,是逗号 但试过local port 21想连接AS400的FTP却不成功...为咩涅... https://w ...
- setState回调
this.state = {foo: 2}; this.setState({foo: 123}, ()=> { console.log(foo); });
- 【mysql】知识点
mysql执行原理 只要是B/S架构,都是会有客户端与服务端,mysql也不例外. 首先客户端发出一个请求,这个请求就是一个查询请求(Select),而它请求的对象就是服务端,服务端是怎么处理这项查询 ...