ExpansionTile选择一个项目后,我试图崩溃,但它不会关闭已打开的列表。
ExpansionTile
我尝试使用该onExpansionChanged物业,但未成功
onExpansionChanged
您如何解决这个问题?
插入一个gif,表明ExpansionTile选择一个项目后不会折叠,以下也是所使用的代码。
import 'package:flutter/material.dart'; void main() { runApp(new ExpansionTileSample()); } class ExpansionTileSample extends StatefulWidget { @override ExpansionTileSampleState createState() => new ExpansionTileSampleState(); } class ExpansionTileSampleState extends State<ExpansionTileSample> { String foos = 'One'; @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: const Text('ExpansionTile'), ), body: new ExpansionTile( title: new Text(this.foos), backgroundColor: Theme.of(context).accentColor.withOpacity(0.025), children: <Widget>[ new ListTile( title: const Text('One'), onTap: () { setState(() { this.foos = 'One'; }); }, ), new ListTile( title: const Text('Two'), onTap: () { setState(() { this.foos = 'Two'; }); }, ), new ListTile( title: const Text('Three'), onTap: () { setState(() { this.foos = 'Three'; }); }, ), ] ), ), ); } }
这是一个解决方案。我们只需添加expand,collapse和toggle功能ExpansionTile。
expand
collapse
toggle
import 'package:flutter/material.dart'; import 'package:meta/meta.dart'; void main() { runApp(new ExpansionTileSample()); } class ExpansionTileSample extends StatefulWidget { @override ExpansionTileSampleState createState() => new ExpansionTileSampleState(); } class ExpansionTileSampleState extends State<ExpansionTileSample> { final GlobalKey<AppExpansionTileState> expansionTile = new GlobalKey(); String foos = 'One'; @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: const Text('ExpansionTile'), ), body: new AppExpansionTile( key: expansionTile, title: new Text(this.foos), backgroundColor: Theme .of(context) .accentColor .withOpacity(0.025), children: <Widget>[ new ListTile( title: const Text('One'), onTap: () { setState(() { this.foos = 'One'; expansionTile.currentState.collapse(); }); }, ), new ListTile( title: const Text('Two'), onTap: () { setState(() { this.foos = 'Two'; expansionTile.currentState.collapse(); }); }, ), new ListTile( title: const Text('Three'), onTap: () { setState(() { this.foos = 'Three'; expansionTile.currentState.collapse(); }); }, ), ] ), ), ); } } // --- Copied and slightly modified version of the ExpansionTile. const Duration _kExpand = const Duration(milliseconds: 200); class AppExpansionTile extends StatefulWidget { const AppExpansionTile({ Key key, this.leading, @required this.title, this.backgroundColor, this.onExpansionChanged, this.children: const <Widget>[], this.trailing, this.initiallyExpanded: false, }) : assert(initiallyExpanded != null), super(key: key); final Widget leading; final Widget title; final ValueChanged<bool> onExpansionChanged; final List<Widget> children; final Color backgroundColor; final Widget trailing; final bool initiallyExpanded; @override AppExpansionTileState createState() => new AppExpansionTileState(); } class AppExpansionTileState extends State<AppExpansionTile> with SingleTickerProviderStateMixin { AnimationController _controller; CurvedAnimation _easeOutAnimation; CurvedAnimation _easeInAnimation; ColorTween _borderColor; ColorTween _headerColor; ColorTween _iconColor; ColorTween _backgroundColor; Animation<double> _iconTurns; bool _isExpanded = false; @override void initState() { super.initState(); _controller = new AnimationController(duration: _kExpand, vsync: this); _easeOutAnimation = new CurvedAnimation(parent: _controller, curve: Curves.easeOut); _easeInAnimation = new CurvedAnimation(parent: _controller, curve: Curves.easeIn); _borderColor = new ColorTween(); _headerColor = new ColorTween(); _iconColor = new ColorTween(); _iconTurns = new Tween<double>(begin: 0.0, end: 0.5).animate(_easeInAnimation); _backgroundColor = new ColorTween(); _isExpanded = PageStorage.of(context)?.readState(context) ?? widget.initiallyExpanded; if (_isExpanded) _controller.value = 1.0; } @override void dispose() { _controller.dispose(); super.dispose(); } void expand() { _setExpanded(true); } void collapse() { _setExpanded(false); } void toggle() { _setExpanded(!_isExpanded); } void _setExpanded(bool isExpanded) { if (_isExpanded != isExpanded) { setState(() { _isExpanded = isExpanded; if (_isExpanded) _controller.forward(); else _controller.reverse().then<void>((Null value) { setState(() { // Rebuild without widget.children. }); }); PageStorage.of(context)?.writeState(context, _isExpanded); }); if (widget.onExpansionChanged != null) { widget.onExpansionChanged(_isExpanded); } } } Widget _buildChildren(BuildContext context, Widget child) { final Color borderSideColor = _borderColor.evaluate(_easeOutAnimation) ?? Colors.transparent; final Color titleColor = _headerColor.evaluate(_easeInAnimation); return new Container( decoration: new BoxDecoration( color: _backgroundColor.evaluate(_easeOutAnimation) ?? Colors.transparent, border: new Border( top: new BorderSide(color: borderSideColor), bottom: new BorderSide(color: borderSideColor), ) ), child: new Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ IconTheme.merge( data: new IconThemeData(color: _iconColor.evaluate(_easeInAnimation)), child: new ListTile( onTap: toggle, leading: widget.leading, title: new DefaultTextStyle( style: Theme .of(context) .textTheme .subhead .copyWith(color: titleColor), child: widget.title, ), trailing: widget.trailing ?? new RotationTransition( turns: _iconTurns, child: const Icon(Icons.expand_more), ), ), ), new ClipRect( child: new Align( heightFactor: _easeInAnimation.value, child: child, ), ), ], ), ); } @override Widget build(BuildContext context) { final ThemeData theme = Theme.of(context); _borderColor.end = theme.dividerColor; _headerColor ..begin = theme.textTheme.subhead.color ..end = theme.accentColor; _iconColor ..begin = theme.unselectedWidgetColor ..end = theme.accentColor; _backgroundColor.end = widget.backgroundColor; final bool closed = !_isExpanded && _controller.isDismissed; return new AnimatedBuilder( animation: _controller.view, builder: _buildChildren, child: closed ? null : new Column(children: widget.children), ); } }