Flutter中ListView 的使用示例

2019-12-12 00:40:21

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

這個(gè)小例子使用的是豆瓣 API 中 正在上映的電影 的開放接口，要實(shí)現(xiàn)的主要效果如下:

JSON 數(shù)據(jù)結(jié)構(gòu)

Item 結(jié)構(gòu)

Item 的結(jié)構(gòu)是一個(gè) Card 包含著一個(gè) Row 然后這個(gè) Row 里面左邊是一個(gè) Image ,右邊是一個(gè) Column

功能實(shí)現(xiàn)

material 庫
Json 解析
網(wǎng)絡(luò)請求
加載菊花

要實(shí)現(xiàn)上面四個(gè)功能，我們首先需要在 .dart 文件中引入如下代碼

import 'dart:convert';import 'package:http/http.dart' as http;import 'package:flutter/material.dart';import 'package:flutter/cupertino.dart';

網(wǎng)絡(luò)請求

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("、")}"     ),//     導(dǎo)演     Text(      '導(dǎo)演：${subject['directors'][0]['name']}'     ),//     演員     Container(      margin: EdgeInsets.only(top: 8.0),      child: Row(      children: <Widget>[       Text('主演：'),       Row(       children: avatars,       )      ],      ),     )     ],    ),    )   )  ],  ), ); return Card(  child: row, ); }

主要代碼就是上述這些... 效果圖，源碼地址