json - Flutter - 保存用户数据-6ren

json - Flutter - 保存用户数据

转载作者：IT王子更新时间：2023-10-29 06:48:56

我目前正在创建一个跟踪一般加密数据的应用程序，除了这些数据，我们还发布为加密爱好者量身定制的新闻文章。此新闻文章数据的每个方面都以字符串形式存储，从图像 url 到发布日期 - 下面的完整列表。

我正在寻找将此数据保存到用户设备的方法。在理想情况下，我只是将此数据保存在 JSON 数组中，但除了不知道如何执行此操作之外，我不确定这是否是保存此数据以供以后显示的最有效方法。

如果您认为 JSON 是保存这些数据的最佳方式，我只需要知道如何将这些数据正确地管理到不同保存文章的数组中，以及如何将其正确地导入到我的 Dart 代码中。

这段代码的示例会很棒，我希望在新的一年之前发布此应用程序，因此我需要我能获得的所有帮助。非常感谢。

这是我要从 this source 中保存/显示的上述数据:

来源 - 来源
作者 - 作者
描述 - 描述
发布日期 - publishedAt
文章标题 - title
文章网址 - url
文章图片 - urlToImage

编辑:尝试修改 shadowsheep 的答案以适应索引模型

每个新闻小部件都是一个新的 inkwell，它允许构建一个新的 scaffold。从这个 scaffold 中，您会看到保存文章的选项。保存时，代码目前仅更改以下字符串的值:title、description、URL 和 Image URL.

_sTitle
_sDescription
_sURL
_sURLtoImage

我非常想要一种将数据库(如 shadowsheep 所述)保存到用户设备的方法。这意味着即使用户关闭和打开应用程序，已保存的文章也将永久保留在设备上。

以下代码是我显示新闻数据的确切用例。

