Flutter仿豆瓣电影列表实战：深入浅出，手把手打造豆瓣克隆！

2023-11-28 01:57:48

前言

豆瓣电影作为国内最受欢迎的电影评分平台，以其庞大的用户基数和高质量的影评而著称。其简洁大方的列表页面设计也颇受好评。作为一名 Flutter 开发者，自然不能错过学习和仿制豆瓣电影列表页面的机会。

数据请求和转化

在开始UI设计之前，我们首先需要完成数据请求和转化工作。数据请求方面，这里推荐使用Flutter自带的http包，简单易用，功能齐全。数据转化方面，我们需要将JSON格式的数据转换成Dart对象，以便于后续使用。

1.1 网络请求简单封装

import 'package:http/http.dart' as http;

class NetworkUtil {
  static Future<String> get(String url) async {
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data');
    }
  }
}

1.2 首页数据请求转化

接下来，我们将豆瓣电影首页的数据进行请求和转化。

import 'dart:convert';

class Movie {
  String title;
  String cover;
  String score;
  Movie(this.title, this.cover, this.score);

  factory Movie.fromJson(Map<String, dynamic> json) {
    return Movie(
      json['title'],
      json['cover'],
      json['score'],
    );
  }
}

class MovieList {
  List<Movie> movies;

  MovieList(this.movies);

  factory MovieList.fromJson(List<dynamic> json) {
    List<Movie> movies = [];
    for (var item in json) {
      movies.add(Movie.fromJson(item));
    }
    return MovieList(movies);
  }
}

Future<MovieList> fetchMovieList() async {
  final response = await NetworkUtil.get('https://douban.com/j/app/new_list?count=20');
  final Map<String, dynamic> data = json.decode(response);
  final List<dynamic> movies = data['data'];
  return MovieList.fromJson(movies);
}

UI设计

有了数据之后，就可以开始UI设计了。豆瓣电影列表页面采用的是瀑布流布局，即多个卡片式列表项以瀑布流的形式排列。每个列表项包含电影海报、标题、评分、类型等信息。

2.1 布局设计

首先，我们需要创建一个ListView来承载电影列表项。然后，在ListView中添加一个CustomScrollView，并在CustomScrollView中添加一个SliverGrid。SliverGrid的delegate属性指定了列表项的布局方式，这里我们使用SliverGridDelegateWithFixedCrossAxisCount，指定了列表项的列数和间距。

ListView(
  children: <Widget>[
    CustomScrollView(
      slivers: <Widget>[
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
          ),
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return MovieListItem(movies[index]);
            },
            childCount: movies.length,
          ),
        ),
      ],
    ),
  ],
)

2.2 列表项设计

接下来，我们需要设计电影列表项。这里我们使用一个Card组件来承载列表项的内容。Card组件的child属性指定了列表项的内容，这里我们使用一个Column组件来垂直排列列表项的内容。

class MovieListItem extends StatelessWidget {
  final Movie movie;

  MovieListItem(this.movie);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          Image.network(movie.cover),
          Text(movie.title),
          Text(movie.score),
        ],
      ),
    );
  }
}

交互体验

为了让列表页面更加友好，我们可以添加一些交互效果。例如，当用户点击列表项时，可以跳转到电影详情页面。

3.1 添加导航到详情页面的交互

GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => MovieDetailPage(movie),
      ),
    );
  },
  child: MovieListItem(movie),
)

3.2 添加加载更多数据的功能

当用户滚动到底部时，我们可以加载更多数据。这里我们使用NotificationListener来监听用户滚动事件，当用户滚动到底部时，加载更多数据。

NotificationListener(
  onNotification: (ScrollNotification notification) {
    if (notification is ScrollEndNotification && notification.metrics.extentAfter == 0) {
      loadMoreData();
    }
    return false;
  },
  child: ListView(
    children: <Widget>[
      // ...
    ],
  ),
)