Question

我有一个由一个或两个元素组成的行。取决于后者，我想为第一个元素的宽度设置动画，以使其完全扩展或容纳第二个元素。

我正在行中使用AnimatedContainers来实现此目的，但是没有动画。我认为这可能与Flutter在根据父对象的状态重新渲染后无法识别它一样，因此我尝试使用唯一键。但是，这也不起作用。

class TabsBar extends StatelessWidget {
  TabsBar({this.currentIndex, this.onIndexChanged, Key key}) : super(key: key);
  final int currentIndex;
  final Function(int) onIndexChanged;

  @override
  Widget build(BuildContext context) {
    final tabsBloc = BlocProvider.of<TabsBarBloc>(context);

  return BlocBuilder<TabsBarBloc, TabsBarBlocState>(
    builder: (context, tabsBarState) {
  return SafeArea(
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: standardSpacing),
      child: Row(
        children: [
          Expanded(
            child: AnimatedContainer(
              key: key,
              height: 60,
              duration: Duration(milliseconds: 200),
              //....//
          ),
          //HERE: IF INDEX IS == 2, I WANT THE CONTAINER ABOVE TO ANIMATE INTO ITS NEW SIZE WHICH IS LESS WIDE TO ACCOMMODATE FOR THE CONTAINER BELOW
          currentIndex == 2
              ? GestureDetector(
                  onTap: () {},
                  behavior: HitTestBehavior.translucent,
                  child: AnimatedContainer(
                    duration: Duration(milliseconds: 200),
                    padding: const EdgeInsets.only(left: standardSpacing),
                    height: 60,
                    child: Image.asset(
                      '${imagesPath}add_piece.png',
                    ),
                  ),
                )
              : HorizontalSpacing(0),
        ],
      ),
    ),
  );
});

我还尝试使用布局生成器显式定义宽度，并使用动画容器作为行的父级。都不起作用。

有人可以指出我可能会想念的东西吗？

Answer 1

我不完全了解您要更改AnimatedContainer的值是什么，但只为该行的第二个容器设置动画并将其宽度更改为0以便从屏幕上消失会更容易

<div id="one">
  <div id="two">
  </div>
  <div id="three">
    <div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div id="button">Button</div>
  </div>
  <div id="four">
  </div>
</div>

Flutter：在无状态小部件中对行内容进行动画处理

1 个答案: