本文实例为大家分享了Flutter折叠控件使用的具体代码，供大家参考，具体内容如下
1 官方折叠控件ExpansionTiles
官方默认提供了一个折叠控件 E
本文实例为大家分享了Flutter折叠控件使用的具体代码，供大家参考，具体内容如下
1.官方折叠控件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 目前生态资源还是很缺乏，很多需要自定义，一般根据系统相关的控件做修改，是最好的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好代码网。
