这个小例子使用的是豆瓣 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 != ) {
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: ,
),
// 豆瓣评分
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,
);
}

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

Flutter 中 ListView 的使用的更多相关文章

  1. flutter中ListView的详细讲解

    1.ListView的简单介绍 ListView是最常用的可以滚动组件之一, 它可以沿一个方向进行线性排列所有的子组件. 下面是ListView的属性值介绍: scrollDirection:列表的滚 ...

  2. 从零学习Fluter(四):Flutter中ListView组件系列详展

    今天继续研究了一些Flutter,主要时关于ListVIew那一块的东西,有 SingleChildScrollViewListViewGridViewCustomScrollView 感觉Flutt ...

  3. Flutter: 图解 ListView 的多种绑定方式

       小菜昨天刚学习了一下底部状态栏 BottomNavigationBar 的基本使用方法,今天学习一下 ListView 的基本用法.       小菜觉得 Flutter 中 ListView ...

  4. mvp 在 flutter 中的应用

    在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...

  5. Flutter中用ListView嵌套GridView报错异常

    flutter中的ListView组件和GridView组件都是常用的布局组件,有时候ListView中需要嵌套GridView来使用,例如下图: 这种情况就需要在ListView里面再嵌套一个Gri ...

  6. 在Flutter中构建布局

    这是在Flutter中构建布局的指南.首先,您将构建以下屏幕截图的布局.然后回过头, 本指南将解释Flutter的布局方法,并说明如何在屏幕上放置一个widget.在讨论如何水平和垂直放置widget ...

  7. flutter中的生命周期函数

    前言:生命周期是一个组件加载到卸载的整个周期,熟悉生命周期可以让我们在合适的时机做该做的事情,flutter中的State生命周期和android以及React Native的生命周期类似. 先看一张 ...

  8. Flutter 中的基本路由

    Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...

  9. flutter中的列表组件

    列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 ...

随机推荐

  1. django遇到的坑

    博主新手,今天第一次用django,遇到了很多坑和大家分享一下啊,win8.1+python3.6! 第一步安装django,配置好环境变量 .配置好环境变量.配置好环境变量(注意是配置好,不是配置了 ...

  2. 使用fiddler抓手机包遇到问题

    1,http://blog.csdn.net/roland_sun/article/details/30078353 2,参照上面不周,不能实现用自己ip:8888端口下载出证书 解决办法,先从fid ...

  3. HUE配置文件hue.ini 的yarn_clusters模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  4. udgrade rubygems-update

    gem install rubygems-update update_rubygems gem update --system gem install rubygems-bundler  

  5. MYSQL 复制详解

    MySql 复制介绍 MySQL复制允许将主实例(master)上的数据同步到一个或多个从实例(slave)上,默认情况 下复制是异步进行的,从库也不需要一直连接到主库来同步数据 MySQL复制的数据 ...

  6. expect安装和使用

    Expect是一个我们常在shell交互时常用到的工具,它主要由expect-send组成.Expect是等待输出内容中的特定字符.然后由send发送特定的相应.Expect的工作流程类似于:小明和小 ...

  7. mongodb-地理坐标存储查询

    mongodb可支持空间地理搜索: 查询器 $geoWithin Selects geometries within a bounding GeoJSON geometry. The 2dsphere ...

  8. springboot-17-springboot的文件上传和下载

    单文件上传 1, 需要使用thymeleaf模板:  http://www.cnblogs.com/wenbronk/p/6565834.html src/main/resource/template ...

  9. Linux-(top,free)

    top命令 1.命令格式: top [参数] 2.命令功能: 显示当前系统正在执行的进程的相关信息,包括进程ID.内存占用率.CPU占用率等. top命令是Linux下常用的性能分析工具,能够实时显示 ...

  10. 面试题28:单链表一次遍历删除从后往前的第n个节点

    class Solution { public: ListNode *removeNthFromEnd(ListNode *head, int n) { ListNode* fake = ); fak ...