如何使 ExpansionTile 尾随图标旋转？

Posted 2023-02-23

【中文标题】如何使 ExpansionTile 尾随图标旋转？

【英文标题】：How to make an ExpansionTile trailing Icon spin?

【发布时间】：2021-12-09 07:03:12

【问题描述】：

我创建了一个扩展图块，并将原来的尾随图标更改为我自定义的 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,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  

【问题讨论】：

能否包含会重现相同错误的 code-sn-p/resource？

我已经在我的原始帖子中添加了我的扩展文件类的代码。请查阅。笔记;代码功能齐全，svg 资源不会像原来的扩展磁贴图标那样旋转

【参考方案1】：

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

我们将一个小部件传递给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,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );