flutter-完成一个列表（图片文字）

演示视频

上面是效果图

• 首先你需要安装好flutter（ios/android）
• 其次，你需要了解在flutter中解析复杂的JSON
• 创建一个flutter项目
• 安装http

 

 recommendList.dart

这一部分主要是定义数据结构，大家要写的话，可以根据自己的moke的数据结构来 

class ListProperty {
  int code;
  int subcode;
  String message;
  int defaultcode;
  Data data;

  ListProperty({
    this.code,
    this.subcode,
    this.message,
    this.defaultcode,
    this.data
  });

  factory ListProperty.fromJson(Map<String, dynamic> parsedJson){
    return ListProperty(
      code: parsedJson['code'],
      subcode: parsedJson['subcode'],
      message: parsedJson['message'],
      defaultcode: parsedJson['default'],
      data: Data.fromJson(parsedJson['data'])
    );
  }
}

class Data {
  int uin;
  int categoryId;
  int sortId;
  int sum;
  int sin;
  int ein;
  final List<ObjectList> list;

  Data({
    this.uin,
    this.categoryId,
    this.sortId,
    this.sum,
    this.sin,
    this.ein,
    this.list,
  });

  factory Data.fromJson(Map<String, dynamic> parsedJson) {
    var radioList = parsedJson['list'] as List;
    // print(radioList.runtimeType); //returns List<dynamic>
    List<ObjectList> list = radioList.map((i) => ObjectList.fromJson(i)).toList();


    return new Data(
      uin: parsedJson['uin'],
      categoryId: parsedJson['categoryId'],
      sortId: parsedJson['sortId'],
      sum: parsedJson['sum'],
      sin: parsedJson['sin'],
      ein: parsedJson['ein'],
      list: list,
    );
  }

}

class ObjectList {
  final String dissid;
  final String createtime;
  final String committime;
  final String dissname;
  final String imgurl;
  final String introduction;
  final int listennum;
  final int score;
  final int version;
  Creator creator;


  ObjectList({
    this.dissid,
    this.createtime,
    this.committime,
    this.dissname,
    this.imgurl,
    this.introduction,
    this.listennum,
    this.score,
    this.version,
    this.creator
  });

  factory ObjectList.fromJson(Map<String, dynamic> parsedJson){
    return ObjectList(
      dissid:parsedJson['dissid'],
      createtime:parsedJson['createtime'],
      committime:parsedJson['commit_time'],
      dissname:parsedJson['dissname'],
      imgurl:parsedJson['imgurl'],
      introduction:parsedJson['introduction'],
      listennum:parsedJson['listennum'],
      score:parsedJson['score'],
      version:parsedJson['version'],
      creator: Creator.fromJson(parsedJson['creator']),
    );
  }
}


class Creator {
  int type;
  int qq;
  String encryptuin;
  String name;
  int isVip;
  String avatarUrl;
  int followflag;

  Creator({
    this.type,
    this.qq,
    this.encryptuin,
    this.name,
    this.isVip,
    this.avatarUrl,
    this.followflag
  });

  factory Creator.fromJson(Map<String, dynamic> parsedJson){
    return Creator(
      type: parsedJson['type'],
      qq: parsedJson['qq'],
      encryptuin: parsedJson['encrypt_uin'],
      name: parsedJson['name'],
      isVip: parsedJson['isVip'],
      avatarUrl: parsedJson['avatarUrl'],
      followflag: parsedJson['followflag']
    );
  }
}

main.dart

 

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import '../../data/slider.dart';
import '../../data/recommendList.dart';

// 有状态组件
class Recommend extends StatefulWidget {
   final TextStyle _notInheritBigFont =
      new TextStyle(inherit: false, fontSize: 20.0, color: Colors.yellow);
      
  _RecommendState createState() => new _RecommendState();
}


class _RecommendState extends State<Recommend> {
  // List<Model> data = [];
  // 初始化空数据
  List _data = [];

  void initState() {
    super.initState();
    _loadDataFromNetwork();
  }


  _hotKeyUrl() {
    return 'http://ustbhuangyi.com/music/api/getDiscList?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=json&platform=yqq&hostUin=0&sin=0&ein=29&sortId=5&needNewCode=0&categoryId=10000000&rnd=0.23358193201300614';
  }
 
  
  _loadDataFromNetwork() async {
    http.Response _response = await http.get(_hotKeyUrl());
    final _jsonRes = json.decode(_response.body);
    ListProperty proList = new ListProperty.fromJson(_jsonRes);
    proList.data.list.forEach((item) {
      _data.add(item);
    });
    if (this.mounted){
      setState(() {
        _data = _data;
      });
    }
  }
  // 返回类型为部件的数组
   List<Widget> listMyWidgets() {
    List<Widget> recoList = new List();
    if (_data.length > 0) {
      _data.forEach((item){
        var i = getItem(item);
        recoList.add(i);
      });
    }
    return recoList;
  }


  // 列表项的组件Card
  getItem(var item) {
    var row = new GestureDetector(
      onTap: (){
        print('click')
      },
      child: Container(
        decoration: new BoxDecoration(
          color: Colors.black,
          boxShadow: [
            BoxShadow(
              color: Colors.grey[850],
              blurRadius: 5.0, // has the effect of softening the shadow
              offset: Offset(
                0.0, // horizontal, move right 2
                3.0, // vertical, move down 2
              ),
            )
          ],
        ),
        padding: const EdgeInsets.all(4.0),
        // 内容，横向排列，children为数组
        child: Row(
          children: <Widget>[
              Image.network(
                item.imgurl,
                width: 100.0,
                height: 100.0,
                fit: BoxFit.fill
              ),
              // 纵向排列，children为数组
              Container(
                padding: const EdgeInsets.fromLTRB(20.0, 5.0,0.0,10.0),
                height: 100.0,
                width: 250.0,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    new Text(
                      item.creator.name,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    new Text(
                      item.dissname,
                      overflow: TextOverflow.ellipsis,
                      softWrap: false,
                      style: TextStyle(
                        color: Colors.grey
                      ),
                    )
                  ],
                ),
              ),
          ],
        ),
      ),
    );
    return Card(child: row,);
  }



  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return new MaterialApp(
      home: new Scaffold(
         body: new Container(
           decoration: new BoxDecoration(
             color: Colors.black
           ),
            // 纵向排列
          child: Column(
            children: <Widget>[
                // 标题
              new Container(
                width: width,
                decoration: new BoxDecoration(
                  color: Colors.black,
                ),
                padding: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 10.0),
                child: new Column(
                  children: <Widget>[
                    new Text('热门歌单推荐',  style: widget._notInheritBigFont),
                  ],
                ),
              ),
                // 可扩展组件
              new Expanded(
                flex: 1,
                // 可滚动
                child: new SingleChildScrollView(
                  child: new Container(
                       // 样式
                      decoration: new BoxDecoration(
                        color: Colors.black
                      ),
                      child:new Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisSize: MainAxisSize.min,
                        children: listMyWidgets()
                      ),
                    ),
                ),
              )
            ],
          )
        )
      )
    );
  }
}