您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-25(http get请求数据、post提交数据、以及渲染动态数据)

2020-04-30【Flutter】1822人已围观

简介## 一、Flutter `JSON` 字符串和 `Map` 类型的转换 ``` import 'dart:convert' var mapData={"name":"张三","age":"20"}; var strData='{"name":"张三","age":"20"}'; print(json.encode(mapData)); //Map 转换成 Json 字符串 print(json.decode(strData)); //Json 字符串转化成 Map 类型 ```

## 一、Flutter `JSON`  字符串和 `Map`  类型的转换

```
import 'dart:convert'
var mapData={"name":"张三","age":"20"};
var strData='{"name":"张三","age":"20"}';
print(json.encode(mapData)); //Map 转换成 Json 字符串
print(json.decode(strData)); //Json 字符串转化成 Map 类型
```

## 二、 使用 `http` 库进行网络请求

[官方文档：https://pub.dev/packages/http](https://pub.dev/packages/http)

> get 请求

```
_getDate() async{
  var apiUrl = "http://a.itying.com/api/productlist";
  var response = await http.get(apiUrl);
  if(response.statusCode == 200){
    setState(() {
      _list = json.decode(response.body)["result"];
    });
  } else {
    _toast();// 弹出层提示错误
    print('Request failed with status: ${response.statusCode}.');
  }
}
```

> post 请求

```
import 'package:http/http.dart' as http;

## 三、渲染动态数据

> 方法一

```
ListView(
  children: this._list.map((value){
    return ListTile(
      title: Text(value['title']+"1"),
    );
  }).toList(),
)
```

> 方法二

```
ListView.builder(
    itemCount: this._list.length,
    itemBuilder: (context,index){
    return ListTile(
    title:Text(this._list[index]["title"]),
    );
)
```

> 文件代码

```
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:fluttertoast/fluttertoast.dart';

class HttpDemoPage extends StatefulWidget {
  HttpDemoPage({Key key}) : super(key: key);
  _HttpDemoPageState createState() => _HttpDemoPageState();
}

class _HttpDemoPageState extends State<HttpDemoPage> {
  List _list=[];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getDate();
  }
  _getDate() async{
    var apiUrl = "http://a.itying.com/api/productlist";
    var response = await http.get(apiUrl);
    if(response.statusCode == 200){
      setState(() {
        _list = json.decode(response.body)["result"];
      });
    } else {
      _toast();// 弹出层提示错误
    }
  }
  _toast(){
    Fluttertoast.showToast(
        msg: "获取数据失败",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM,
        timeInSecForIos: 1,
        backgroundColor: Colors.black12,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Http Demo"),
      ),
      body: _list.length > 0 ? ListView.builder(itemCount: this._list.length,itemBuilder: (context,index){
        return ListTile(
          title:Text(this._list[index]["title"]),
        );
      }): Text("数据请求中..."),
    );
  }
}
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-24(自定义 Dialog、定时器)

下一篇：flutter-26(Dio 求库实现网络请求 get post put delete 以及动态渲染数据)