我创建了一个 expandtile,并将原来的尾随图标更改为我自定义的 svg 图标。每当我单击扩展图 block 时...一切正常,但新的 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,
),
),
],
),
),
)
],
),
),
],
),
);
}
}
最佳答案
虽然我们没有在 ExpansionTile
上提供 trailing
,但它使用它的默认行为。
我们正在将一个小部件传递到 trailing
中,我们需要控制它。为此,我们需要检查 ExpansionTile
是否展开,onExpansionChanged
回调将提供此值。为了处理动画,我们可以使用许多小部件,例如 Transform
、RotatedBox
、AnimatedRotation
...在这个 ExpansionTileCard
小部件中从 StatefulWidget
扩展而来。
步骤
StatefulWidget
bool _isExpanded = false;
onExpansionChanged
上更改值 onExpansionChanged: (value) {
setState(() {
_isExpanded = value;
});
},
通过包装动画小部件或仅检查返回两个小部件的状态,在尾部
分配您的小部件
_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,
),
),
],
),
),
)
],
),
),
],
),
);
}
}
https://stackoverflow.com/questions/69680193/