时间戳

首页 > 解决方案 > IntrinsicHeight 使尺寸动画损坏

flutter - IntrinsicHeight 使尺寸动画损坏

问题描述

我有一个布局，其中有一行，在这一行内，我有一个自定义扩展图块列表和一个自定义小部件，它是一个固定宽度为 5 像素的矩形，矩形的高度必须相同，如膨胀瓦片的高度。为了使矩形与扩展面板的高度相同，我使用了固有高度。所以，结构是这个 IntrinsicHeight: Row: [ExpansionPanel, Container] 问题是当我使用 IntrinsicHeight 时所有动画都被破坏了。扩展磁贴列表中的动画正在运行，但包含该行的容器不会跟随动画调整大小，而是在没有任何中间步骤的情况下进行调整。

我尝试使用不同类型的动画。

Implicit tween animation builder
     return TweenAnimationBuilder(
      tween: Tween<double>(begin: 0, end: opened ? 1 : 0),
      duration: Duration(milliseconds: 600),
      builder: (_,double value, __){
        return ClipRect(
          clipBehavior: Clip.antiAlias,
          child: Align(
            alignment: Alignment.bottomCenter,
            heightFactor: value,
            child: value != 0 ? body : null,
            ),);
        }
    );
Cross fade animation
return AnimatedCrossFade(
    firstChild: body,
    secondChild: Container(height: 0,),
    duration: Duration(milliseconds: 600),
    crossFadeState: opened ? CrossFadeState.showFirst : CrossFadeState.showSecond,
    sizeCurve: Curves.ease,
);

更改动画类型并没有解决我的问题。

我的问题如下：

  1. 是否可以选择使用 IntrinsicHeightWidget 同时制作大小动画
  2. 如果没有这样的选项，是否可以选择制作一个与扩展磁贴列表具有相同高度但没有 IntrinsicHeight 小部件的 Rectangle 小部件。

我已经拍摄了一段视频来展示问题的样子。

https://www.youtube.com/watch?v=xpQ8QHwHUWQ

我见过类似的问题，但在我的案例中我没有成功实施它们。

标签： flutterflutter-layoutflutter-animation

解决方案

推荐阅读