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]);
就避免了多余的创建。