如何将折叠动画添加到小部件？答案

【问题标题】：How can I add a collapsing animation to a widget?如何将折叠动画添加到小部件？
【发布时间】：2021-04-11 00:55:03
【问题描述】：

我的逻辑工作正常，但目前似乎没有动画（即使我提高了 ms）。实现这种“崩溃”影响的最佳方式是什么？

这是我当前的代码。

@override
  Widget build(BuildContext context) {
    comment = Provider.of<Comment>(context);
    return GestureDetector(
      onTap: () {
        comment.toggleVisibility();
      },
      child: AnimatedSwitcher(
        child: comment.isVisible
            ? _buildComment(context)
            : _buildCollapsedComment(context),
        transitionBuilder: (Widget child, Animation<double> animation) {
          return ScaleTransition(
            scale: animation,
            child: child,
          );
        },
        duration: Duration(
          milliseconds: 3000,
        ),
      ),
    );

【问题讨论】：

@someuser 这不能满足我的需要。这具有小部件的静态部分。不是我要找的。span>

标签： flutter

【解决方案1】：

也许这对你有帮助，我在Container 上使用了AnimatedSize 来为height 加上一些Duration 设置动画。

import 'package:flutter/material.dart';

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  bool listTileTapped = false;
  double size = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            //A simple widget Where we can tap to Expand its lower widget with some height and animation
            GestureDetector(
              onTap: () {
                setState(() {
                  listTileTapped = !listTileTapped;
                });
                if (listTileTapped) {
                  size = 300;
                } else {
                  size = 0;
                }
              },
              child: new Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: new Text("Hello Click Me to Expand"),
                ),
              ),
            ),

            //This widgets is used for setting the size to the container
            AnimatedSize(
              curve: Curves
                  .fastOutSlowIn, //you can choose your suitable curver for the purpose
              vsync: this,
              duration: Duration(seconds: 3),
              child: new Container(
                height: size,
                color: Colors.red,
                child: Center(child: new Text("This is the child Here!")),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

已编辑：

我也找到了这个可行的解决方案，只需使用来自 this link 的 ExpandedSection 类

【讨论】：

是否可以将其与动态尺寸一起使用？直到运行时我才知道小部件的高度。
@PeterR 是的，但在这种情况下你必须使用扩展小部件，等等，让我在我的代码中试试这个，我会让你知道结果。
@PeterR 请检查我的编辑答案，我有一个解决您的问题的链接，它也适用于动态容器。