flutter ExpansionTile 层级菜单的实现
作者:hosition 时间:2023-06-15 16:04:01
开发环境
win10
Android Studio
效果
用于多级菜单展示,或选择。
如 每个省,市,县;
如 树木的病虫害;
关键代码
@override
Widget build(BuildContext context) {
return ListTile(
title: _buildItem(widget.bean),
);
}
Widget _buildItem(NameBean bean){
if(bean.children.isEmpty){
return ListTile(
title: Text(bean.name),
onTap: (){
_showSeletedName(bean.name);
},
);
}
return ExpansionTile(
key: PageStorageKey<NameBean>(bean),
title: Text(bean.name),
children: bean.children.map<Widget>(_buildItem).toList(),
leading: CircleAvatar(
backgroundColor: Colors.green,
child: Text(bean.name.substring(0,1),style: TextStyle(color: Colors.white),),
),
);
}
分析
api:ExpansionTile
算法:递归
1. ExpansionTile的使用
一般传入三个参数
key,title,children;
title:每一行上面的文字;
children:菜单下面的子条目,是一个数组;
key:根据源码传入PageStorageKey,用于保存滑动过程中的状态;
2. 递归
有的条目有子条目,有的没有,通过递归的方式遍历出每条数据;
通过 bean.children.isEmpty 来结束递归;
如 “直辖市”中的北京,下面没有 “市”了,也就是children.isEmpty,此时应该结束递归,返回 ListTile;
如“省级行政单位” 下面的 “黑龙江”还有很多个“市”,还不需要继续遍历返回 层级菜单ExpansionTile;
3. 源码
学习flutter,很多不了解的地方都可以试着看看对应源码上面的注释。
/// A single-line [ListTile] with a trailing button that expands or collapses
/// the tile to reveal or hide the [children].
///
/// This widget is typically used with [ListView] to create an
/// "expand / collapse" list entry. When used with scrolling widgets like
/// [ListView], a unique [PageStorageKey] must be specified to enable the
/// [ExpansionTile] to save and restore its expanded state when it is scrolled
/// in and out of view.
///
/// See also:
///
/// * [ListTile], useful for creating expansion tile [children] when the
/// expansion tile represents a sublist.
/// * The "Expand/collapse" section of
/// <https://material.io/guidelines/components/lists-controls.html>.
class ExpansionTile extends StatefulWidget {
上面一段是 ExpansionTile 的源码注释。
粗略一看会发现几个熟悉的字眼:ListView,ListTile
不错,实现层级菜单的效果,需要搭配使用ListView与ListTile,
上面贴的关键代码中 _buildItem()方法恰恰符合这一点,
当有子条目的时候返回ExpansionTile ,当没有子条目的时候返回 ListTile;
来源:https://segmentfault.com/a/1190000019859406
标签:flutter,ExpansionTile,层级菜单
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
C#中数组、ArrayList和List三者的区别详解及实例
2023-11-07 03:12:47
使用linq to xml修改app.config示例(linq读取xml)
2022-11-22 22:01:28
详解SpringBoot 快速整合MyBatis(去XML化)
2022-08-19 16:42:54
Java的RxJava库操作符的用法及实例讲解
2021-12-14 22:31:41
新浪微博第三方登录界面上下拉伸图片之第三方开源PullToZoomListViewEx(二)
2021-07-25 04:52:35
Scala数据库连接池的简单实现
2023-07-14 14:19:37
![](https://img.aspxhome.com/file/2023/8/57698_0s.jpg)
spring boot和mybatis集成分页插件
2021-11-05 10:21:17
C#开发之Socket网络编程TCP/IP层次模型、端口及报文等探讨
2023-03-28 14:49:53
![](https://img.aspxhome.com/file/2023/4/129744_0s.jpg)
ArrayList的自动扩充机制实例解析
2021-10-20 17:38:29
RocketMQ生产者一个应用不能发送多个NameServer消息解决
2022-05-18 15:56:11
![](https://img.aspxhome.com/file/2023/7/69687_0s.png)
spring scheduled单线程和多线程使用过程中的大坑
2022-09-24 05:51:10
MyBatis-Plus工具使用之EntityWrapper解析
2021-10-09 06:13:48
Android TabHost如何实现顶部选项卡
2023-04-13 01:08:14
![](https://img.aspxhome.com/file/2023/2/126732_0s.gif)
SpringCloud网关组件zuul实例解析
2023-04-13 08:51:47
![](https://img.aspxhome.com/file/2023/1/62971_0s.png)
C#嵌套类的访问方法
2021-07-26 18:03:20
Java超详细讲解设计模式中的命令模式
2023-07-26 15:23:11
解析C#中@符号的几种使用方法详解
2022-11-09 03:26:03
Java使用备忘录模式实现过关类游戏功能详解
2022-11-30 08:52:51
![](https://img.aspxhome.com/file/2023/2/60782_0s.png)
c#中使用BackgroundWorker的实现
2023-05-04 08:51:01
![](https://img.aspxhome.com/file/2023/6/98226_0s.png)
Android基于API的Tabs3实现仿优酷tabhost效果实例
2021-07-31 18:51:02
![](https://img.aspxhome.com/file/2023/3/139533_0s.jpg)