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

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会更容易，因此它从屏幕上消失了

class Home extends StatefulWidget {
  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  int currentIndex = 2; //or you could use a boolean type

  @override
  Widget build(BuildContext context) {
    return Column(mainAxisSize: MainAxisSize.min, children: [
      MyWidget(
        currentIndex: currentIndex,
      ),
      FlatButton(
          onPressed: () => setState(() {
                currentIndex = currentIndex == 1 ? 2 : 1;
              }),
          child: Text('Change'))
    ]);
  }
}

class MyWidget extends StatelessWidget {
  final int currentIndex;
  static const double standardSpacing = 8.0;

  MyWidget({this.currentIndex, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: standardSpacing),
        child: Row(
          children: [
            Expanded(
             child: Container( //Normal Container
               height: 60,
               color: Colors.blue)
            ),
            GestureDetector(
              onTap: () {},
              behavior: HitTestBehavior.translucent,
              child: AnimatedContainer(
                duration: Duration(milliseconds: 200),
                padding: const EdgeInsets.only(left: standardSpacing),
                height: 60,
                width: currentIndex == 2 ? 36 : 0, //when currentIndex is not 2, it's size its zero
                child: const Icon(Icons.save),
              ),
            )
          ],
        ),
      ),
    );
  }
}