首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用动画颤振通过/相对于子维度动态展开小部件

如何使用动画颤振通过/相对于子维度动态展开小部件
EN

Stack Overflow用户
提问于 2022-05-20 20:37:43
回答 1查看 195关注 0票数 0

我试图相对于包含的小部件动态维度展开/动画一个容器。

我尝试通过获取其渲染盒维度来提取内部小部件的维度。我用这个来改变尺寸

代码语言:javascript
复制
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

typedef void OnWidgetSizeChange(Size size);

class MeasureSizeRenderObject extends RenderProxyBox {
  Size? oldSize;
  final OnWidgetSizeChange onChange;

  MeasureSizeRenderObject(this.onChange);

  @override
  void performLayout() {
    super.performLayout();

    Size newSize = child!.size;
    if (oldSize == newSize) return;

    oldSize = newSize;
    WidgetsBinding.instance.addPostFrameCallback((_) {
      onChange(newSize);
    });
  }
}

class MeasureSize extends SingleChildRenderObjectWidget {
  final OnWidgetSizeChange onChange;

  const MeasureSize({
    Key? key,
    required this.onChange,
    required Widget child,
  }) : super(key: key, child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    print('=============bro we here=======');
    return MeasureSizeRenderObject(onChange);
  }
}

像这样使用它

代码语言:javascript
复制
...
double _width = 0;
double _height = 0;
...
AnimatedContainerApp(
            width: _width,
            height: _height,
            child: MeasureSize(
                onChange: (size) {
                  print(size.height);
                  setState(() {
                    _height = size.height;
                  });
                },
                child: !isExpanded
                    ? Container(
                        height: 200,
                        width: double.Infinity
                        )
                    : Container(
                        height: 400,
                        width: double.Infinity
                        )),
          ),

AnimatedContainerApp是一个简单的AnimatedContainer小部件。

我无法触发和更新动画的尺寸。此外,如果这是一个更好的方式来实现,我是开放的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-21 05:54:15

您可以使用AnimatedSize小部件https://api.flutter.dev/flutter/widgets/AnimatedSize-class.html,但要确保它只显示一侧的动画。否则,您可以在这里检查https://stackoverflow.com/a/59133346/19165706解决方案。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72324546

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档