Flutter进阶—网络与本地异步加载资源

119 篇文章 9 订阅
82 篇文章 1416 订阅

通过网络加载JSON文件的实例

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void _networkLoading() {
  // 将给定标头的HTTP GET请求发送到给定的URL,并注册回调,参数为HTTP响应
  http.get('https://domokit.github.io/examples/stocks/data/stock_data_2.json').then((http.Response response) {
    // 响应的主体作为字符串返回
    String netdata = response.body;
    // JsonDecoder类解析JSON字符串并构建相应的对象
    JsonDecoder decoder = new JsonDecoder();
    // 将给定的JSON字符串输入转换为其对应的对象
    List<List<String>> json = decoder.convert(netdata);
    // 输出给定的JSON数据
    print(json[0][1]);
  });
}

这里写图片描述

通过异步加载本地Json资源,需要先在pubspec.yaml文件添加资源文件,然后再通过异步加载资源文件,以下为实例

name: menus_demo
description: A new flutter project.
dependencies:
  flutter:
    sdk: flutter
flutter:
  uses-material-design: true
  assets:
    - assets/config.json
import 'dart:convert';
import 'dart:async' show Future;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}
void _loadJson() {
  loadAsset().then((value){
    JsonDecoder decoder = new JsonDecoder();
    List<List<String>> json = decoder.convert(value);
    print('姓名:'+json[0][0]+',年龄:'+json[0][1]);
  });
}

这里写图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
要实现异步请求网络数据并显示加载中demo,我们可以使用Flutter框架的http插件和状态管理来完成。 首先,我们需要在pubspec.yaml文件中添加http插件的依赖。 ``` dependencies: flutter: sdk: flutter http: ^0.13.0 ``` 然后,在需要显示加载中的页面中,创建一个有状态的组件。在该组件的状态中定义一个布尔值isLoading来表示数据是否正在加载中。 ```dart import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'dart:convert'; class LoadingDemo extends StatefulWidget { @override _LoadingDemoState createState() => _LoadingDemoState(); } class _LoadingDemoState extends State<LoadingDemo> { bool isLoading = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Loading Demo'), ), body: Center( child: isLoading ? CircularProgressIndicator() : RaisedButton( child: Text('加载数据'), onPressed: () { fetchData(); }, ), ), ); } void fetchData() async { setState(() { isLoading = true; }); var response = await http.get('https://api.example.com/data'); if (response.statusCode == 200) { // 请求成功 var data = json.decode(response.body); // 处理数据 } else { // 请求失败 } setState(() { isLoading = false; }); } } ``` 在上述代码中,isLoading初始值为false,当点击加载数据按钮时,调用fetchData函数来请求数据。在请求数据时,将isLoading设置为true来显示加载动画,请求完成后再将其设置为false。 为了能够在Flutter中显示加载动画,我们使用了CircularProgressIndicator小部件,它会在屏幕中间显示一个圆形的进度指示器。 通过上述代码,我们可以实现一个简单的加载中demo,用于异步请求网络数据并显示加载状态。当点击加载数据按钮时,会显示加载动画,请求完成后隐藏加载动画。只需简单几步即可实现这样的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

何小有

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值