为了更好的阅读体验,欢迎去我的个人网站阅读:https://www.jakeprim.cn/

Flutter 中除了布局还有最重要的网络及数据操作.

Flutter的model层如何实现?

class HomeModel {
  final ConfigModel config;
  final List<CommonModel> bannerList;
  final List<CommonModel> localNavList;
  final GridNavModel gridNav;
  final List<CommonModel> subNavList;
  HomeModel(
      {this.config,
      this.bannerList,
      this.localNavList,
      this.gridNav,
      this.subNavList});
  Map<String, dynamic> toJson() {
    return {
      'config': config,
      'bannerList': bannerList,
      'localNavList': localNavList,
      'gridNav': gridNav,
      'subNavList': subNavList,
    };
  }
  factory HomeModel.fromJson(Map<String, dynamic> json) {
    var localNavListJson = json['localNavList'] as List; //转换为list
    List<CommonModel> localNavList = localNavListJson
        .map((i) => CommonModel.fromJson(i))
        .toList(); //然后将list 转换为对应

    var bannerListJson = json['bannerList'] as List; //转换为list
    List<CommonModel> bannerList = bannerListJson
        .map((i) => CommonModel.fromJson(i))
        .toList(); //然后将list 转换为对应

    var subNavListJson = json['subNavList'] as List; //转换为list
    List<CommonModel> subNavList = subNavListJson
        .map((i) => CommonModel.fromJson(i))
        .toList(); //然后将list 转换为对应

    return HomeModel(
      config: ConfigModel.fromJson(json['config']),
      bannerList: bannerList,
      localNavList: localNavList,
      gridNav: GridNavModel.formJson(json['gridNav']),
      subNavList: subNavList,
    );
  }
}

如果用到了其他的model实例,需要实现fromJson

class CommonModel {
  final String icon;
  final String title;
  final String url;
  final String statusBarColor;
  final bool hideAppBar;
  CommonModel(
      {this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});
  /// 需要转换为json字符串时需要此方法
  Map<String, dynamic> toJson() {
    return {
      'icon': icon,
      'title': title,
      'url': url,
      'statusBarColor': statusBarColor,
      'hideAppBar': hideAppBar,
    };
  }
  ///获取CommonModel的实例
  factory CommonModel.fromJson(Map<String, dynamic> json) {
    return CommonModel(
        icon: json['icon'],
        title: json['title'],
        url: json['url'],
        statusBarColor: json['statusBarColor'],
        hideAppBar: json['hideAppBar']);
  }
}

Flutter 请求网络获取返回的数据
需要导入几个包

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http; //给某个包设置一个别名

异步获取网络返回的数据

import 'package:prim_fultter_app/model/home_model.dart';

const Home_URL = "http://www.devio.org/io/flutter_app/json/home_page.json";
//首页接口
class HomeDao {
  static Future<HomeModel> fetch() async {
    final response = await http.get(Home_URL);
    if (response.statusCode == 200) {
      //判断接口是否返回成功
      Utf8Decoder utf8decoder = Utf8Decoder(); //解决中文乱码的问题
      var result = json.decode(utf8decoder.convert(response.bodyBytes)); //解码
      return HomeModel.fromJson(result);
    } else {
      throw Exception('load url fail!');
    }
  }
}

获取结果的几种方式

 Future<Null> loadData() async {
    //一种方式
//    HomeDao.fetch().then((result) {
//      //转换json字符串
//      resultString = json.encode(result.config);//将model转换为json字符串
//      print("homeDao:" + resultString);
//    }).catchError((e) {
//      resultString = e.toString();
//      print("homeDao:" + resultString);
//    });

    //另一种方式
    try {
      HomeModel model = await HomeDao.fetch();
      resultString = json.encode(model);//将model转换为json字符串
      print("homeDao:" + resultString);
    } catch (e) {
      print(e.toString());
    }
    return null;
  }