Flutter登录后SharedPreferences存储读取用户数据问题求助

一、正确读写SharedPreferences存储的用户数据 #

你已经将LoginModels转成JSON存储，读取时需要把JSON字符串转回对象，具体步骤如下：

1. 读取数据的核心方法 #

// 封装读取用户数据的异步方法
Future<LoginModels?> getUserData() async {
  final prefs = await SharedPreferences.getInstance();
  // 替换成你存储时用的key，比如*'user_data'*
  final userJson = prefs.getString('user_data');
  if (userJson != null) {
    // 依赖LoginModels类的fromJson方法解析JSON
    return LoginModels.fromJson(jsonDecode(userJson));
  }
  return null;
}

2. 在ProfileScreen中加载数据 #

可以在页面初始化时读取，或者用FutureBuilder直接绑定UI：

// 方式一：initState中加载
@override
void initState() {
  super.initState();
  _loadUserData();
}

Future<void> _loadUserData() async {
  final user = await getUserData();
  if (user != null) {
    setState(() {
      _currentUser = user;
    });
  }
}

// 方式二：用FutureBuilder简化UI渲染
@override
Widget build(BuildContext context) {
  return FutureBuilder<LoginModels?>(
    future: getUserData(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return CircularProgressIndicator();
      } else if (snapshot.hasData && snapshot.data != null) {
        final user = snapshot.data!;
        return Column(
          children: [
            Text(user.username),
            Text(user.email),
            // 其他用户信息组件
          ],
        );
      } else {
        return Text('未获取到用户信息');
      }
    },
  );
}

3. 验证存储是否成功 #

在存储代码后立即读取验证，确认数据已写入：

// 登录成功后的存储代码
final prefs = await SharedPreferences.getInstance();
await prefs.setString('user_data', jsonEncode(loginModel.toJson()));

// 立即读取验证
final storedJson = prefs.getString('user_data');
print('存储的JSON：$storedJson');
if (storedJson != null) {
  final storedUser = LoginModels.fromJson(jsonDecode(storedJson));
  print('存储的用户：${storedUser.username}');
}

二、其他更可靠的解决方案 #

1. 使用全局状态管理（推荐） #

SharedPreferences适合持久化，但页面间状态共享用状态管理更稳定，比如Provider、GetX：

示例：Provider实现全局用户状态

• 创建用户状态类：

class UserProvider extends ChangeNotifier {
  LoginModels? _user;

  LoginModels? get user => _user;

  void setUser(LoginModels user) {
    _user = user;
    notifyListeners();
  }

  // 从SharedPreferences加载用户数据
  Future<void> loadUserFromPrefs() async {
    final prefs = await SharedPreferences.getInstance();
    final userJson = prefs.getString('user_data');
    if (userJson != null) {
      _user = LoginModels.fromJson(jsonDecode(userJson));
      notifyListeners();
    }
  }
}

• 在main.dart中注册Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => UserProvider()..loadUserFromPrefs(),
      child: MyApp(),
    ),
  );
}

• 在ProfileScreen中直接获取状态：

@override
Widget build(BuildContext context) {
  final userProvider = Provider.of<UserProvider>(context);
  final user = userProvider.user;
  
  if (user == null) {
    return Text('未登录');
  }
  
  return Column(
    children: [
      Text(user.username),
      Text(user.email),
    ],
  );
}

• 登录成功时更新状态并持久化：

// 登录接口返回成功后
await prefs.setString('user_data', jsonEncode(loginModel.toJson()));
Provider.of<UserProvider>(context, listen: false).setUser(loginModel);

2. 保持页面状态避免重建 #

如果ProfileScreen切换后会重新初始化，用AutomaticKeepAliveClientMixin保留状态：

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

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> with AutomaticKeepAliveClientMixin {
  LoginModels? _user;

  @override
  bool get wantKeepAlive => true;

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

  Future<void> _loadUserData() async {
    // 读取SharedPreferences数据赋值给_user
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用此方法
    // 渲染用户详情UI
  }
}

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