水平 ListView 内的动画小部件答案

【问题标题】：Animate widgets inside a horizontal ListView水平 ListView 内的动画小部件
【发布时间】：2020-04-13 14:29:22
【问题描述】：

考虑一个水平滚动的 ListView，其中每个项目都是一个 Stack。 Stack 有两个小部件，一个较大的蓝色容器位于底部，一个较小的琥珀色容器位于顶部。当我点击蓝色容器时，琥珀色容器应该移到蓝色容器之外的右侧，将列表中的其余项目向右移动。我该怎么做？

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 5,
  itemBuilder: (context, index) {
    return Padding(
            padding: EdgeInsets.only(right: 10.0),
            child: Stack(
              children: <Widget>[
                GestureDetector(
                  child: Container(
                    height: 120,
                    width: 90,
                    color: Colors.blue,
                  ),
                ),
                Container(
                  height: 90,
                  width: 30,
                  color: Colors.amber,
                )
              ],
            ),
          );
  },
),

截图：

【问题讨论】：

请澄清一下你想要做什么，这个“当我点击蓝色容器时，琥珀色容器应该向右移动到蓝色容器之外，将其余项目向右移动."，在尝试了你的代码之后，很难理解。您想要移动整个列表视图，还是移动单个项目？
感谢您的反馈。我添加了一些屏幕截图以使其更清晰。
您尝试过以下答案吗？如果它解决了您的问题，请将其标记为正确，并考虑为可见性投票。

标签： flutter flutter-animation

【解决方案1】：

如果您只想将内容滚动回ListView 的开头，那么下面的代码将执行此操作：

class ScrollAnimation61190061 extends StatefulWidget {
  @override
  _ScrollAnimation61190061State createState() => _ScrollAnimation61190061State();
}

class _ScrollAnimation61190061State extends State<ScrollAnimation61190061> {
  final int _listLength = 5;
  List<EdgeInsets> _itemInsets = [];

  @override
  void initState() {
    _itemInsets = List.generate(_listLength, (index) => null);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: _listLength,
      itemBuilder: (context, index) {
        return Stack(
          children: <Widget>[
            GestureDetector(
              child: Container(
                height: 120,
                width: 90,
                color: Colors.blue,
              ),
              onTap: () {
                setState(() {
                  _itemInsets[index] = EdgeInsets.only(left: 60);
                });
              },
            ),
            Container(
              margin: _itemInsets[index],
              height: 90,
              width: 30,
              color: Colors.amber,
            )
          ],
        );
      },
    );
  }
}

【讨论】：

感谢您的快速回复。我真正想要的是堆栈的一个元素来改变它在 ListView 本身中的位置，而不是移动整个屏幕的内容。为了更清楚，我附上了一些截图。
@vaishnav 我已更改代码以将每个单独的琥珀色框移动到蓝色容器的右侧。