Flutter初始化时条件组件始终显示True状态问题求助

问题现象 #

• 组件初始化时，无论SharedPreferences中存储的flip布尔值为false，始终显示true对应的状态（图片和文本）
• 初始时Text("HI $id")无内容显示
• 点击GestureDetector后，组件能切换到正确状态，但初始化状态不符合预期

核心问题原因 #

• 异步方法调用时机错误：在build方法中直接调用异步方法_UIsetting()，build是同步执行的，此时异步操作还未完成，组件会先使用flip和id的默认值渲染，且异步获取数据后未触发UI刷新
• build方法频繁执行：每次组件重建都会重复调用_UIsetting()，重复读取SharedPreferences，造成资源浪费
• 空值处理不严谨：直接使用!强制解包SharedPreferences返回值，若未存储过对应键值会抛出空指针异常

修复方案 #

1. 移到initState中执行初始化操作 #

将SharedPreferences的初始化逻辑放到initState，仅在组件创建时执行一次，避免重复调用

2. 获取数据后触发UI刷新 #

在_UIsetting()中获取到数据后调用setState()，通知Flutter框架更新UI

3. 安全处理空值 #

使用空值合并运算符??设置默认值，避免空指针

修改后的完整代码示例 #

class myAPPState extends State<myAPP> {
  String id = "";
  bool flip = false; // 设置合理初始值
  int previous = 0;

  @override
  void initState() {
    super.initState();
    _UIsetting(); // 初始化时仅调用一次
  }

  Future _UIsetting() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // 安全获取布尔值，默认false
    flip = prefs.getBool('flip') ?? false;
    // 安全获取ID，默认空字符串
    id = prefs.getString("ID") ?? "";
    setState(() {}); // 获取数据后刷新UI
  }

  Future _flipCheck() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // 安全获取时间戳，默认0
    previous = prefs.getInt('previous_timestamp') ?? 0;
    int now = DateTime.now().millisecondsSinceEpoch;

    if ((now - previous) ~/ 3600000 >= 8) {
      prefs.setInt('previous_timestamp', now);
      flip = true;
      prefs.setBool('flip', true);
    } else {
      flip = false;
      prefs.setBool('flip', false);
    }
    setState(() {}); // 修改状态后刷新UI
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("HI $id"),
          Container(
            color: Colors.grey[200], // 替换为你实际使用的sliver颜色
            child: GestureDetector(
              onTap: () {
                _flipCheck(); // 无需嵌套setState，内部已处理刷新
              },
              child: AnimatedSwitcher(
                duration: const Duration(seconds: 1),
                transitionBuilder: (Widget widget, Animation<double> animation) {
                  final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
                  return AnimatedBuilder(
                    animation: rotateAnim,
                    child: widget,
                    builder: (context, widget) {
                      final isUnder = (ValueKey(flip) != widget?.key);
                      final value = isUnder ? min(rotateAnim.value, pi / 2) : rotateAnim.value;
                      return Transform(
                        transform: Matrix4.rotationY(value),
                        child: widget,
                        alignment: Alignment.center,
                      );
                    },
                  );
                },
                child: flip
                    ? SizedBox(
                        key: const ValueKey(0),
                        width: MediaQuery.of(context).size.width,
                        height: 250,
                        child: Image.asset('assets/work1.png'),
                      )
                    : SizedBox(
                        key: const ValueKey(1),
                        width: MediaQuery.of(context).size.width,
                        height: 250,
                        child: Image.asset('assets/work2.png'),
                      ),
              ),
            ),
          ),
          flip ? const Text("TRUE Condition") : const Text("FALSE Condition"),
        ],
      ),
    );
  }
}

额外说明 #

• 点击事件中无需嵌套setState调用_flipCheck，方法内部已处理状态刷新
• 给常量key添加const修饰符，提升组件性能
• 统一处理所有SharedPreferences返回值的空值情况，避免未存储数据时抛出异常

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