如何在Flutter中用PageView实现Material3横向图片轮播适配动画？

完全可以通过Flutter的PageView组件实现Material3文档中描述的横向滑动图片自适应动效，核心是结合PageController监听滑动进度，动态调整图片的尺寸、缩放或透明度，配合BoxFit实现自适应。

核心实现思路 #

• 使用PageController的viewportFraction属性让页面不完全占满屏幕，露出相邻页面边缘，贴合Material3的横向滑动视觉风格。
• 监听PageController的page值变化，计算滑动进度与页面索引的差值，动态调整图片的缩放比例、透明度等参数。
• 用BoxFit.cover确保图片自适应容器尺寸，同时保持比例。

示例代码 #

import 'package:flutter/material.dart';

class Material3ImageSlider extends StatefulWidget {
  final List<String> imageUrls;

  const Material3ImageSlider({super.key, required this.imageUrls});

  @override
  State<Material3ImageSlider> createState() => _Material3ImageSliderState();
}

class _Material3ImageSliderState extends State<Material3ImageSlider> {
  final PageController _pageController = PageController(viewportFraction: 0.88);
  double _currentPageOffset = 0.0;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        _currentPageOffset = _pageController.page ?? 0.0;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.65,
      child: PageView.builder(
        controller: _pageController,
        scrollDirection: Axis.horizontal,
        itemCount: widget.imageUrls.length,
        itemBuilder: (context, index) {
          final double difference = (_currentPageOffset - index).abs();
          final double scale = 1 - (difference * 0.12);
          final double opacity = 1 - (difference * 0.25);

          return Transform.scale(
            scale: scale,
            alignment: Alignment.center,
            child: Opacity(
              opacity: opacity,
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.15),
                      blurRadius: 12,
                      offset: const Offset(0, 4),
                    )
                  ],
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Image.network(
                    widget.imageUrls[index],
                    fit: BoxFit.cover,
                    height: double.infinity,
                    width: double.infinity,
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

关键细节说明 #

• viewportFraction: 0.88：设置页面宽度为屏幕的88%，让左右页面部分可见，增强滑动引导性。
• 动态缩放与透明度：通过滑动偏移和页面索引的差值，让当前页面保持最大尺寸和最高透明度，滑动过程中相邻页面逐渐缩放、淡入，符合Material3的流畅动效要求。
• BoxFit.cover：确保图片自适应容器大小，裁剪多余部分以保证比例正确。
• 阴影与圆角：添加Material3风格的阴影和圆角，提升视觉层次感。

如果需要更复杂的动效（如滑动位移、颜色渐变），可以基于_currentPageOffset进一步扩展，比如调整Transform.translate参数，或者动态修改图片滤镜效果。

内容的提问来源于stack exchange，提问作者Bsel