Flutter中ListView 的使用示例

 更新时间:2018年07月27日 11:25:31   作者:刘斯龙  
这篇文章主要介绍了Flutter中ListView 的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

JSON 数据结构

Item 结构

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

功能实现

  1. material 库
  2. Json 解析
  3. 网络请求
  4. 加载菊花

要实现上面四个功能,我们首先需要在 .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,
 );
 }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android学习之BottomSheetDialog组件的使用

    Android学习之BottomSheetDialog组件的使用

    BottomSheetDialog是底部操作控件,可在屏幕底部创建一个支持滑动关闭视图。本文将通过示例详细讲解它的使用,感兴趣的小伙伴可以了解一下
    2022-06-06
  • Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】

    Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】

    这篇文章主要介绍了Android编程实现canvas绘制饼状统计图功能,可实现自动适应条目数量与大小的功能,涉及Android基于canvas的图形绘制相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • Android开发之时间日期操作实例

    Android开发之时间日期操作实例

    这篇文章主要介绍了Android开发之时间日期操作,是Android程序开发中常见的一个功能,需要的朋友可以参考下
    2014-08-08
  • ExpandableListView实现手风琴效果

    ExpandableListView实现手风琴效果

    这篇文章主要为大家详细介绍了ExpandableListView实现手风琴效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android实现分享长图并且添加全图水印

    Android实现分享长图并且添加全图水印

    这篇文章主要介绍了Android实现分享长图并且添加全图水印的相关资料,需要的朋友可以参考下
    2017-03-03
  • Android ListView滚动到指定的位置

    Android ListView滚动到指定的位置

    这篇文章主要给大家介绍了Android中的ListView如何滚动到指定的位置,文章给出了两种解决的方法,并给出详细的示例代码,相信会对大家的理解和学习很有帮助,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • Android学习之Flux架构入门

    Android学习之Flux架构入门

    Flux是Facebook在14年提出的一种Web前端架构,主要用来处理复杂的UI逻辑的一致性问题(当时是为了解决Web页面的消息通知问题)。接下来从其特点和使用上来介绍Flux架构。本文主要目的是让你对Flux的一个架构大体面貌有个了解。
    2016-08-08
  • Android Studio 3.1.3升级至3.6.1后旧项目的兼容操作方法

    Android Studio 3.1.3升级至3.6.1后旧项目的兼容操作方法

    这篇文章主要介绍了Android Studio 3.1.3升级至3.6.1后旧项目的兼容操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Android自定义单例AlertDialog详解

    Android自定义单例AlertDialog详解

    这篇文章主要为大家详细介绍了Android自定义单例AlertDialog的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android动画入门教程之kotlin

    Android动画入门教程之kotlin

    最近在学习kotlin,所以下面这篇文章主要给大家介绍了关于Android动画入门教程之kotlin的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-12-12

最新评论