Flutter/Dart中SharedPreferences值的显示与增改问题：解决'Future'不是'String'子类型错误

Hey there, I see exactly what's causing your error and how to fix it. Let's walk through the issues and the corrected code:

问题原因 #

1. 异步方法返回类型不匹配：你的_getUsername()、_getPassword()、_getUrl()都是async方法，这意味着它们返回的是Future<String>，而不是直接的String类型。你直接把这些Future赋值给String变量，就会触发'Future' is not a subtype of type 'String'错误。
2. initState中无法直接使用await：initState是同步生命周期方法，不能直接在里面等待异步操作完成，得通过其他方式处理异步初始化。
3. 设置值后未更新UI：你调用_setUsername等方法保存了值，但没有更新本地的username变量并触发UI刷新，所以页面上不会显示新值。

修正后的完整代码 #

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

class ThirdRoute extends StatefulWidget {
  @override
  _ThirdRouteState createState() => _ThirdRouteState();
}

class _ThirdRouteState extends State<ThirdRoute> {
  String username = '';
  String password = '';
  String url = '';

  @override
  void initState() {
    super.initState();
    // 调用异步初始化方法，不要直接赋值
    _loadSavedValues();
  }

  // 异步加载所有保存的偏好设置值
  Future<void> _loadSavedValues() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      // 从SharedPreferences取值，为空时给默认空字符串
      username = prefs.getString('username') ?? '';
      password = prefs.getString('password') ?? '';
      url = prefs.getString('url') ?? '';
    });
  }

  // 保存用户名并更新本地变量和UI
  Future<void> _setUsername(String newUsername) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString("username", newUsername);
    setState(() {
      username = newUsername;
    });
  }

  // 保存密码并更新本地变量和UI
  Future<void> _setPassword(String newPassword) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString("password", newPassword);
    setState(() {
      password = newPassword;
    });
  }

  // 保存URL并更新本地变量和UI
  Future<void> _setUrl(String newUrl) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString("url", newUrl);
    setState(() {
      url = newUrl;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("edit page")),
      body: Center(
        child: ListView(
          padding: const EdgeInsets.all(16.0),
          children: [
            Container(
              margin: const EdgeInsets.only(bottom: 12.0),
              child: Text('当前用户名: $username'),
            ),
            Container(
              margin: const EdgeInsets.only(bottom: 12.0),
              child: Text('当前密码: $password'),
            ),
            Container(
              margin: const EdgeInsets.only(bottom: 24.0),
              child: Text('当前URL: $url'),
            ),
            ElevatedButton( // 建议用ElevatedButton替代已废弃的FlatButton
              onPressed: () {
                // 直接调用带状态更新的set方法
                _setUsername("new username");
                _setPassword("new password");
                _setUrl("new url");
              },
              child: const Text('设置新值'),
            )
          ],
        ),
      ),
    );
  }
}

关键改进点 #

• 统一异步加载：用_loadSavedValues这个异步方法一次性加载所有偏好设置值，加载完成后用setState更新本地变量，触发UI渲染。
• 空值处理：使用?? ''确保当SharedPreferences中没有对应值时，变量不会为null，避免Text widget报错。
• 设置后即时更新UI：在每个_setXXX方法中，保存值后立即更新本地变量并调用setState，让页面实时显示新值。
• 替换废弃组件：把FlatButton换成了当前推荐的ElevatedButton，避免使用已废弃的API。

这样修改后，你就能正确获取和设置SharedPreferences的值，字符串也能正常在Widget中显示了。

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