Flutter 中 ListView 的使用

這個小例子使用的是豆瓣 API 中 正在上映的電影的開放介面，要實現的主要效果如下:

JSON 資料結構

Item 結構

Item 的結構是一個 Card 包含著一個 Row 然後這個 Row 裡面左邊是一個 Image,右邊是一個 Column

功能實現

• material 庫
• Json 解析
• 網路請求
• 載入菊花

要實現上面四個功能，我們首先需要在 .dart 檔案中引入如下程式碼

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
複製程式碼

網路請求

loadData() async {
    String loadRUL = "https://api.douban.com/v2/movie/in_theaters";
    http.Response response = await http.get(loadRUL);
    var result = json.decode(response.body);
    setState(() {
      title = result['title'];
      print('title: $title');
      subjects = result['subjects'];
    });
  }
複製程式碼

ListView && 載入菊花

getBody() {
    if (subjects.length != 0) {
      return ListView.builder(
          itemCount: subjects.length,
          itemBuilder: (BuildContext context, int position) {
            return getItem(subjects[position]);
          });
    } else {
      // 載入菊花
      return CupertinoActivityIndicator();
    }
  }
複製程式碼

Item編寫

 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 Card(
      child: row,
    );
  }
複製程式碼

主要程式碼就是上述這些... 效果圖，原始碼地址