如何在ListView内声明变量以覆盖全局xCountUpDuration的值

问题根源 #

你遇到的问题是变量作用域冲突：

• 代码1中的xCountUpDuration是类的成员变量，作用域覆盖整个类；
• 代码3中itemBuilder里的xCountUpDuration是局部变量，仅在当前itemBuilder函数内部有效；
• 代码2的xCountUpTimerWidget()直接引用类成员变量，完全无法访问itemBuilder里的局部变量，所以始终显示0时长。

解决方案 #

1. 基础版：让Widget接收外部参数

先修改xCountUpTimerWidget，使其不再依赖类成员变量，而是通过参数接收时长：

Widget xCountUpTimerWidget(Duration duration) {
  String xDigitConverter(int n) => n.toString().padLeft(2, '0');

  final xHours = xDigitConverter(duration.inHours);
  final xMinutes = xDigitConverter(duration.inMinutes.remainder(60));
  final xSeconds = xDigitConverter(duration.inSeconds.remainder(60));

  return Text(
    '$xHours:$xMinutes:$xSeconds',
    style: TextStyle(
      fontSize: 60,
      fontWeight: FontWeight.w700,
    ),
  );
}

然后在ListView的itemBuilder中调用时，把局部的xCountUpDuration传进去：

return ListView.builder(
  itemBuilder: (context, index) {
    Duration xCountUpDuration = Duration(hours: 0, minutes: 10, seconds: 0);
    return Column(
      children: [
        xCountUpTimerWidget(xCountUpDuration),
      ]
    );
  }
);

2. 进阶版：独立封装每个计时项（支持独立启停）

如果需要每个列表项的秒表独立计时（互不干扰），需要把每个计时器封装成独立的StatefulWidget，避免共用同一个状态：

// 独立的计时项Widget
class CountUpItem extends StatefulWidget {
  final Duration initialDuration;

  const CountUpItem({Key? key, required this.initialDuration}) : super(key: key);

  @override
  State<CountUpItem> createState() => _CountUpItemState();
}

class _CountUpItemState extends State<CountUpItem> {
  late Duration _currentDuration;
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    // 初始化时长为传入的10分钟
    _currentDuration = widget.initialDuration;
  }

  // 开始计时
  void _startTimer() {
    _timer?.cancel();
    _timer = Timer.periodic(const Duration(seconds: 1), (_) {
      setState(() {
        _currentDuration += const Duration(seconds: 1);
      });
    });
  }

  // 停止计时
  void _stopTimer() {
    _timer?.cancel();
  }

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

  @override
  Widget build(BuildContext context) {
    String xDigitConverter(int n) => n.toString().padLeft(2, '0');
    final xHours = xDigitConverter(_currentDuration.inHours);
    final xMinutes = xDigitConverter(_currentDuration.inMinutes.remainder(60));
    final xSeconds = xDigitConverter(_currentDuration.inSeconds.remainder(60));

    return Column(
      children: [
        Text(
          '$xHours:$xMinutes:$xSeconds',
          style: const TextStyle(
            fontSize: 60,
            fontWeight: FontWeight.w700,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: _startTimer, child: const Text('开始')),
            const SizedBox(width: 16),
            ElevatedButton(onPressed: _stopTimer, child: const Text('停止')),
          ],
        ),
        const Divider(),
      ],
    );
  }
}

然后在ListView中使用这个封装好的Widget：

return ListView.builder(
  itemCount: 5, // 根据需求设置列表数量
  itemBuilder: (context, index) {
    return CountUpItem(
      initialDuration: const Duration(minutes: 10),
    );
  }
);

说明 #

进阶版的优势在于每个列表项拥有独立的计时状态，启动、停止操作不会影响其他项，完全符合多秒表的使用场景。

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