flutter 入门与实战

这篇博客介绍了如何使用Flutter进行移动应用开发,从定义网络框架获取数据开始,逐步构建实体存储和数据转换,接着详细阐述了UI界面的构建过程,包括顶部小部件、电影item布局、圆角背景、五星好评控件的设计,以及如何整合影院热映和即将上映页面,最后展示了如何将获取到的数据渲染到组件上。
摘要由CSDN通过智能技术生成

在这里插入图片描述

定义网络框架获取网络数据

 import 'dart:async';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:douban_flutter/model/movie_news.dart';
import 'package:html/dom.dart' as dom;
//show关键字表示只引用一点
import 'package:html/parser.dart' show parse;
//as指定固定前缀
import 'package:http/http.dart' as http;
class ApiClient {
   
  static const String baseUrl = 'http://api.douban.com/v2/movie/';
  static const String apiKey = '0b2bdeda43b5688921839c8ecb20399b';
  static const String webUrl = 'https://movie.douban.com/';
  var dio = ApiClient.createDio();
  ///从豆瓣网页上获取需要的轮播图片
  Future<List<MovieNews>> getNewsList() async{
   
    //获取的轮播图信息列表
    List<MovieNews> news = [];
    await http.get(webUrl).then((http.Response response){
   
        var document = parse(response.body.toString());
        // 获取所有指定类名的元素gallery-frame获取轮播图数据
        List<dom.Element> items = document.getElementsByClassName('gallery-frame');
        items.forEach((item) {
   
          String cover = item.getElementsByTagName('img')[0].attributes['src'].toString();//根据网页<img/>便签获取图片
          String link = item.getElementsByTagName('a')[0].attributes['href'].toString();//根据网页<a/>标签获取链接
          String title = item.getElementsByTagName('h3')[0].text.toString().trim();//根据网页<h3/>标签获取标题
          String summary =item.getElementsByTagName('p')[0].text.toString().trim();//根据网页<p/>标签获取段落
          MovieNews movieNews = new MovieNews(title, cover, summary, link);
          news.add(movieNews);
        });
    });
    return news;
  }
  /// 获取影院热映电影
  Future<dynamic> getNowPlayingList({
   int start, int count}) async {
   
    Response<Map> response = await dio.get('in_theaters', queryParameters: {
   "start":start, 'count':count});
    return response.data['subjects'];
  }

  /// 获取即将上映电影
  Future<dynamic>   getComingList({
   int start, int count}) async {
   
    Response<Map> response = await dio.get('coming_soon', queryParameters: {
   "start":start, 'count':count});
    return response.data['subjects'];
  }

  ///配置请求参数
  static Dio createDio() {
   
    var options = BaseOptions(
      // 请求路径,如果 `path` 以 "http(s)"开始, 则 `baseURL` 会被忽略; 否则,
      //将会和baseUrl拼接出完整的的url.
        baseUrl: baseUrl,
        // 连接服务器超时时间,单位是毫秒.
        connectTimeout: 10000,
        //响应流上前后两次接受到数据的间隔,单位为毫秒。如果两次间隔超过[receiveTimeout],
        receiveTimeout: 10000,
        // 请求的Content-Type,默认值是[ContentType.JSON].
        //如果您想以"application/x-www-form-urlencoded"格式编码请求数据,
        //可以设置此选项为 `ContentType.parse("application/x-www-form-urlencoded")`,  这样[Dio]
        //就会自动编码请求体.
        contentType: ContentType.json,
        //添加固定参数
        queryParameters: {
   
          "apikey":apiKey
        }
    );
    return Dio(options);
  }
}

构建实体存储电影列表数据

import 'MovieActor.dart';
import 'MovieImage.dart';
import 'MovieRate.dart';

/// 电影简介 item

class MovieItem {
   
  List  genres;
  MovieRate rating;
  String title;
  String year;
  MovieImage images;
  String id;
  String mainlandPubdate;
  int collectCount;
  List<MovieActor> casts;
  List<MovieActor> directors;


  MovieItem(
      this.genres,
      this.title,
      this.year,
      this.images,
      this.id,
      this.rating,
      this.mainlandPubdate,
      this.collectCount,
      this.casts,
      this.directors,
      );

  MovieItem.fromJson(Map data) {
   
    id = data['id'];
    images = MovieImage.fromJson(data['images']);
    year = data['year'];
    title = data['title'];
    genres = data['genres']?.cast<String>()?.toList();
    rating =MovieRate.fromJson(data['rating']);
    mainlandPubdate = data['mainland_pubdate'];
    collectCount =data['collect_count'];

    List<MovieActor> castsData = []<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值