如何在Flutter中实现列表项依次自动闪烁并获取当前项索引

实现方案 #

核心是通过动画控制器实现闪烁效果，配合定时器循环切换目标列表项，同时实时获取当前闪烁的索引。

完整代码示例 #

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

void main() => runApp(const FlashListDemo());

class FlashListDemo extends StatelessWidget {
  const FlashListDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '列表闪烁示例',
      home: Scaffold(
        appBar: AppBar(title: const Text('列表项依次闪烁')),
        body: const FlashList(),
      ),
    );
  }
}

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

  @override
  State<FlashList> createState() => _FlashListState();
}

class _FlashListState extends State<FlashList> with SingleTickerProviderStateMixin {
  late AnimationController _flashAnimController;
  Timer? _indexSwitchTimer;
  int _currentFlashIndex = 0;
  final List<String> _listData = List.generate(10, (i) => '列表项 ${i + 1}');

  @override
  void initState() {
    super.initState();
    // 初始化闪烁动画控制器：时长500ms，来回重复播放
    _flashAnimController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    )..repeat(reverse: true);

    // 定时切换闪烁项：每1秒切换一次，循环遍历列表
    _indexSwitchTimer = Timer.periodic(const Duration(seconds: 1), (_) {
      setState(() {
        _currentFlashIndex = (_currentFlashIndex + 1) % _listData.length;
      });
      // 在这里可以直接获取当前闪烁索引，做后续业务处理
      print('当前闪烁项索引：$_currentFlashIndex');
    });
  }

  @override
  void dispose() {
    _flashAnimController.dispose();
    _indexSwitchTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _listData.length,
      itemBuilder: (context, index) {
        // 只有当前目标项才播放闪烁动画
        final isCurrentFlashItem = index == _currentFlashIndex;
        return FadeTransition(
          opacity: _flashAnimController.drive(Tween(begin: 0.3, end: 1.0)),
          child: ListTile(
            title: Text(_listData[index]),
            textColor: isCurrentFlashItem ? Colors.deepOrange : Colors.black87,
            titleTextStyle: TextStyle(
              fontWeight: isCurrentFlashItem ? FontWeight.bold : FontWeight.normal,
              fontSize: 16,
            ),
          ),
        );
      },
    );
  }
}

关键细节说明 #

• 闪烁动画：使用AnimationController配合FadeTransition实现透明度变化的闪烁效果，repeat(reverse: true)让动画来回循环
• 索引切换：通过Timer.periodic定时更新_currentFlashIndex，取模运算实现列表项的循环闪烁
• 索引获取：在定时器回调中直接读取_currentFlashIndex即可，也可以通过回调函数暴露给父组件使用

自定义调整 #

• 修改AnimationController的duration参数可调整闪烁快慢
• 修改Timer.periodic的间隔时长可调整列表项的切换速度
• 可替换FadeTransition为ScaleTransition或ColorTween实现其他闪烁样式

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