Flutter- 在 Flutter 中如何获取本地的 json 文件并解码

文章目录
方式一 : rootBundle.loadString
方式二 : DefaultAssetBundle.of(context).loadString
两种方式的区别
在 Flutter 中获取本地的 json 文件,博文中提供两种方式。这里先在路径 "assets/config/anime.json" 下新建本地的 json 文件,如下图所示
在这里插入图片描述

然后在 pubspec.yaml 配置文件中添加如下内容 在这里插入图片描述

接下来是如何获取本地 json 文件。

方式一 : rootBundle.loadString

可以使用 rootBundle.loadString 的方式获取本地 json 文件。如下代码所示

 List _animes = []; // 动漫列表

  @override
  void initState() {
    rootBundle.loadString("assets/config/anime.json").then((value) {
      var map = json.decode(value); // 解码
      _animes = map["animes"]; // 列表赋值
    });
    super.initState();
  }

然后直接遍历数组即可,如下代码所示(已省去无关代码)

 ..._animes.map(
   (e) => Row(
     children: <Widget>[Text("${e['id']}"), Text(e['name'])],
   ),
 )

效果图如下所示

方式二 : DefaultAssetBundle.of(context).loadString

使用 DefaultAssetBundle.of(context).loadString 的方式获取本地 json 文件。

最终的效果和方式一是一样的,直接上代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("加载本地json文件")),
      body: FutureBuilder(
        future: DefaultAssetBundle.of(context).loadString("assets/config/anime.json"),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          var map = json.decode(snapshot.data.toString());
          _animes = map["animes"]; // 列表赋值
          // 因为获取 json 文件是异步的,如果还没有获取到数据,则显示 loading 组件
          if (snapshot.connectionState != ConnectionState.done) {
            return Center(child: CircularProgressIndicator());
          }
          return Card(
            child: Column(
              children: _animes
                  .map((e) => Row(children: <Widget>[Text("${e['id']}"), Text(e['name'])]))
                  .toList(),
            ),
          );
        },
      ),
    );
  }

两种方式的区别
关于这两种加载本地 json 文件的区别,以下两条是我找到的相关资料,仅供参考

通过 rootBundle 对象加载:每个 Flutter 应用程序都有一个 rootBundle 对象,通过它可以轻松访问主资源包,直接使用 package:flutter/services.dart 中全局静态的 rootBundle 对象来加载 asset 即可。
通过 DefaultAssetBundle 加载:建议使用 DefaultAssetBundle 来获取当前 BuildContext 的 AssetBundle。 这种方法不是使用应用程序构建的默认 asset bundle,而是使父级 widget 在运行时动态替换的不同的 AssetBundle,这对于本地化或测试场景很有用。
关于如何在 Flutter 中获取本地的 json 文件,便介绍到这里。


原文链接:https://blog.csdn.net/qq_42351033/article/details/118669642

猜你喜欢

转载自blog.csdn.net/qq_27909209/article/details/130410477