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) 收藏 ...
随机推荐
- mysql启动错误:Starting MySQL.. ERROR! The server quit without updating PID file错误
1.原因是因为 mysql-bin.0000*的文件占满系统盘,磁盘空间不足导致无法写入. 解决方法: 如果不需要二进制日志文件,二进制文件可以实现数据库复制以及即时点恢复. 查看日志在配置文件的da ...
- 如何解决WinForm中TableLayout控件闪烁的问题
public FormReg() { InitializeComponent(); typeof(TableLayoutPanel) .GetProperty("DoubleBuffered ...
- 【转】An introduction to using and visualizing channels in Go
An introduction to using and visualizing channels in Go 原文:https://www.sohamkamani.com/blog/2017/08/ ...
- UVA1194 Machine Schedule[二分图最小点覆盖]
题意翻译 有两台机器 A,B 分别有 n,m 种模式. 现在有 k 个任务.对于每个任务 i ,给定两个整数$ a_i\(和\) b_i$,表示如果该任务在 A上执行,需要设置模式为 \(a_i\): ...
- 十二.Protobuf3编码
本文档描述了协议缓冲消息的二进制格式.在应用程序中使用Protocol Buffer不需要理解这一点,但是了解不同的Protocol Buffer格式如何影响编码消息的大小会非常有用. 一条简单的信息 ...
- 文件操作-with和上下文管理器
代码: # -*- coding:utf-8 -*- # 普通版 如果写入的过程中出错 则不会释放资源 def m1(): f = open("test.txt","w& ...
- mysql导出PDM文件步骤
打开mysql把表导出成sql文件(如:service.sql) powerdesigner:选择 File--->Reverse Engineer--->Database 重命名(mod ...
- LightOJ - 1410 - Consistent Verdicts(规律)
链接: https://vjudge.net/problem/LightOJ-1410 题意: In a 2D plane N persons are standing and each of the ...
- Sqoop 安装与简单测试
sqoop基于Hadoop与Hive Hadoop https://www.cnblogs.com/xibuhaohao/p/11772031.html Hive https://www.c ...
- 第三节.vue.js属性与方法
1. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>I ...