flutter - 如何使 ExpansionTile 尾随图标旋转?
问题描述
我创建了一个扩展图块,并将原来的尾随图标更改为我自定义的 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,
),
),
],
),
),
)
],
),
),
],
),
);
}
}
解决方案
虽然我们不提供trailing
它ExpansionTile
使用它的默认行为。
我们正在传递一个小部件trailing
,我们需要控制它。为此,我们需要检查是否ExpansionTile
扩展,onExpansionChanged
回调将提供此值。为了处理动画,我们可以使用许多小部件,如Transform
, RotatedBox
, AnimatedRotation
... 在此ExpansionTileCard
小部件将从StatefulWidget
.
脚步
- 转换成
StatefulWidget
- 在状态类中创建一个布尔值来检查扩展状态。
bool _isExpanded = false;
- 改变价值
onExpansionChanged
onExpansionChanged: (value) {
setState(() {
_isExpanded = value;
});
},
通过包装动画小部件来分配您的小部件,
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,
),
),
],
),
),
)
],
),
),
],
),
);
}
}
推荐阅读
- node-mssql - 在 150000ms 节点 mssql 中无法连接到 xxxxx:xxxx
- python - 使用 pytorch 展开后图像会改变颜色
- electron - 试图用电子执行选择器
- angular - 为什么路线数据显示为空白?
- r - 如何计算与 S4 类关联的对象的数量
- verilog - Verilog DUT System Verilog 测试台:输出到线分配 1s 替换为 Xs
- java - 如何正确检查两个锯齿状数组的大小是否相同?
- javascript - 访问数据库正在创建问题
- docker - 在 Docker 客户端上配置代理后,Docker 容器内没有 http/https 连接
- graphql - 如何为 apollo 客户端生成片段类型?