如何使用shared_preferences包保存字符串列表？Flutter开发问题求助

问题排查 #

你当前代码存在两处核心逻辑缺失导致历史数据无法加载：

• 页面初始化initState阶段没有读取本地存储的teams数据，每次进入页面默认初始化列表为空
• 删除团队操作仅修改了内存中的列表，没有同步更新shared_preferences的存储值，重启/重进页面后删除操作不会生效

修复方案 #

1. 新增本地数据读取逻辑 #

在State类中新增异步读取方法，页面初始化时调用，读取完成后更新页面状态：

Future<void> loadTeams() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  // 读取不到数据时默认返回空数组，避免空异常
  List<String>? storedTeams = prefs.getStringList('teams');
  setState(() {
    teams = storedTeams ?? [];
  });
}

在initState中调用该方法：

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

2. 补全删除操作的存储同步逻辑 #

修改removeTeam方法，删除完成后同步写入最新的列表到本地：

void removeTeam(String name) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  setState(() {
    teams.remove(name);
  });
  // 同步更新本地存储
  prefs.setStringList('teams', teams);
}

修复后完整代码 #

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

class TeamScreen extends StatefulWidget {
  @override
  _TeamScreenState createState() => _TeamScreenState();
}

class _TeamScreenState extends State<TeamScreen> {
  List<String> teams = [];

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

  Future<void> loadTeams() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    List<String>? storedTeams = prefs.getStringList('teams');
    setState(() {
      teams = storedTeams ?? [];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: teams.length,
        itemBuilder: (context, index) {
          return Team(
            teams[index],
            () => removeTeam(teams[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => newTeam(),
        child: Icon(
          CupertinoIcons.add,
        ),
      ),
    );
  }

  void addTeam(String name) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    setState(() {
      teams.add(name);
    });
    Navigator.of(context).pop();

    prefs.setStringList('teams', teams);
  }

  void newTeam() {
    showDialog<AlertDialog>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('名称选择：'),
          content: TextField(
            onSubmitted: addTeam,
          ),
        );
      },
    );
  }

  void removeTeam(String name) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      teams.remove(name);
    });
    prefs.setStringList('teams', teams);
  }
}

class Team extends StatelessWidget {
  final String name;
  final Function remove;
  const Team(this.name, this.remove);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 22),
      child: ListTile(
        leading: Icon(Icons.sports_volleyball_outlined),
        contentPadding: EdgeInsets.symmetric(vertical: 8.0),
        title: Text(
          name,
          style: TextStyle(
            fontSize: 18.0,
            fontWeight: FontWeight.w600,
          ),
        ),
        trailing: IconButton(
          icon: Icon(CupertinoIcons.delete),
          onPressed: () => remove(),
        ),
      ),
    );
  }
}

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