flutter ExpansionTile 层级菜单的实现
作者:hosition 发布时间:2023-06-15 16:04:01
标签:flutter,ExpansionTile,层级菜单
开发环境
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
0
投稿
猜你喜欢
- 本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇
- 1 自定义类加载器自定义类加载器的代码很简单,只需要继承ClassLoader类,覆写findClass方法即可其默认实现是会抛出一个异常:
- 网络中数据传输经常是xml或者json,现在做的一个项目之前调其他系统接口都是返回的xml格式,刚刚遇到一个返回json格式数据的接口,通过
- 一个是新浪微博,腾讯微博的分享按钮,一个是他们的绑定情况(其实就是是否授权)。点击微博分享中新浪或腾讯按钮,就进行相应的授权(若没授权),显
- 最近要给一个 Winform 项目添加功能,需要一个能显示进度条的弹窗,还要求能够中止任务,所以就做了一个,在此做个记录总结。虽然用的是比较
- 在观察者模式中有2个要素:一个是被观察对象,另一个是观察者。但被观察对象的状态发生改变会通知观察者。举例:把订阅报纸的人看作是观察者,把报纸
- 本文实例为大家分享了Unity实现场景漫游相机的具体代码,供大家参考,具体内容如下前言拿到场景后总喜欢在场景里面玩一段时间,那这个脚本就是你
- 前言回想一下,在学Java时接触的正则表达式,其实Kotlin中也是类似。只不过使用Kotlin 的语法来表达,更为简洁。正则(Regex)
- 本文实例为大家分享了C#超市收银系统设计的具体代码,供大家参考,具体内容如下1.登录界面代码如下:using System;using Sy
- flutter material widget组件之信息展示组件,供大家参考,具体内容如下widget分为两类:widgets librar
- 右击有main方法的类===> Run as===> Run Configurations ===>双击java
- 在使用springMVC框架构建web应用,客户端常会请求字符串、整型、json等格式的数据,通常使用@ResponseBody注解使 co
- 最近没事写了一个简易浏览器,在刚开始写的时候遇到一些问题,主要的问题就是如何在自己的webview中显示所有的网页数据,不过不指
- 本文介绍了Flutter 通过Clipper实现各种自定义形状的示例代码,分享给大家,具体如下:ClipOval 圆形裁剪ClipOval(
- 这节主要完成一些基本的增删改查以及Service、Dao和Action的抽取。1. Service层的抽取  
- 相比于直线检测,直线拟合的最大特点是将所有数据只拟合出一条直线void fitLine( InputArray points, Output
- 本文实例讲述了C#实现对Json字符串处理方法,分享给大家供大家参考。具体分析如下:一般对于web应用开发人员来说对Json字符串都会很熟悉
- 概述在移动应用开发中,消息推送可以说是一项非常重要的功能,它能够起到提醒或者唤醒用户的作用,同时也是产品运营人员更高效地实现运营目标的重要手
- 背景:在Android中按照数据保存的方式,可以分为如下几种Content Provider (用的SQLite实现),SQLite,Sha
- 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,