flutter-仿京东商城02

一、图片轮播的使用

https://pub.dev/packages/flutter_swiper

  //轮播图
  Widget _swiperWidget() {
    return Container(
        child: AspectRatio(
      aspectRatio: 2 / 1,
      child: new Swiper(
        itemBuilder: (BuildContext context, int index) {
          String pic = this._bannerList[index].pic;
          pic = Config.baseUrl + pic.replaceAll("\\", "/");
          return new Image.network(
            "${pic}",
            fit: BoxFit.fill,
          );
        },
        itemCount: this._bannerList.length,
        pagination: new SwiperPagination(),
        control: new SwiperControl(),
        autoplay: true,
      ),
    ));
  }

二、屏幕适配

import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScreenAdaper {
  static init(context, {Size designSize}) {
    return ScreenUtil.init(context, designSize: Size(750, 1334));
  }

  static width(double value) {
    return ScreenUtil().setWidth(value);
  }

  static height(double value) {
    return ScreenUtil().setHeight(value);
  }

  static screenWidth() {
    return ScreenUtil().screenWidth;
  }

  static screenHeight() {
    return ScreenUtil().screenHeight;
  }
}

三、数据请求

class _HomePageState extends State<HomePage> {
  var _bannerList = List<BannerListModel>();
  var _goodsList = List<GoodsListModel>();

  @override
  void initState() {
    super.initState();
    _getBannerData();
    _getHotGoodsData();
  }

  _getBannerData() async {
    var api = "${Config.baseUrl}api/focus";
    var result = await Dio().get(api);
    var list = BannerModel.fromJson(result.data);
    // print(result);
    setState(() {
      this._bannerList = list.result;
    });
  }

四、JSON转模型

工具 jsontoDart下载 https://gitee.com/zmtzawqlp/JsonToDart/releases
使用

image.png
左边格式化右边可以修改字段名
生成后修改一下模型

import 'dart:convert' show json;

T asT<T>(dynamic value) {
  if (value is T) {
    return value;
  }
  return null;
}

class GoodsModel {
  GoodsModel({
    this.result,
  });

  factory GoodsModel.fromJson(Map<String, dynamic> jsonRes) {
    if (jsonRes == null) {
      return null;
    }
    final List<GoodsListModel> result =
        jsonRes['result'] is List ? <GoodsListModel>[] : null;
    if (result != null) {
      for (final dynamic item in jsonRes['result']) {
        if (item != null) {
          result.add(GoodsListModel.fromJson(asT<Map<String, dynamic>>(item)));
        }
      }
    }

    return GoodsModel(
      result: result,
    );
  }

  List<GoodsListModel> result;

  Map<String, dynamic> toJson() => <String, dynamic>{
        'result': result,
      };

  @override
  String toString() {
    return json.encode(this);
  }
}

class GoodsListModel {
  GoodsListModel({
    this.id,
    this.title,
    this.cid,
    this.price,
    this.old_price,
    this.pic,
    this.s_pic,
  });

  factory GoodsListModel.fromJson(Map<String, dynamic> jsonRes) =>
      jsonRes == null
          ? null
          : GoodsListModel(
              id: asT<String>(jsonRes['_id']),
              title: asT<String>(jsonRes['title']),
              cid: asT<String>(jsonRes['cid']),
              price: asT<int>(jsonRes['price']),
              old_price: asT<String>(jsonRes['old_price']),
              pic: asT<String>(jsonRes['pic']),
              s_pic: asT<String>(jsonRes['s_pic']),
            );

  String id;
  String title;
  String cid;
  int price;
  String old_price;
  String pic;
  String s_pic;

  Map<String, dynamic> toJson() => <String, dynamic>{
        '_id': id,
        'title': title,
        'cid': cid,
        'price': price,
        'old_price': old_price,
        'pic': pic,
        's_pic': s_pic,
      };

  @override
  String toString() {
    return json.encode(this);
  }
}

注意点

image.png

ListView嵌套ListView或者轮播图的时候需要加一层Container才能用，否则报错