Flutter 中 ListView 的使用

这个小例子使用的是豆瓣 API 中 正在上映的电影的开放接口，要实现的主要效果如下:

JSON 数据结构

Item 结构

Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左边是一个 Image,右边是一个 Column

功能实现

• material 库
• Json 解析
• 网络请求
• 加载菊花

要实现上面四个功能，我们首先需要在 .dart 文件中引入如下代码

1import 'dart:convert';
2import 'package:http/http.dart' as http;
3import 'package:flutter/material.dart';
4import 'package:flutter/cupertino.dart';

网络请求

1loadData() async {
2    String loadRUL = "https://api.douban.com/v2/movie/in_theaters";
3    http.Response response = await http.get(loadRUL);
4    var result = json.decode(response.body);
5    setState(() {
6      title = result['title'];
7      print('title: $title');
8      subjects = result['subjects'];
9    });
10  }

ListView && 加载菊花

1getBody() {
2    if (subjects.length != 0) {
3      return ListView.builder(
4          itemCount: subjects.length,
5          itemBuilder: (BuildContext context, int position) {
6            return getItem(subjects[position]);
7          });
8    } else {
9      // 加载菊花
10      return CupertinoActivityIndicator();
11    }
12  }

Item编写

1getItem(var subject) {
2//    演员列表
3    var avatars = List.generate(subject['casts'].length, (int index) =>
4        Container(
5          margin: EdgeInsets.only(left: index.toDouble() == 0.0 ? 0.0 : 16.0),
6 
7          child: CircleAvatar(
8              backgroundColor: Colors.white10,
9              backgroundImage: NetworkImage(
10                  subject['casts'][index]['avatars']['small']
11              )
12          ),
13        ),
14    );
15    var row = Container(
16      margin: EdgeInsets.all(4.0),
17      child: Row(
18        children: <Widget>[
19          ClipRRect(
20            borderRadius: BorderRadius.circular(4.0),
21            child: Image.network(
22              subject['images']['large'],
23              width: 100.0, height: 150.0,
24              fit: BoxFit.fill,
25            ),
26          ),
27          Expanded(
28              child: Container(
29                margin: EdgeInsets.only(left: 8.0),
30                height: 150.0,
31                child: Column(
32                  crossAxisAlignment: CrossAxisAlignment.start,
33                  children: <Widget>[
34//                    电影名称
35                    Text(
36                      subject['title'],
37                      style: TextStyle(
38                        fontWeight: FontWeight.bold,
39                        fontSize: 20.0,
40                      ),
41                      maxLines: 1,
42                    ),
43//                    豆瓣评分
44                    Text(
45                      '豆瓣评分：${subject['rating']['average']}',
46                      style: TextStyle(
47                          fontSize: 16.0
48                      ),
49                    ),
50//                    类型
51                    Text(
52                        "类型：${subject['genres'].join("、")}"
53                    ),
54//                    导演
55                    Text(
56                        '导演：${subject['directors'][0]['name']}'
57                    ),
58//                    演员
59                    Container(
60                      margin: EdgeInsets.only(top: 8.0),
61                      child: Row(
62                        children: <Widget>[
63                          Text('主演：'),
64                          Row(
65                            children: avatars,
66                          )
67                        ],
68                      ),
69                    )
70                  ],
71                ),
72              )
73          )
74        ],
75      ),
76    );
77    return Card(
78      child: row,
79    );
80  }

主要代码就是上述这些... 效果图，源码地址