flutter中的网络操作过程以及注意事项

最新推荐文章于 2024-09-05 21:59:43 发布

zhakesipailuo

最新推荐文章于 2024-09-05 21:59:43 发布

阅读量484

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/zhakesipailuo/article/details/90210235

版权

flutter 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

flutter中可以通过第三方插件快速完成与服务端数据的交互。
以下实例讲解http库中的get请求。
1 在pubspec.yaml中将http引入；
在这里插入图片描述
2 引入对应的包文件；

3 根据具体的json文件创建一个各个数据model类，用于将网络端返回的数据分成不同的模型，方便进一步使用；例如：CommonModel类表示各个相同json字段的数据模型，homemodel表示最大的json数据模型。

class CommonModel {
  String userId;
  String id;
  String title;
  String body;
  String versionName;
  String next;
  CommonModel({this.userId, this.next,this.id, this.title, this.body,this.versionName});
    //创建工厂类  将json数据传入 返回一个commonmodel类对象  用于提取json中的对应参数
  factory CommonModel.fromJson(Map<String, dynamic> json) {
    return CommonModel(
       // versionName:json['versionName'],
        title:json["title"]);
  }
}

4 发起网络请求；将返回的数据已创建好的数据模型返回。
注意：在有中文存在的json字段中，需要通过utf8decoder类将其转换之后在将response的string decode成json类型的数据。

 class HomeDao {
  static Future<HomeModel> fetch() async {
    //获取到url地址对应的String总数据
    final response = await http.get(HOME_URL);
    if (response.statusCode == 200) {
      //解决json解析中的乱码问题
      Utf8Decoder utf8decoder = Utf8Decoder(); // fix 中文乱码
       //将string类型数据 转换为json类型的数据
      var result = json.decode(utf8decoder.convert(response.bodyBytes));
      return HomeModel.fromJson(result);
    } else {
      throw Exception('Failed to load home_page.json');
    }
  }
}

5 自定义数据展示的widget。

/**
 * localnav 圆形布局部分
 * 1 定义list接收这部分的网络数据总集
 * 2 通过构造函数将localnavlist传入类属性
 * 3 将传入的数据通过item方法和每个布局关联  并将总的item集合items放入布局的childen中
 */
class LocalNav extends StatelessWidget {
  final List<CommonModel> localnavList;

  const LocalNav({Key key, @required this.localnavList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 64,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(
          Radius.circular(6),
        ),
      ),
      child: Padding( //每一个item有内边距 所以用padding包裹
        padding: EdgeInsets.all(7),
        child: _items(context),
      ),
    );
  }

  //items的总的集合
 _items(BuildContext context) {
  
  if(localnavList==null) return null;
  //定义一个listitems的集合
  List<Widget> items = [];
  localnavList.forEach((model){
    items.add(_item(context, model));
  });
  //返回一个row的布局widget  将items传入
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: items,
  );
}
}
//每一个item的布局  因为有点击事件 需要有guesture包裹
Widget _item(BuildContext context, CommonModel model) {
  return GestureDetector(
    child: Container(
      height: 62,
      child: Column(
        children: <Widget>[
          Image.network(model.icon, height: 32, width: 32),
          Text(
            model.title,
            style: TextStyle(fontSize: 12),
          )
        ],
      ),
    ),
  );
}

总结：网络操作总的思路为：
1 根据具体的json数据格式创建出数据模型；
2 通过DAO建立网络连接，返回的数据类型转换为：String（response data）->Json（用于转化为指定类型数据做准备（json为map类型的数据））->指定类型的数据（创建的不同数据模型）
3 自定义展示widget，将网络数据添加到展示控件。