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) 收藏 ...
随机推荐
- 基于Java+Selenium的WebUI自动化测试框架(十一)-----读取Excel文件(POI)(1)
上一篇说了利用JXL的jar包来读取Excel的代码.在Java中,还可以用另外一种jar包来读取Excel的内容,那就是Apache的POI. 这里和之前一样,需要导入POI的jar包,建议导入这三 ...
- java singleton(单例设计模式)
单例设计模式的主要作用是: 1.控制资源的使用,我们对资源使用线程同步来实现并发访问. 2.节约资源,我们对一个类只进行一个实例化进行全局的资源访问,节约了内存. 3.作为通信媒介,也是数据共享,可以 ...
- Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入 ...
- 接口中的JSON报文
原始报文: 请求报文: [ { "appNo" : "", "applicantCredentialCode" : "" ...
- 题解 UVa10780
题目大意 多组数据,每组数据给定两个整数 \(m,n\),输出使 \(n\%m^k=0\) 的最大的 \(k\).如果 \(k=0\) 则输出Impossible to divide. 分析 计数水题 ...
- Java邮件开发(三):解决附件名为乱码及显示友好名称
1.附件的名称只能为英文,中文乱码 2.友好名称的显示. 我们使用163等邮箱发送邮件时,我们经常可以看到收件人一栏中会是:张益达 <zyh5540@163.com>这种方式.在上一版本的 ...
- Java中复合赋值运算符自动进行强制类型转换
public class Operation { public static void main(String[] args) { int num1 = 10; num1 = num1 / 2.2; ...
- Cookie实现记住密码代码
jsp页面 <%-- Created by IntelliJ IDEA. User: 60590 Date: 2019/11/28 Time: 14:10 To change this temp ...
- CocoaPods加载第三方库
http://code4app.com/article/cocoapods-install-usage
- php自定义函数之内部函数
内部函数,是指在函数内部又声明了一个函数. 注意事项: 1.内部函数名,不能是已存在的函数名 2.假设在函数a里面定义了一个内部函数,不能定用两次函数a. 我们下面来看代码,你将很快的学习会: < ...