Flutter ListView 的网络请求使用示例 2

采用Dart 来编写真的很可怕,因为这种语言完全不熟悉,不断的写下去,轻轻松松就可以过百行代码。

我觉得至少把这个代码拆分一下比较好。

很多demo级别的例子都不会把代码拆分,那我就试试拆分看看吧。

上一篇中的完整代码一共有150多行代码。

其中最多代码的部分就是关于 ListView的 Item的代码,那么就试试把他独立出来吧。

创建一个名为 DoubanTheatersItem.dart 的文件。

代码如下:

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

class DoubanTheatersItem {
  getItem(var subject) {
    //演员列表
    var avatars = List.generate(subject['casts'].length, (int index) => Container(
      margin: EdgeInsets.only(left: index.toDouble() == 0.0 ? 0.0 : 16.0),
      child: CircleAvatar(
        backgroundColor: Colors.white10,
        backgroundImage: NetworkImage(
            subject['casts'][index]['avatars']['small']
        ),
      ),
    ));

    var row = Container(
      margin: EdgeInsets.all(4.0),
      child: Row(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(4.0),
            child: Image.network(
              subject['images']['large'],
              width: 100.0, height: 150.0,
              fit: BoxFit.fill,
            ),
          ),
          Expanded(child: Container(
            margin: EdgeInsets.only(left: 8.0),
            height: 150.0,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                //电影名称
                Text(
                  subject['title'],
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                  ),
                  maxLines: 1,
                ),
                //评分
                Text(
                  "豆瓣评分: ${subject['rating']['average']}",
                  style: TextStyle(
                      fontSize: 16.0
                  ),
                ),
                //类型
                Text(
                    "类型: ${subject['genres'].join('、')}"
                ),
                //导演
                Text(
                    "导演: ${subject['directors'][0]['name']}"
                ),
                //演员
                Container(
                  margin: EdgeInsets.only(top: 8.0),
                  child: Row(
                    children: <Widget>[
                      Text('主演:'),
                      Row(
                        children: avatars,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )),
        ],
      ),
    );
    return row;
  }
}

这里已经有79行代码了。。。

然后回到我们的主文件 DoubanTheaters.dart。

引入 DoubanTheatersItem.dart:

import 'DoubanTheatersItem.dart';

然后把 _MyHomeAppState 类中的 getItem() 方法删除。

getBody() 方法中的

return getItem(subjects[position]);

改为:

return DoubanTheatersItem().getItem(subjects[position]);

后面我想了一下,DoubanTheatersItem.dart 中的 getItem() 方法,可以改成这样:

static getItem(var subject) {}

然后调用的时候就是:

return DoubanTheatersItem.getItem(subjects[position]);

就避免了多余的创建。