Flutter：如何实现点击后将Checkbox组件隐藏24小时

核心思路 #

点击Checkbox后，把当前时间持久化存储起来，之后每次加载UI时对比当前时间与存储时间，间隔不足24小时就隐藏Checkbox，超过则正常显示。同时设置定时器，24小时后自动恢复显示。

实现步骤 #

1. 添加依赖

在pubspec.yaml中引入shared_preferences（用于持久化存储时间戳）：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2 # 可替换为最新版本

2. 完整代码实现

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Checkbox 24小时隐藏示例')),
        body: const CheckboxWithAutoHide(),
      ),
    );
  }
}

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

  @override
  State<CheckboxWithAutoHide> createState() => _CheckboxWithAutoHideState();
}

class _CheckboxWithAutoHideState extends State<CheckboxWithAutoHide> {
  late SharedPreferences _prefs;
  bool _isCheckboxVisible = true;
  bool _isChecked = false;
  final String _clickTimeKey = 'last_checkbox_click';

  @override
  void initState() {
    super.initState();
    _initStorageAndCheckStatus();
  }

  // 初始化存储并检查是否需要隐藏Checkbox
  Future<void> _initStorageAndCheckStatus() async {
    _prefs = await SharedPreferences.getInstance();
    final int? lastClickMs = _prefs.getInt(_clickTimeKey);
    
    if (lastClickMs != null) {
      final DateTime lastClickTime = DateTime.fromMillisecondsSinceEpoch(lastClickMs);
      final Duration timeDiff = DateTime.now().difference(lastClickTime);
      
      if (timeDiff.inHours < 24) {
        setState(() => _isCheckboxVisible = false);
        // 计算剩余时间，到点后自动恢复显示
        Timer(timeDiff, () {
          setState(() => _isCheckboxVisible = true);
          _prefs.remove(_clickTimeKey);
        });
      }
    }
  }

  // 处理Checkbox点击事件
  void _handleCheckboxTap(bool? value) async {
    if (value == true) {
      setState(() {
        _isChecked = true;
        _isCheckboxVisible = false;
      });
      // 存储当前点击的时间戳
      await _prefs.setInt(_clickTimeKey, DateTime.now().millisecondsSinceEpoch);
      // 24小时后自动恢复显示
      Timer(const Duration(hours: 24), () {
        setState(() {
          _isCheckboxVisible = true;
          _isChecked = false; // 可选：恢复未选中状态
        });
        _prefs.remove(_clickTimeKey);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _isCheckboxVisible
          ? CheckboxListTile(
              title: const Text('点击后隐藏24小时'),
              value: _isChecked,
              onChanged: _handleCheckboxTap,
            )
          : const Text('24小时后可再次操作'),
    );
  }
}

3. 关键逻辑说明

• 持久化存储：用shared_preferences保存点击时间戳，保证APP重启后状态不丢失。
• 时间校验：通过DateTime.difference()计算时间差，判断是否满足24小时间隔。
• 自动恢复：使用Timer设置延迟回调，到时间后自动恢复Checkbox显示，并清理存储的时间戳。

注意事项 #

• 如果用户清除APP存储，时间记录会丢失，Checkbox会重新显示。
• 可根据需求调整逻辑，比如点击未选中状态也隐藏，或者保留选中状态等。

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