如何使PageView仅针对当前页面使用不同的页面大小

Question

我想使用PageView的原因是因为它可以在释放拖动时粘在页面上。但我不知道如何实现如下所示的屏幕：

我想让当前选中的页面显示较大的尺寸，而其他页面显示较小的尺寸。最直接的方法是将viewportFraction（设置为 0.15）。但之后我发现页面需要不同的值viewportFraction：

您可以看到，我希望页面之间的间距相等，但只有中间的页面显示得更大。这可以通过 PageView Widget 来实现吗？或者有人有其他解决方法可以达到相同的结果吗？

如果可能的话，我还想添加GestureDetector到每个页面（可以动画到目标页面）

Answer 1

检查一下这个飞镖盘：

您可以查看那里的所有代码，但要点是在每个页面视图中都有一个动画容器，您可以在其中对其填充进行动画处理以控制其高度：

该值是硬编码的，但您可以使用媒体查询来获取动态顶部填充。

class PageviewGallery extends StatefulWidget {
  @override
  _PageviewGalleryState createState() => _PageviewGalleryState();
}

class _PageviewGalleryState extends State<PageviewGallery> {
  final PageController ctrl = PageController(
    viewportFraction: 0.75,
  );

  int currentPage = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: PageView.builder(
          controller: ctrl,
          itemCount: 8,
          physics: const BouncingScrollPhysics(),
          itemBuilder: (context, int index) {
            // Active page
            bool active = index == currentPage;
            return _buildStoryPage(active);
          }),
    ));
  }

  @override
  void initState() {
    super.initState();
    ctrl.addListener(() {
      int pos = ctrl.page!.round();
      if (currentPage != pos) {
        {
          setState(() {
            currentPage = pos;
          });
        }
      }
    });
  }
  
    @override
void dispose(){
ctrl.dispose();
super.dispose();

}
}

_buildStoryPage( bool active) {
  // Animated Properties
  final double blur = active ? 30 : 0;
  final double offset = active ? 20 : 0;
  final double top = active ? 100 : 200;

  return AnimatedContainer(
    duration: Duration(milliseconds: 500),
    curve: Curves.easeOutQuint,
    margin: EdgeInsets.only(top: top, bottom: 50, right: 30),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color :Colors.red,
        boxShadow: [BoxShadow(color: Colors.black87, blurRadius: blur, offset: Offset(offset, offset))]),
  );
}