Flutter实现ListView子项动态动画及可点击中间项方案咨询

你可以基于ListWheelScrollView实现需求，核心是通过动态计算每个item与中间选中项的索引差来设置对应的字号和透明度，同时给当前选中项绑定点击事件。以下是完整实现方案：

核心思路 #

1. 用ListWheelScrollView作为滚动容器，关闭默认放大功能避免干扰自定义样式
2. 通过onSelectedItemChanged实时获取当前中间选中项的索引
3. 根据每个item与选中项的索引差值，设置对应的字号和透明度
4. 仅给当前选中项（索引差为0）添加可点击交互

完整代码实现 #

import 'package:flutter/material.dart';

class GradientScrollList extends StatefulWidget {
  final List<String> items;
  const GradientScrollList({super.key, required this.items});

  @override
  State<GradientScrollList> createState() => _GradientScrollListState();
}

class _GradientScrollListState extends State<GradientScrollList> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return ListWheelScrollView(
      itemExtent: 50, // 固定每个item的高度，可根据需求调整
      useMagnifier: false, // 禁用默认放大，确保自定义样式生效
      diameterRatio: 1.5, // 调整滚轮的曲率，可选参数
      onSelectedItemChanged: (index) {
        setState(() => _currentIndex = index);
      },
      childDelegate: ListWheelChildListDelegate(
        children: widget.items.asMap().entries.map((entry) {
          final index = entry.key;
          final text = entry.value;
          final diff = (index - _currentIndex).abs();

          // 根据索引差设置样式参数
          double fontSize = 19;
          double opacity = 1.0;
          if (diff == 1) {
            fontSize = 13;
            opacity = 0.5;
          } else if (diff >= 2) {
            fontSize = 9;
            opacity = 0.25;
          }

          return Opacity(
            opacity: opacity,
            child: GestureDetector(
              // 仅当前选中项可点击
              onTap: diff == 0 ? () {
                // 这里处理点击逻辑，比如跳转、弹窗等
                debugPrint('点击了当前项：$text');
              } : null,
              child: Center(
                child: Text(
                  text,
                  style: TextStyle(
                    fontSize: fontSize,
                    color: Colors.black87,
                  ),
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

// 调用示例
// GradientScrollList(items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'])

关键细节说明 #

• itemExtent：必须设置固定值，确保滚动时中间项的位置精准，是动态计算样式的基础
• useMagnifier: false：关闭ListWheelScrollView默认的中间项放大效果，避免和自定义字号冲突
• 索引差计算：通过abs(index - _currentIndex)判断item与中间项的层级，对应设置不同的视觉参数
• 点击事件控制：只有当索引差为0时（即当前中间项），才绑定点击回调，符合需求

如果需要循环滚动列表，可以把ListWheelChildListDelegate替换为ListWheelChildLoopingListDelegate，实现无限循环的效果。

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