Flutter PageView自定义轮播：右侧Widget未被激活组件覆盖的问题

问题描述 #

我使用PageView.builder()创建自定义轮播组件，期望激活状态的Widget能覆盖左右两侧的Widget。通过AnimatedContainer的transform属性，用Matrix4.diagonal3Values()实现缩放效果，但仅左侧Widget被激活项覆盖，右侧Widget仍显示在激活Widget上方。如何让右侧也实现被覆盖的效果？

问题代码片段 #

transform: active
              ? Matrix4.diagonal3Values(1.1, 1, 1)
              : Matrix4.diagonal3Values(1.2, 1, 1),

完整代码 #

import 'package:flutter/material.dart';

// Main page of the widget (Carousel)
class CarouselScreen extends StatefulWidget {
  const CarouselScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<CarouselScreen> createState() => _CarouselScreenState();
}

class _CarouselScreenState extends State<CarouselScreen> {
  int activePage = 0;
  late PageController _pageController;
  List<String> images = [
    'https://images.pexels.com/photos/1191403/pexels-photo-1191403.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
    'https://images.pexels.com/photos/9020063/pexels-photo-9020063.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
    'https://images.pexels.com/photos/12437389/pexels-photo-12437389.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
    'https://images.pexels.com/photos/58997/pexels-photo-58997.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
  ];

  @override
  void initState() {
    super.initState();
    _pageController = PageController(viewportFraction: 0.7, initialPage: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 5),
          child: SizedBox(
            width: MediaQuery.of(context).size.width,
            height: 350,
            child: PageView.builder(
                itemCount: images.length,
                pageSnapping: true,
                controller: _pageController,
                onPageChanged: (page) {
                  setState(() => activePage = page);
                },
                itemBuilder: (context, pagePosition) {
                  bool active = pagePosition == activePage;
                  return slider(images, pagePosition, active);
                }),
          ),
        ),
      ],
    );
  }
}

Widget slider(images, pagePosition, active) {
  double margin = active ? 10 : 20;

  return SizedBox(
    child: Stack(
      clipBehavior: Clip.none,
      children: [
        AnimatedContainer(
          clipBehavior: Clip.none,
          transform: active
              ? Matrix4.diagonal3Values(1.1, 1, 1)
              : Matrix4.diagonal3Values(1.2, 1, 1),
          duration: const Duration(milliseconds: 500),
          curve: Curves.easeInOutCubic,
          margin: EdgeInsets.symmetric(vertical: margin),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            image: DecorationImage(
              image: NetworkImage(
                images[pagePosition],
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
        // date
        AnimatedPositioned(
          duration: const Duration(milliseconds: 500),
          curve: Curves.easeInOutCubic,
          right: active ? 10 : -20,
          top: active ? 10 : 20,
          child: Container(
            margin: const EdgeInsets.only(top: 10, left: 10),
            padding: const EdgeInsets.symmetric(
              horizontal: 10,
              vertical: 10,
            ),
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.5),
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  '12',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Dec',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

当前效果 #

解决方法 #

核心原因 #

PageView的子Widget是按索引顺序绘制的，索引更大的Widget会被绘制在更上层。因此右侧的Widget（索引比激活项大）会默认叠在激活项上方，仅靠缩放无法改变层级关系。

具体修改 #

给激活状态的Widget增加z轴偏移，提升它的绘制层级，让它覆盖左右两侧的Widget。同时调整缩放比例，让激活项比非激活项更大，符合轮播的视觉逻辑：

修改AnimatedContainer的transform属性：

transform: active
    // 激活项：放大+z轴偏移提升层级
    ? Matrix4.diagonal3Values(1.2, 1, 1)..translate(0, 0, 10)
    // 非激活项：缩小+z轴保持底层
    : Matrix4.diagonal3Values(1.1, 1, 1)..translate(0, 0, 0),

额外优化 #

保持clipBehavior: Clip.none设置，避免缩放后的内容被裁剪，确保动画过渡自然流畅。

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