如何使扩展拖尾图标旋转?

Question

我已经创建了一个扩展，并将原来的尾随图标更改为我自定义的svg图标。任何时候我点击扩展标题…一切正常，但新的SVG拖尾图标不像原来的拖尾图标那样旋转。请问我该如何解决这个问题?

下面的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class ExpansionTileCard extends StatelessWidget {
final String toptitle;
final List<Widget> children;
const ExpansionTileCard({Key key, this.toptitle, this.children})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
decoration: new BoxDecoration(
border:
new Border(bottom: new BorderSide(color: Colors.green))),
child: new Row(
children: [
new Expanded(
flex: 9,
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ExpansionTile(
title: Text(
toptitle,
style: TextStyle(
color: Colors.black,
letterSpacing: -1,
fontSize: 19,
fontWeight: FontWeight.bold),
),
children: children,
childrenPadding: EdgeInsets.fromLTRB(0, 0, 0, 20),
iconColor: Colors.green,
trailing: SvgPicture.asset(
'assets/icons/textmessage.svg',
height: 30,
),
),
],
),
),
)
],
),
),
],
),
);
}
}

Answer 1

虽然我们没有在ExpansionTile上提供trailing，但它使用它的默认行为。

我们正在传递一个小部件到trailing，我们需要控制它。为了做到这一点，我们需要检查ExpansionTile是否展开，onExpansionChanged回调将提供此值。为了处理动画，我们可以使用许多小部件，如Transform,RotatedBox,AnimatedRotation…在此ExpansionTileCard小部件将从StatefulWidget扩展。

<<p>步骤/strong>

1. 转换为StatefulWidget
2. 创建bool内部状态类来检查扩展状态。bool _isExpanded = false;
3. 更改onExpansionChanged的值

onExpansionChanged: (value) {
setState(() {
_isExpanded = value;
});
},

4. 在trailing上分配你的小部件，通过包装动画小部件或只是检查状态返回两个小部件

   • _isExpanded? ExpandedWidget:NormalViewWidget()

   • trailing: AnimatedRotation(  /// you can use different widget for animation
     turns: _isExpanded ? .5 : 0,
     duration: Duration(seconds: 1),
     child: CustomWidget()// your svgImage here
     ),
     
     
     

部件状态

class _ExpansionTileCardState extends State<ExpansionTileCard> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.green))),
child: Row(
children: [
Expanded(
flex: 9,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ExpansionTile(
onExpansionChanged: (value) {
setState(() {
_isExpanded = value;
});
},
title: Text(
widget.toptitle,
style: TextStyle(
color: Colors.black,
letterSpacing: -1,
fontSize: 19,
fontWeight: FontWeight.bold),
),
children: widget.children,
childrenPadding: EdgeInsets.fromLTRB(0, 0, 0, 20),
iconColor: Colors.green,
trailing: AnimatedRotation(
turns: _isExpanded ? .5 : 0,
duration: Duration(seconds: 1),
child:  SvgPicture.asset(
'assets/icons/textmessage.svg',
height: 30,
),
),
],
),
),
)
],
),
),
],
),
);
}
}