flutter - 如何使 ExpansionTile 尾随图标旋转？

Question

我创建了一个 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,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

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

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

步骤

1. 转换为StatefulWidget
2. 在状态类中创建一个 bool 值来检查展开状态。 bool _isExpanded = false;
3. 在 onExpansionChanged 上更改值

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

1. 通过包装动画小部件或仅检查返回两个小部件的状态，在尾部 分配您的小部件

   • _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,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}