Dart/Flutter：initState字符串数据无法通过setState传递及页面数据丢失问题

嘿，我来帮你解决这两个困扰你的问题！

你之前用Stateless Widget遇到数据丢失是很正常的——因为Stateless Widget的属性是不可变的，当你从详情页回到列表页时，Widget会被重新创建，之前获取的数据不会被保留。转成Stateful Widget的思路完全正确，因为Stateful的State对象会在Widget树重建时被保留（除非被销毁），这样我们就能在页面加载时重新触发数据获取逻辑。

这里的核心问题是initState是同步执行的方法，而且不能直接声明为async（它的返回类型是void，不能是Future）。另外，你需要通过widget.URL来访问Stateful Widget传递的URL参数，而不是直接用变量名。

我给你写了一份修正后的代码示例，包含完整的状态管理和数据获取逻辑：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class BasicDogWidget extends StatefulWidget {
  // 把URL设为final，符合Stateful Widget的不可变属性规范
  final String URL;

  // 添加key参数，优化Widget树重建时的性能
  const BasicDogWidget(this.URL, {super.key});

  @override
  State<BasicDogWidget> createState() => _BasicDogWidgetState();
}

class _BasicDogWidgetState extends State<BasicDogWidget> {
  String? _dogInfo; // 存储获取到的数据，用可空类型处理初始状态
  bool _isLoading = true;
  String _errorText = '';

  @override
  void initState() {
    super.initState();
    // 在initState中调用异步数据获取方法
    _fetchDogData();
  }

  // 封装异步数据获取逻辑
  Future<void> _fetchDogData() async {
    try {
      // 替换成你的实际数据请求逻辑
      final response = await http.get(Uri.parse(widget.URL));
      
      if (response.statusCode == 200) {
        // 成功获取数据后，用setState更新状态
        setState(() {
          _dogInfo = response.body;
          _isLoading = false;
        });
      } else {
        throw Exception('请求失败，状态码：${response.statusCode}');
      }
    } catch (e) {
      // 捕获错误并更新状态
      setState(() {
        _errorText = e.toString();
        _isLoading = false;
      });
    }
  }

  // 额外优化：监听应用生命周期，回到前台时重新加载数据
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.resumed) {
      _fetchDogData();
    }
  }

  @override
  Widget build(BuildContext context) {
    // 根据不同状态展示不同UI
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    if (_errorText.isNotEmpty) {
      return Center(child: Text('出错了：$_errorText'));
    }
    return Center(child: Text(_dogInfo ?? '暂无数据'));
  }
}

几个关键细节说明： #

• 用widget.URL访问父Widget传递的URL参数，这是State类获取Widget属性的标准方式。
• 把数据获取逻辑封装成独立的异步方法_fetchDogData，避免在initState里直接写异步代码。
• 通过_isLoading和_errorText管理状态，让UI能根据加载状态、错误状态、成功状态展示不同内容，避免出现空白或错误文本突兀显示的问题。
• 新增了didChangeAppLifecycleState监听，当页面从后台回到前台时自动重新加载数据，进一步避免数据丢失。

内容的提问来源于stack exchange，提问作者Zoltán Györkei