请求实现Flutter中可滑动切换的数字卡片交互组件

核心需求实现方案 #

针对你描述的卡片滑动交互（初始3张卡片、中间最大、右滑切换生成新数字、支持快速滑动），可以通过PageView结合动态缩放动画来实现，以下是完整的实现代码和关键说明：

完整代码实现 #

import 'package:flutter/material.dart';

class ScrollCardWidget extends StatefulWidget {
  const ScrollCardWidget({super.key});

  @override
  State<ScrollCardWidget> createState() => _ScrollCardWidgetState();
}

class _ScrollCardWidgetState extends State<ScrollCardWidget> {
  final PageController _pageController = PageController(initialPage: 1);
  List<int> _numberList = [9, 10, 11];
  int _currentMaxNumber = 11;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(_handlePageChange);
  }

  void _handlePageChange() {
    // 滑动到最右侧卡片时，更新数字序列并重置页面位置
    if (_pageController.page?.round() == 2) {
      setState(() {
        _numberList.removeAt(0);
        _currentMaxNumber += 1;
        _numberList.add(_currentMaxNumber);
        // 跳回中间位置，实现无限滑动的视觉效果
        _pageController.jumpToPage(1);
      });
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200,
      child: PageView.builder(
        controller: _pageController,
        scrollDirection: Axis.horizontal,
        physics: const BouncingScrollPhysics(),
        itemCount: _numberList.length,
        itemBuilder: (context, index) {
          // 根据页面偏移量动态计算卡片缩放比例
          double scale = 1.0;
          if (_pageController.position.haveDimensions) {
            final double pageOffset = _pageController.page ?? 1.0;
            scale = 1 - ((index - pageOffset).abs() * 0.2);
            scale = scale.clamp(0.8, 1.0); // 限制缩放范围，避免过度缩小
          }

          return Center(
            child: Transform.scale(
              scale: scale,
              child: Card(
                elevation: 8,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16),
                ),
                child: SizedBox(
                  width: 180,
                  height: 160,
                  child: Center(
                    child: Text(
                      _numberList[index].toString(),
                      style: const TextStyle(
                        fontSize: 48,
                        fontWeight: FontWeight.bold,
                        color: Colors.blueAccent,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

// 组件使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(
        child: ScrollCardWidget(),
      ),
    ),
  ));
}

关键实现细节 #

• 初始布局与缩放：通过PageController初始定位到索引1（对应数字10），利用Transform.scale根据页面偏移量动态调整卡片大小，实现中间卡片最大、两侧卡片缩小的视觉效果。
• 滑动更新逻辑：监听PageController的页面变化，当滑动到最右侧卡片（索引2）时，移除左侧的旧卡片，添加新的序列数字，然后跳回中间位置，模拟无限滑动的效果。
• 快速滑动支持：使用BouncingScrollPhysics提供惯性滑动效果，快速滑动时会自动连续触发页面切换，实现数字高速滚动。

可优化方向 #

• 若需要支持左滑切换到前序数字，可以添加类似的左滑判断逻辑，更新数字序列。
• 调整缩放系数、卡片阴影、圆角等参数，匹配你的设计风格。
• 可以添加滑动速度阈值检测，当速度超过设定值时，批量生成多个数字，进一步提升快速滑动的流畅度。

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