时间戳

首页 > 解决方案 > Flutter：使用共享首选项插件存储保存的收藏列表

json - Flutter：使用共享首选项插件存储保存的收藏列表

问题描述

以下是我的 JSON 文件，其中包含数据：

[
    {
        "city": "City1",
        "attractions": [
            "attraction1",
            "attraction2"
        ],
    },
    {
        "city": "city2",
        "attractions": [
            "attraction1",
            "attraction2",
        ],
    },
]

我的实现代码是一个从 JSON 文件中获取数据的列表视图构建器。该代码还具有将城市保存为收藏夹的选项选项，该选项可以在另一个页面中显示为已保存收藏夹的列表：

class Index extends StatefulWidget {
  @override
  _IndexState createState() => _IndexState();
}
List data;
List<Cities> citylist = List();
List<Cities> citysavedlist = List();
int index;
class _IndexState extends State<Index> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: listView(),
    );
  }
  Future<String> fetchData() async {
    String data =
        await DefaultAssetBundle.of(context).loadString("assets/data.json");
    final jsonResult = json.decode(data);
    this.setState(() {
      jsonResult
          .forEach((element) => citylist.add(new Cities.fromJson(element)));
    });
    return "Success!";
  }

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

  listView() {
    return ListView.builder(
      itemCount: citylist == null ? 0 : citylist.length,
      itemBuilder: (context, index) {
        return Column(
          children: <Widget>[_buildRow(index, citylist)],
        );
      },
    );
  }

  Widget _buildRow(index, citylist) {
    final bool alreadySaved = citysavedlist.contains(citylist[index]);
    return Padding(
      padding: const EdgeInsets.only(top: 5.0, left: 5.0, right: 5.0),
      child: Card(
        child: ListTile(
            title:
                Text(citylist[index].title, style: TextStyle(fontSize: 22.0)),
            trailing: IconButton(
              icon: Icon(
                alreadySaved ? Icons.star : Icons.star_border,
                color: alreadySaved ? Colors.blue : Colors.blue,
              ),
              onPressed: () {
                setState(() {
                  if (alreadySaved) {
                    citysavedlist.remove(citylist[index]);
                  } else {
                    citysavedlist.add(citylist[index]);
                  }
                });
              },
            ), //subtitle: Text(subtitle),
            onTap: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => Detail(citylist[index])));
            }),
      ),
    );
  }


void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          final Iterable<ListTile> tiles = citysavedlist.map(
            (Cities pair) {
              return ListTile(
                  title: Text(
                    pair.city,
                  ),
                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => Detail(pair)));
                  });
            },
          );

          final List<Widget> divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();
          return Scaffold(
            appBar: AppBar(
              title: const Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        },
      ),
    );
  }
}

这是模型类：

List<Cities> citiesFromJson(String str) =>
    List<Cities>.from(json.decode(str).map((x) => Cities.fromJson(x)));
String citiesToJson(List<Cities> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Cities {
  Cities({
    this.city,
    this.attractions,
  });

  String city;
  List<String> attractions;

  factory Cities.fromJson(Map<String, dynamic> json) => Cities(
        city: json["city"],
        attractions: List<String>.from(json["attractions"].map((x) => x)),
      );

  Map<String, dynamic> toJson() => {
        "city": city,
        "attractions": List<dynamic>.from(attractions.map((x) => x)),
      };
}

现在我面临一个问题，即保存的最喜欢的城市没有存储，所以当应用程序关闭并再次重新打开时，最喜欢的列表将消失，因为它没有存储。

我知道有一个名为共享首选项的插件可以执行存储已保存数据的功能，但我无法将此插件集成到我的代码中。有人可以帮助做到这一点。

标签： jsonflutterdartflutter-listview

解决方案

首先，您要做的是在 pubspec 中获取包，然后

import 'package:shared_preferences/shared_preferences.dart';

SharedPreferences prefs = await SharedPreferences.getInstance();

现在要保存 json 数据，您要做的是

prefs.setString('mydata', json.encode(yourjsondata));

要检索此数据，您必须使用您指定的确切名称，在我的情况下为“mydata”

json.decode(preferences.getString('mydata'))

记住如果你想保存这么多数据项 sqflite 或 hive 建议或者如果你仍然想使用 shared_preferences 你可以将计数器保存为

保存

var counter = (prefs.getInt('Counter')??0)+1;
prefs.setString('Counter:$counter', json.encode(yourdata));

恢复订单

var listCount = preferences.getInt('Counter');

循环使用 listCount 然后使用

json.decode(preferences.getString('Counter:$variable'))

推荐阅读