flutter页面初始化加载http网络请求数据

最新推荐文章于 2024-04-05 06:55:13 发布

高玉阳

最新推荐文章于 2024-04-05 06:55:13 发布

阅读量4.2k

点赞数 3

分类专栏：实习日记文章标签： json flutter http

本文链接：https://blog.csdn.net/HelloYoungr/article/details/118390394

版权

本文介绍了在Flutter中如何在页面初始化时加载HTTP网络请求的数据，包括导入依赖、JSON转实体类、业务逻辑、UI编写、请求响应方法的实现以及调用请求并渲染UI的详细步骤。使用http包进行网络请求，并通过json转换为模型对象，然后在UI中动态展示数据。

摘要由CSDN通过智能技术生成

1、导入依赖

导入http包的依赖
这里的依赖版本可以参考以下地址
参考网址：packages-http

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.2

2、json转实体类

我们要通过网络请求来获取响应到的json数据，通常情况下要将响应到的数据封装成一个 model 对象，前端通过获得这个 model 来获取到所需要的数据。
json转换为实体类，我们可以使用自动生成工具，日常开发中也是这样操作的，因为都是固定格式的代码，使用自动工具可以极大简化开发流程。
关于具体的json转换为实体类，可以参考这篇文章 flutter自动转换json为实体类

之后我们会得到两个dart文件，此处的文件以个人生成为准，我生成的文件如下，文件结构可参考以上链接
SellBean.dart
SellBean.g.dart

3、业务逻辑

整体业务逻辑如下
发起请求，收到响应，封装数据，获得数据，展示数据
这是一个动态展示的过程，我们可以用两种方式实现：
1.使用StatefulWidget
2.使用StatelessWidget + 状态管理
这里我们使用第一种简单的方式，日常工作中多使用第二种方式

4、编写 UI

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:secondapp/dao/SellBean.dart';

void main() {
   
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(
          centerTitle: true,
          backgroundColor: Color(0xFFFFFFFF),
          title: new Text(
            '预售专场',
            style: TextStyle(color: Colors.black, fontSize: 20.0),
          ),
        ),
        body: Center(
          //child: listView,
          child: new SellWidget(),
        ),
      ),
    );
  }
}

class SellWidget extends StatefulWidget {
   
  const SellWidget({
   
    Key key,
  });
  @override
  _SellWidgetState createState() => new _SellWidgetState();
}

class _SellWidgetState extends State<SellWidget> {
   

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      body: Center(
        child: new Test(
        "Hello World"),
    );
  }

这套 UI 中我们定义了 SellWidget 这个 Widget，以实现动态处理，其中省略了大部分的控件代码，具体的项目代码在文章最后给出

5、请求响应方法

  static List<BikeModel> resBikeModels;
  
  Future<void> getdata() async {
   
    Map mapjson = {
   
      "version": "2.6.0",
      "userGuid": "3**************************49",
      "token": "91******************************d5",
      "clientId": "a7****************************07",
      "tabCityCode": "0517",
      "cityGuid": null,
      "action": "rent.merchant.fat.*****",
      "shopId": "30543"