CarouselSlider(
 items: [1,2,3,4,5,6,7,8,9,10].map((index) {
    return  Builder(
      builder: (BuildContext context) {
        return Padding(
          padding:  EdgeInsets.only(
            top: 5.0,
            bottom: 20.0,
          ),
          child:  InkWell(
            borderRadius:  BorderRadius.only(
              topLeft: const Radius.circular(15.0),
              topRight: const Radius.circular(15.0),
            ),
            onTap: () {
              print('Opened article scaffold: "' + articles[index].title + "\"");
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) =>  Scaffold(
                    resizeToAvoidBottomPadding: false,
                    appBar:  AppBar(
                      backgroundColor: const Color(0xFF273A48),
                      elevation: 0.0,
                      title: Container(
                        width: _width*0.90,
                        height: 30,
                        padding: const EdgeInsets.only(
                          bottom: 5,
                          top: 5,
                          left: 10,
                          right: 10,
                        ),
                        decoration:  BoxDecoration(
                          color: Colors.white,
                          borderRadius:  BorderRadius.all(
                              Radius.circular(10.0),
                          ),
                        ),
                        alignment: Alignment.center,
                        child:  AutoSizeText(
                          'Published ' +  DateFormat.yMMMd().format(DateTime.parse(articles[index].publishedAt)) + ", "+ DateFormat.jm().format(DateTime.parse(articles[index].publishedAt)),
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          minFontSize: 5,
                          maxFontSize: 20,
                          textAlign: TextAlign.center,
                          style:  TextStyle(
                            color: Colors.black,
                            fontFamily: 'Poppins',
                          ),
                        ),
                      ),
                    ),
                    body: Center(
                      child:  Scaffold(
                        resizeToAvoidBottomPadding: false,
                        body: Center(
                          child: Container(
                            decoration:  BoxDecoration(
                              gradient:  LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                colors: [
                                  const Color(0xFF273A48),
                                  Colors.blueGrey
                                ],
                              ),
                            ),
                            padding: const EdgeInsets.only(
                              top: 20,
                              left: 10,
                              right: 10,
                              bottom: 50
                            ),
                            child:  Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                  Column(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: <Widget>[
                                      FutureBuilder<Null>(future: _launched, builder: _launchStatus),
                                      AutoSizeText(
                                      articles[index].title,
                                      overflow: TextOverflow.ellipsis,
                                      textAlign: TextAlign.center,
                                      maxFontSize: 30,
                                      minFontSize: 15,
                                      maxLines: 3,
                                      style:  TextStyle(
                                        color: Colors.white,
                                        fontFamily: 'Poppins',
                                      ),
                                    ),
                                      Divider(
                                      color: Colors.transparent,
                                      height: 15.0,
                                    ),
                                    Container(
                                      decoration:  BoxDecoration(
                                        borderRadius:  BorderRadius.circular(15.0),
                                        color: Colors.transparent,
                                        boxShadow: [
                                            BoxShadow(
                                            color: Colors.black.withAlpha(70),
                                            blurRadius: 50.0,
                                          )
                                        ],
                                        image:  DecorationImage(
                                          image:  NetworkImage(articles[index].urlToImage),
                                          fit: BoxFit.fitHeight,
                                        ),
                                      ),
                                      height: 220,
                                      width: 317.5,
                                    ),
                                      Divider(
                                      color: Colors.transparent,
                                      height: 15.0,
                                    ),
                                  ],
                                ),
                                Container(
                                  padding: const EdgeInsets.only(
                                    left: 20,
                                    right: 20
                                  ),
                                  decoration:  BoxDecoration(
                                    color: Colors.transparent,
                                    borderRadius:  BorderRadius.all(
                                        Radius.circular(10.0),
                                    ),
                                  ),
                                  child:  AutoSizeText(
                                    articles[index].description,
                                    overflow: TextOverflow.ellipsis,
                                    textAlign: TextAlign.center,
                                    maxFontSize: 30,
                                    minFontSize: 10,
                                    maxLines: 10,
                                    style:  TextStyle(
                                      color: Colors.white,
                                      fontFamily: 'Poppins',
                                    ),
                                  ),
                                  width: _width*0.90,
                                  height: _height*0.20,
                                ),
                                Container(
                                  padding: const EdgeInsets.all(4.0),
                                  decoration:  BoxDecoration(
                                    color: const Color(0xFF273A48),
                                    borderRadius:  BorderRadius.all(
                                        Radius.circular(10.0),
                                    ),
                                  ),
                                  child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                        IconButton(
                                        icon:  Icon(
                                          Icons.favorite_border,
                                          color: Colors.red
                                        ),
                                        iconSize: 35.0,
                                        onPressed: () {
                                          _sTitle = articles[index].title;
                                          _sDescription = articles[index].description;
                                          _sURL = articles[index].url;
                                          _sURLtoImage = articles[index].urlToImage;
                                          Navigator.push(
                                          context,
                                          MaterialPageRoute(builder: (context) => _favoritesScreen())
                                          );
                                        }
                                      ),
                                        IconButton(
                                        icon:  Icon(
                                          Icons.mobile_screen_share,
                                          color: Colors.white,
                                        ),
                                        iconSize: 35.0,
                                        onPressed: () {
                                          Share.share(
                                            articles[index].title + "\n\nCheck out this article at:\n" + articles[index].url + "\n\nLearn more with Cryp - Tick Exchange",
                                          );
                                        }
                                      ),
                                        IconButton(
                                        icon:  Icon(Icons.launch, color: Colors.lightBlueAccent),
                                        iconSize: 32.5,
                                        onPressed: () => setState(() { _launched = _launchInWebViewOrVC(articles[index].url);}),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  )
                )
              );
            },
            child: Container(
              decoration:  BoxDecoration(
                borderRadius:  BorderRadius.circular(10.0),
                color: const Color(0xFF273A48),
                boxShadow: [
                    BoxShadow(
                    color: Colors.black.withAlpha(70),
                    offset: const Offset(5.0, 5.0),
                    blurRadius: 12.5,
                  )
                ],
                image:  DecorationImage(
                  alignment: Alignment.topCenter,
                  image:  NetworkImage(articles[index].urlToImage),
                  fit: BoxFit.cover,
                ),
              ),
              height: _height*0.35,
              width: _width*0.725,
              child:  Stack(
                children: <Widget>[
                    Align(
                    alignment: Alignment.bottomCenter,
                    child:  Stack(
                      alignment: Alignment.bottomRight,
                      children: <Widget>[
                        Container(
                          padding:  EdgeInsets.only(left: 10.0, right: 10.0),
                          decoration:  BoxDecoration(
                            color: const Color(0xFF273A48),
                            borderRadius:  BorderRadius.only(
                              bottomLeft:  Radius.circular(10.0),
                              bottomRight:  Radius.circular(10.0)
                            ),
                          ),
                          height: 60.0,
                          child:  Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                                Flexible(
                                child: Container(
                                  width: _width*0.725,
                                  child:  Text(
                                    articles[index].title,
                                    textAlign: TextAlign.center,
                                    overflow: TextOverflow.ellipsis,
                                    maxLines: 2,
                                    style:  TextStyle(
                                      color: Colors.white,
                                      fontFamily: 'Poppins',
                                      ),
                                    ),
                                ),
                              ),
                                Text(
                                'Published ' +  DateFormat.yMMMd().format(DateTime.parse(articles[index].publishedAt)) + ", "+ DateFormat.jm().format(DateTime.parse(articles[index].publishedAt)),
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                                style:  TextStyle(
                                  color: Colors.blueGrey,
                                  fontSize: 10.0,
                                  fontFamily: 'Poppins',
                              ),
                            ),
                          ],
                        )
                      ),
                      Container(
                        width: 25.0,
                        height: 20.0,
                        alignment: Alignment.center,
                        child:  Text(
                          "$index",
                          textAlign: TextAlign.center,
                          style:  TextStyle(
                            color: Colors.blueGrey,
                            fontSize: 10.0,
                            fontFamily: "Poppins"
                          ),
                        )
                      ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }).toList(),
  height: 400,
  autoPlay: true,
)

最佳答案

如果您想在 Dart 代码中以持久的方式保存数据并能够在 Android 和 iOS 上使用它，我建议您使用 sqlite 插件:

https://github.com/tekartik/sqflite

否则，如果您只需要保存一堆数据，请使用shared_preferences 插件

https://github.com/flutter/plugins/tree/master/packages/shared_preferences

这两个插件都支持Android和iOS

您正在请求大量代码 ^_^(不是吗)。

因此，首先您需要通过 HTTP 调用获取您的 json。为此使用 http flutter package :

const request = "https://newsapi.org/v2/top-headlines?sources=crypto-coins-news&apiKey=d40a757cfb2e4dd99fc511a0cbf59098";
http.Response response = await http.get(request);
debugPrint("Response: " + response.body);

将其包装在一个异步方法中:

void _jsonAndSqlite() async {
...
}

在 response 变量中，您有您的完整 JSON。

现在你需要序列化，我建议你这个 really good reading .

我为这个答案选择了手动 JSON 解码

Manual JSON decoding refers to using the built-in JSON decoder in dart:convert. It involves passing the raw JSON string to the json.decode() method, and then looking up the values you need in the Map the method returns. It has no external dependencies or particular setup process, and it’s good for a quick proof of concept.

var myBigJSONObject = json.decode(response.body);
var status = myBigJSONObject['status'];
var totalResults = myBigJSONObject['totalResults'];
var myArticles = myBigJSONObject['articles'];

debugPrint("articles: " + myArticles.toString());

既然我们有文章将尝试通过Sqflite包将它们保存在Sqlite DB上

var myFirstArticle = myArticles[0];
var author = myFirstArticle['author'];
var title = myFirstArticle['title'];

// Get a location using getDatabasesPath
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'test.db');

// Delete the database
await deleteDatabase(path);

// open the database
Database database = await openDatabase(path, version: 1,
    onCreate: (Database db, int version) async {
  // When creating the db, create the table
  await db.execute(
      'CREATE TABLE Article (id INTEGER PRIMARY KEY, author TEXT, title TEXT)');
});

// Insert some records in a transaction
await database.transaction((txn) async {
  int id1 = await txn.rawInsert(
      'INSERT INTO Article(author, title) VALUES("$author", "$title")');
  debugPrint('inserted1: $id1');
});

就是这样!享受学习和编码的乐趣。阅读我为您发布的有关 JSON 序列化的文章并尝试使用我的代码，并尝试添加一些其他最佳实践，它们可能更适合您的需求。这只是一个快速的 Playground ，嗯，可以玩。

所以我最终采用了这种方法:

[...]
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

 [...]
 void _jsonAndSqlite() async {
    const request =
        "https://newsapi.org/v2/top-headlines?sources=crypto-coins-news&apiKey=d40a757cfb2e4dd99fc511a0cbf59098";
    http.Response response = await http.get(request);
    debugPrint("Response: " + response.body);

    var myBigJSONObject = json.decode(response.body);
    var status = myBigJSONObject['status'];
    var totalResults = myBigJSONObject['totalResults'];
    var myArticles = myBigJSONObject['articles'];

    debugPrint("articles: " + myArticles.toString());

    var myFirstArticle = myArticles[0];
    var author = myFirstArticle['author'];
    var title = myFirstArticle['title'];

    // Get a location using getDatabasesPath
    var databasesPath = await getDatabasesPath();
    String path = join(databasesPath, 'test.db');

    // Delete the database
    await deleteDatabase(path);

    // open the database
    Database database = await openDatabase(path, version: 1,
        onCreate: (Database db, int version) async {
      // When creating the db, create the table
      await db.execute(
          'CREATE TABLE Article (id INTEGER PRIMARY KEY, author TEXT, title TEXT)');
    });

    // Insert some records in a transaction
    await database.transaction((txn) async {
      int id1 = await txn.rawInsert(
          'INSERT INTO Article(author, title) VALUES("$author", "$title")');
      debugPrint('inserted1: $id1');
    });
  }

关于json - Flutter - 保存用户数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53889973/

文章推荐： ruby-on-rails - 参数错误 : Factory not registered

文章推荐： ruby - 没有 Rails 的 Sidekiq 不会加载工作类

jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
python - 保存 django mongoengine 模型实例时无效的 EmbeddedDocumentField 项(保存()失败)
我正在尝试保存模型的实例，但我得到了 Invalid EmbeddedDocumentField item (1) 其中 1 是项目的 ID(我认为)。模型定义为 class Graph(Docum
iphone - 以 72 dpi 保存 UIImage(Retina 模拟器以 144 dpi 保存)
我有一个非常奇怪的问题......在我的 iPhone 应用程序中，用户可以打开相机胶卷中的图像，在我的示例中 1920 x 1080 像素 (72 dpi) 的壁纸。现在，想要将图像的宽度调整为例
Primefaces 保存/通过过滤数据表结果列表
目前，我正在使用具有排序/过滤功能的数据表成功地从我的数据库中显示图像元数据。在我的数据表下方，我使用第三方图像覆盖流( http://www.jacksasylum.eu/ContentFlow/
Javascript 保存、删除和重新加载输入值
我的脚本有问题。我想按此顺序执行以下步骤: 1. 保存输入字段中的文本。 2. 删除输入字段中的所有文本。 3. 在输入字段中重新加载之前删除的相同文本。我的脚本的问题是 ug()- 函数在我的文本
Laravel 保存/更新多对多关系
任何人都可以帮助我如何保存多对多关系吗？我有任务，用户可以有很多任务，任务可以有很多用户(多对多)，我想要实现的是，在更新表单中，管理员可以将多个用户分配给特定任务。这是通过 html 多选输入来完成
Tensorflow 保存/恢复批量归一化
我在 Tensorflow 中训练了一个具有批归一化的模型。我想保存模型并恢复它以供进一步使用。批量归一化是通过完成的 def batch_norm(input, phase): retur
唯一/保存/更新的Grails问题
我遇到了 grails 的问题。我有一个看起来像这样的域: class Book { static belongsTo = Author String toString() { tit
JavaScript - 保存、存储和更新数组
所以我正在开发一个应用程序，一旦用户连接(通过 soundcloud)，就会出现以下对象: {userid: userid, username: username, genre: genre, fol
Angular 保存/恢复组件状态
我正在开发一个具有多选项卡布局的 Angular 7 应用程序。每个选项卡都包含一个组件，该组件可以引用其他嵌套组件。当用户选择一个新的/另一个选项卡时，当前选项卡上显示的组件将被销毁(我不仅仅是隐
Java JTextPane 保存
我尝试使用 JEditorPane 进行一些简单的文本格式化，但随着知识的增长，我发现 JTextPane 更容易实现并且更强大。我的问题是如何将 JTextPane 中的格式化文本保存到文件？它应
Docker:保存 - 不产生输出
使用 Docker 相当新。我为 Oracle 11g Full 提取了一个图像。创建了一个数据库并将应用程序安装到容器中。正确配置后，我提交了生成 15GB 镜像的容器。测试了该图像的新容器，
ios - 将核心数据值传递到文本字段中以进行编辑/保存
我是使用 Xcode 和 swift 的新手，仍在学习中。我在将核心数据从实体传递到文本字段/标签时遇到问题，然后用户可以选择编辑和保存记录。我的目标是，当用户从 friendslistViewCon
java - 保存/加载具有依赖关系的对象的可靠方法？
我正在用 Java 编写 Android 游戏，我需要一种可靠的方法来快速保存和加载应用程序状态。这个问题似乎适用于大多数 OO 语言。了解我需要保存的内容:我正在使用策略模式来控制我的游戏实体。我
c++ - 保存/加载结构数组是个好主意吗？
我想知道使用 fstream 加载/保存某种结构类型的数组是否是个好主意。注意，我说的是加载/保存到二进制文件。我应该加载/保存独立变量，例如 int、float、boolean 而不是结构吗？我这么
c++ - 保存 QNetworkReply
我希望能够将 QNetworkReply 保存到 QString/QByteArray。在我看到的示例中，它们总是将流保存到另一个文件。目前我的代码看起来像这样，我从主机那里得到一个字符串，我想做的
Android 保存 Canvas
我正在创建一个绘图应用程序。我有一个带有 Canvas 的自定义 View ，它根据用户输入绘制线条: class Line { float startX, startY, stopX, stop
android - 保存 Intent
我有 3 个 Activity 第一个 Activity 调用第二个 Activity ，第二个 Activity 调用第三个 Activity 。第二个 Activity 使用第一个 Activi
ios - 保存 cookies ？
我想知道如何在 Xcode 中保存 cookie。我想使用从一个网页获取的 cookie 并使用它访问另一个网页。我使用下面的代码登录该网站，我想保存从该连接获得的 cookie，以便在我建立另一个连
ios - 保存/编辑重复日历事件的最佳方法
我有一个 SQLite 数据库存储我的所有日历事件，建模如下: TimerEvent *Attributes -date -dateForMark -reminder *Relat

IT王子

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

json - Flutter - 保存用户数据