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) 收藏 ...
随机推荐
- XML-1
1.什么是XML xml即 Extensible Markup Language,中文叫可扩展标记语言,是一种具有结构性的标记语言. 2.Xml文档的构成 XML文档即用xml语言编写的文档,它包括以 ...
- VBS读取txt文档数据查找Excel中单元格数据符合条件的剪切到工作表2中
Dim fso,f,a set oExcel = CreateObject( "Excel.Application" ) oExcel.Visible = false '4) 打开 ...
- 帝国CMS熊掌号数据主动推送插件【原创】
因为昨晚一个朋友他是帝国CMS做的网站,叫我给他做个熊掌号改造和熊掌号推送,所以花了一个小时时间做了这个插件,有需要的朋友可以拿去. 第一步:在后台执行以下数据库语句: CREATE TABLE `b ...
- test20190504 行走
行走(walk.cpp/c/pas) 题目描述 "我有个愿望,我希望走到你身边." 这是个奇异的世界,世界上的 n-1 条路联结起来形成一棵树,每条路有一个对应的权值 ci. 现在 ...
- 十七.protobuf在rpc中的使用
关于protobuf在rpc中的使用,设计到gRPC,相关内容待续....
- 关于跨域介绍和djiago解决跨域问题
什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 什么是同源策略? 同源策略又分为以下两种 DOM同源策略:禁止对不 ...
- git如何统计代码行数
1.根据用户名时间段统计 git log --author="username" --since=2018-01-01 --until=2019-12-31 --pretty=tf ...
- 肤浅的聊聊 TiDB 扫表算子, 扫索引算子, 合取范式(CNF), 析取范式(DNF), skyline pruning
这一章主要涉及TiDB如下的源码: 1. 扫表算子怎样转换为扫索引算子; 2. 怎样把Selection算子的过滤条件化简, 转为区间扫描; 假设我们有一个表: t1( id int primary ...
- C++问题--error LNK2019: 无法解析的外部符号 __imp__wsprintfW
一.问题 当编译运行C++连接Redis时,出现错误Win32_Interop_d.lib(Win32_ANSI.obj) : error LNK2019: 无法解析的外部符号 __imp__wspr ...
- codevs:1462 素数和:给定2个整数a,b 求出它们之间(不含a,b)所有质数的和。
#include<iostream>#include<cstdio>#include<cmath>using namespace std;int main(){ i ...