Flutter折叠控件
lizubing1992 人气:01.官方折叠控件ExpansionTiles
官方默认提供了一个折叠控件 ExpansionTiles 主要用于listView做折叠和展开操作的,先来看看一般的用法
Widget _buildTiles(Entry root) { return new ExpansionTile( title: new Text(root.title), children: root.children.map(_buildTiles).toList(), ); }
title 一般就是点击的标题,可以是任意的Widget
children 是折叠和展开的List
使用很方便
2.自定义折叠控件ExpansionLayout
由于项目中的使用到的折叠控件是由外部Widget控制的,涉及到一些业务逻辑,使用官方控件ExpansionTiles,存在诸多不便,于是查看ExpansionTiles ,根据ExpansionTiles源码做自己的修改,主要是根据外部传入的字段来控制展开和折叠
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; const Duration _kExpand = Duration(milliseconds: 200); class ExpansionLayout extends StatefulWidget { const ExpansionLayout({ Key key, this.backgroundColor, this.onExpansionChanged, this.children = const <Widget>[], this.trailing, this.isExpanded, }) : super(key: key); final ValueChanged<bool> onExpansionChanged; final List<Widget> children; final Color backgroundColor; //增加字段控制是否折叠 final bool isExpanded; final Widget trailing; @override _ExpansionLayoutState createState() => _ExpansionLayoutState(); } class _ExpansionLayoutState extends State<ExpansionLayout> with SingleTickerProviderStateMixin { //折叠展开的动画,主要是控制height static final Animatable<double> _easeInTween = CurveTween(curve: Curves.easeIn); AnimationController _controller; Animation<double> _heightFactor; bool _isExpanded; @override void initState() { super.initState(); //初始化控制器以及出事状态 _controller = AnimationController(duration: _kExpand, vsync: this); _heightFactor = _controller.drive(_easeInTween); _isExpanded = widget.isExpanded; if (_isExpanded) _controller.value = 1.0; } @override void dispose() { _controller.dispose(); super.dispose(); } void _handleTap() { setState(() { _isExpanded = widget.isExpanded; if (_isExpanded) { _controller.forward(); } else { _controller.reverse().then<void>((void value) { if (!mounted) return; }); } //保存页面数据 PageStorage.of(context)?.writeState(context, _isExpanded); }); //回调展开事件 if (widget.onExpansionChanged != null) widget.onExpansionChanged(_isExpanded); } Widget _buildChildren(BuildContext context, Widget child) { return Container( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ ClipRect( child: Align( heightFactor: _heightFactor.value, child: child, ), ), ], ), ); } @override Widget build(BuildContext context) { //执行以下对应的Tap事件 _handleTap(); final bool closed = !_isExpanded && _controller.isDismissed; return AnimatedBuilder( animation: _controller.view, builder: _buildChildren, child: closed ? null : Column(children: widget.children), ); } }
原理其实很简单,就是根据字段_isExpanded 来控制折叠和展开,内部使用动画实现对height的控制
Flutter 目前生态资源还是很缺乏,很多需要自定义,一般根据系统相关的控件做修改,是最好的
加载全部内容