Flutter之实现可折叠的列表

一、介绍

1、使用flutter自带组件ExpansionTitle实现

2、ExpansionTitle属性介绍

const ExpansionTile({Key key,this.leading, //标题左侧需要展示的Widget@required this.title, //要展示的标题Widgetthis.subtitle, this.backgroundColor, //背景this.onExpansionChanged, //列表展开和收起的回调函数this.children = const <Widget>[], //列表展开时候的Widgetthis.trailing, //标题有侧要展开的Widgetthis.initiallyExpanded = false, //默认状态下是否展开this.maintainState = false,this.tilePadding,//内边距this.expandedCrossAxisAlignment,//次轴对齐this.expandedAlignment, //主轴对齐this.childrenPadding, //子内容内边距})

二、实现

1、首先准备一个数据源

2、因为是下层展开，所以上层是个ListView，所以得使用ListView组件，在他的Widget中是一个ExpansionTile

三、源代码

class LivePage extends StatefulWidget {const LivePage({Key key}) : super(key: key);@override_LivePageState createState() => _LivePageState();
}const citys = {"北京": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "顺义区", "海淀区"],"上海": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "顺义区", "海淀区"],"广州": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "顺义区", "海淀区"],"深圳": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "顺义区", "海淀区"],
};class _LivePageState extends State<LivePage> {@overrideWidget build(BuildContext context) {return MaterialApp(title: "列表折叠和展开",home: Scaffold(body: Container(child: ListView(children: _buildList(),),),),);}List<Widget> _buildList() {List<Widget> widgets = [];citys.keys.forEach((key) {widgets.add(_item(key, citys[key]));});return widgets;}Widget _item(String city, List<String> listArea) {return ExpansionTile(title: Text(city,style: TextStyle(color: Colors.black54, fontSize: 20),),children: listArea.map((area) => _buildArea(area)).toList(),);}Widget _buildArea(String area) {return FractionallySizedBox(widthFactor: 1,child: Container(alignment: Alignment.center,height: 50,margin: EdgeInsets.only(bottom: 3),decoration: BoxDecoration(color: Colors.lightBlueAccent),child: Text(area),),);}
}

Flutter之实现可折叠的列表相关推荐

【小程序】如何实现一个可折叠的列表
作者刚接触小程序开发不久,打算用 CSDN 把学习过程中遇到的一些问题记录下来,都是一些浅显易懂的内容,希望对你也有所帮助. 如文章标题所示,作者要实现一个可折叠的列表,先来看一下页面效果: 这种展示 ...
Flutter ListView （动态）列表组件、水平列表组件、图标组件详解
Flutter ListView (动态)列表组件.水平列表组件.图标组件 Flutter ListView 基础列表组件.水平列表组件.图标组件列表常见的几种情况: 垂直列表垂直图文列表横向列 ...
Flutter(八)之豆瓣电影列表
Flutter 八之豆瓣电影列表一. StarRating 1.1. 最终效果展示 1.2. 实现思路分析 1.3. 最终代码实现二. DashedLine 2.1. 最终实现效果 2.2. 实 ...
【Flutter】ExpansionTile 可折叠列表
文章目录一.ExpansionTile 构造方法二.完整代码示例三.相关资源一.ExpansionTile 构造方法下面是 ExpansionTile 的构造方法 ; 其中 required ...
Flutter瀑布流及通用列表解决方案
简介:解决flutter复杂布局过程以及对基础能力进行扩充的列表视图解决方案作者:闲鱼技术-夜澜背景目前闲鱼业务中无论是首页还是搜索页都有大量可以落地瀑布流的场景,而在Flutter原生中只提供 ...
Flutter进阶—质感设计之列表项
创建achievement_view_list_item.dart文件,具体的实现每一个列表项. import 'package:flutter/material.dart'; // 创建类,成就目标 ...
第一个Flutter demo——实现无限循环列表
第一个Flutter demo(一) 参照flutter官网,实现第一个Flutter应用.第一部分:实现无限循环列表第一部分功能介绍: 从零开始创建了一个 Flutter 应用: 编写 Dart ...
Flutter基础之水平方向列表布局
在Flutter中,用ListView来显示列表项,其支持垂直和水平方向展示,通过过一个属性我们就可以控制其方向,列表有以下分类: ListView组件属性及描述属性名类型默认值说明 Scro ...
flutter实战4：新闻列表的懒加载和下拉手势刷新
上一篇我们实现了新闻列表,但在网络不好的时候列表会白屏,因此为了提高使用体验,往列表中加入懒加载效果.其次,引入一个Flutter内置的手势控件,用于支持下拉刷新列表的效果如下图: Flutter将异 ...

Flutter之实现可折叠的列表

Flutter之实现可折叠的列表相关推荐

最新文章

热门文章