Flutter中ListWheelScrollView仅输出最终选中项的实现疑问

开发者阿泽

2026-7-23

解决ListWheelScrollView仅在选中项确定后输出的问题

你的问题在于，sleep会阻塞UI线程，而且滚动过程中每一个经过的项都会触发_updateSelectedCardType方法，每个方法里的延迟任务都会执行，所以最终还是会输出所有经过的项，同时还会导致界面卡顿。

正确的做法是使用**防抖（Debounce）**机制：每次选中项变化时，先取消之前的延迟任务，只有当滚动停止、一段时间内没有新的选中项变化时，才执行打印操作。

具体实现步骤：

定义一个Timer变量，用于存储延迟任务
在_updateSelectedCardType方法中，先取消之前的定时器
创建新的定时器，设置合适的延迟时间（比如500ms，可根据需求调整），在定时器回调中执行打印

修改后的代码示例：

import 'dart:async';
import 'package:flutter/material.dart';

// ... 其他组件代码

List<int> numbers = List.generate(3, (index) => index + 1);
Timer? _debounceTimer; // 定义防抖定时器

void _updateSelectedCardType(int index) {
  setState(() {
    _selectedIndex = index;
    switch (index) {
      case 0:
        selectedCard = '1';
        break;
      case 1:
        selectedCard = '2';
        break;
      case 2:
        selectedCard = '3';
        break;
    }
  });

  // 取消之前的延迟任务，避免重复触发
  _debounceTimer?.cancel();
  // 设置新的延迟任务，滚动停止500ms后执行打印
  _debounceTimer = Timer(const Duration(milliseconds: 500), () {
    print('Selected card type: $selectedCard');
  });
}

// 组件销毁时取消定时器，防止内存泄漏
@override
void dispose() {
  _debounceTimer?.cancel();
  super.dispose();
}