Flutter：对水平ListView内的小部件进行动画处理

Question

考虑一个水平可滚动的ListView，其中每个项目都是一个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,
                )
              ],
            ),
          );
  },
),

截屏：Initial state, before the blue Container has been tappedFinal state, after the blue Container has been tapped

Answer 1

如果您要做的只是将内容滚动回到ListView的开头，那么下面的代码即可完成：

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

class _ScrollAnimation61190061State extends State<ScrollAnimation61190061> {
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      scrollDirection: Axis.horizontal,
      itemCount: 5,
      itemBuilder: (context, index) {
        return Stack(
          children: <Widget>[
            GestureDetector(
              child: Container(
                height: 120,
                width: 90,
                color: Colors.blue,
              ),
              onTap: () {
                _scrollController.animateTo(0, duration: Duration(milliseconds: 100), curve: Curves.easeOut);
              },
            ),
            Container(
              height: 90,
              width: 30,
              color: Colors.amber,
            )
          ],
        );
      },
    );
  }
}