This article shares the specific code used for Flutter folding control for your reference. The specific content is as follows
1. Official folding controls ExpansionTiles
The official defaults to provide a folding control ExpansionTiles is mainly used for listView for folding and expanding operations. Let's take a look at the general usage first.
Widget _buildTiles(Entry root) {
return new ExpansionTile(
title: new Text(),
children: (_buildTiles).toList(),
);
}title is usually the title of click, which can be any widget
children are a list of folded and expanded
Very easy to use
2. Customize the folding control ExpansionLayout
Since the folding control used in the project is controlled by an external Widget, it involves some business logic. Using the official control ExpansionTiles has many inconveniences. So, check ExpansionTiles and make your own modifications based on the ExpansionTiles source code, mainly controlling expansion and collapse based on the fields passed externally.
import 'package:flutter/';
import 'package:flutter/';
const Duration _kExpand = Duration(milliseconds: 200);
class ExpansionLayout extends StatefulWidget {
const ExpansionLayout({
Key key,
,
,
= const <Widget>[],
,
,
}) : super(key: key);
final ValueChanged<bool> onExpansionChanged;
final List<Widget> children;
final Color backgroundColor;
//Add fields to control whether to collapse final bool isExpanded;
final Widget trailing;
@override
_ExpansionLayoutState createState() => _ExpansionLayoutState();
}
class _ExpansionLayoutState extends State<ExpansionLayout>
with SingleTickerProviderStateMixin {
//The folding and expanding animation mainly controls height static final Animatable<double> _easeInTween =
CurveTween(curve: );
AnimationController _controller;
Animation<double> _heightFactor;
bool _isExpanded;
@override
void initState() {
();
//Initialize the controller and the accident status _controller = AnimationController(duration: _kExpand, vsync: this);
_heightFactor = _controller.drive(_easeInTween);
_isExpanded = ;
if (_isExpanded) _controller.value = 1.0;
}
@override
void dispose() {
_controller.dispose();
();
}
void _handleTap() {
setState(() {
_isExpanded = ;
if (_isExpanded) {
_controller.forward();
} else {
_controller.reverse().then<void>((void value) {
if (!mounted) return;
});
}
//Save page data (context)?.writeState(context, _isExpanded);
});
//Callback Expand Event if ( != null)
(_isExpanded);
}
Widget _buildChildren(BuildContext context, Widget child) {
return Container(
child: Column(
mainAxisSize: ,
children: <Widget>[
ClipRect(
child: Align(
heightFactor: _heightFactor.value,
child: child,
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
//Execute the following corresponding Tap event _handleTap();
final bool closed = !_isExpanded && _controller.isDismissed;
return AnimatedBuilder(
animation: _controller.view,
builder: _buildChildren,
child: closed ? null : Column(children: ),
);
}
}The principle is actually very simple, which is to control folding and expansion according to the field_isExpanded, and use animation internally to achieve control of height.
Flutter is still lacking in ecological resources, and many of them need to be customized. Generally, it is best to modify the controls related to the system.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.