Flutter - ListView2 - 复杂样式 - wei

demo 地址: https://github.com/iotjin/jh_flutter_demo

json_to_dart -在线生成model代码
Json在线校验

Flutter JSON解析与复杂模型转换技巧
json转实体类（json_to_dart和插件）
Flutter 自动化Json转Model的实现
Flutter中Json解析和模型转换
Flutter 之 ListView
Flutter滚动型容器组件 - ListView篇

效果图

ListViewTest_CustomVC.png

ListViewTest_CustomVC 代码 (for循环造假数据)

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/ListViewTest_CustomCell.dart';
import 'dart:convert';

var dataArr;
var dataJson;

List getData(){

  dataArr = new List();
  for(int i = 0; i < 50; i++){
    var map = new Map();
    map["title"] = "title${i}";
    map["place"] = "place${i}";
    map["state"] = "流转中${i}";
    map["content"] = "这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容";
    map["phone"] = "${i}${i}${i}xxxxxxx";
    map["imageUrl"] = "https://gitee.com/iotjh/Picture/raw/master/lufei.png";
    dataArr.add(map);
  }


  dataJson = json.encode(dataArr); //转json 字符串
//  print("转json 字符串:"+dataJson);
  dataArr = json.decode(dataJson);
//  dataArr.forEach((v) {
//    print(v);
//  });

  return dataArr;
}


class ListViewTest_CustomVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
          title:Text('ListViewTest_CustomVC')
      ),
      body:ContentBody(),
    );
  }
}

class ContentBody extends StatelessWidget {

  ContentBody({ Key key }) : super(key: key){
    getData();
  }

  @override
  Widget build(BuildContext context) {

    print(dataArr.length);
    if(dataArr.length==0){
      return Container(
      alignment: Alignment.topCenter,
      padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
      //    alignment: Alignment.center,
      child:  Text("暂无数据",textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0)),
    );

    }else{

      return ListView.separated(
        itemCount: dataArr.length,
        itemBuilder:(context, index) {
          /*先将字符串转成json*/
          Map<String, dynamic> json = Map<String, dynamic>.from(dataArr[index]);
//        print(json);
          /*将Json转成实体类*/
          CustomViewModel model = CustomViewModel.fromJson(json);
          print("title"+ model.title);
          return ListViewTest_CustomCell(data: model);
        },

        separatorBuilder: (context, index) {
          return Divider(
            height: .5,
            indent: 15,
            endIndent: 15,
//            color: Color(0xFFDDDDDD),
            color: Colors.purple,
          );
        },
      );



    }



  }

}

ListViewTest_CustomCell 代码 weiget和model

import 'package:flutter/material.dart';

class CustomViewModel {
  String title;
  String place;
  String state;
  String phone;
  String content;
  String imageUrl;

  CustomViewModel({this.title,this.place,this.state, this.phone, this.content, this.imageUrl});

  CustomViewModel.fromJson(Map<String, dynamic> json) {
  title = json['title'];
  place = json['place'];
  state = json['state'];
  phone = json['phone'];
  content = json['content'];
  imageUrl = json['imageUrl'];
  }

  Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['title'] = this.title;
  data['place'] = this.place;
  data['state'] = this.state;
  data['phone'] = this.phone;
  data['content'] = this.content;
  data['imageUrl'] = this.imageUrl;
  return data;
  }
  }


class ListViewTest_CustomCell extends StatelessWidget {

  const ListViewTest_CustomCell({
    Key key,
   this.data,
   this.onTap,
   }) : super(key: key);

  final CustomViewModel data;
  final GestureTapCallback onTap;

  @override
  Widget build(BuildContext context) {
    var spaceHeight = 10.0;
    return  GestureDetector(
       onTap: onTap,
       child:

      Container(
//      height: 100,
        padding: EdgeInsets.all(15),
        color: Colors.yellow,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: spaceHeight),
            Row(
//        mainAxisAlignment: MainAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text("${this.data.place}",style: TextStyle(fontSize: 18.0,backgroundColor: Colors.blue)),
//            Text("${this.data.state}",style: TextStyle(fontSize: 18.0,backgroundColor: Colors.blue)),
                Row(
                  children: <Widget>[
                    Text("${this.data.state}",style: TextStyle(fontSize: 18.0,backgroundColor: Colors.blue)),
                    Padding(padding: EdgeInsets.fromLTRB(10, 0, 0, 0),),
                    Image.network("${this.data.imageUrl}",width: 30,height: 30),
                  ],
                )

              ],
            ),
            SizedBox(height: spaceHeight),
            Text("${this.data.phone}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0)),
            SizedBox(height: spaceHeight),
            Text(
                "${this.data.content}",
                textAlign: TextAlign.left,
                style: TextStyle(
                    fontSize: 18.0,backgroundColor: Colors.blue
                )
            ),
          ],
        )
    ),
  );
  }
}