Flutter中如何将列表数据存入SharedPreferences并读取展示

一、准备工作 #

首先确保项目已引入shared_preferences包：

• 在pubspec.yaml的dependencies节点下添加：

  shared_preferences: ^2.2.2
  

• 执行flutter pub get完成安装，然后在代码文件顶部导入：

  import 'package:shared_preferences/shared_preferences.dart';
  

二、将listDATA存入SharedPreferences #

在你现有的listDATAs()方法中，完成listDATA的填充后，直接添加存储逻辑：

var listDATA = [];
Future listDATAs() async {
  api = '*************';
  var response = await http.post(Uri.parse(api));
  var responsebody = jsonDecode(response.body);

  if (responsebody.length > 0) {
    listDATA.clear(); // 清空旧数据避免重复
    for (int i = 0; i < responsebody.length; i++) {
      listDATA.add(responsebody[i]['name'] + ':' + responsebody[i]['image'].toString());
    }
    // 写入SharedPreferences
    final prefs = await SharedPreferences.getInstance();
    await prefs.setStringList('saved_list', listDATA);
    return responsebody;
  }
}

这里用setStringList方法，第一个参数是自定义的存储键（比如saved_list），第二个参数是要存储的字符串列表listDATA。

三、从SharedPreferences读取数据 #

单独封装一个读取方法，获取存储的列表：

Future<List<String>?> loadSavedList() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getStringList('saved_list');
}

四、读取并展示数据 #

可以在页面的initState中调用读取方法，拿到数据后更新UI：

class YourPage extends StatefulWidget {
  @override
  _YourPageState createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  List<String> _displayList = [];

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

  Future<void> _loadAndDisplayData() async {
    var savedList = await loadSavedList();
    if (savedList != null) {
      setState(() {
        _displayList = savedList;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _displayList.length,
        itemBuilder: (context, index) {
          // 拆分存储的字符串，分离name和image
          var parts = _displayList[index].split(':');
          var name = parts[0];
          var imageUrl = parts[1];
          return ListTile(
            title: Text(name),
            leading: Image.network(imageUrl), // 假设image是网络图片地址
          );
        },
      ),
    );
  }
}

优化存储格式（可选） #

如果担心name中包含冒号导致拆分异常，建议将每个条目转为JSON字符串后再存储：

// 存入时修改循环逻辑
for (int i = 0; i < responsebody.length; i++) {
  var itemJson = jsonEncode({
    'name': responsebody[i]['name'],
    'image': responsebody[i]['image'].toString()
  });
  listDATA.add(itemJson);
}

// 读取时解析
var savedList = await loadSavedList();
if (savedList != null) {
  setState(() {
    _displayList = savedList.map((itemStr) {
      var item = jsonDecode(itemStr);
      return '${item['name']}:${item['image']}';
    }).toList();
  });
}

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