flutter 入门与实战

添加html解析库和http网络请求库

  http: ^0.12.0
  html: ^0.13.4+1

构建实体存储banner图数据

/// 首页新闻 banner
class MovieNews {
   
  //标题
  String title;
  //图片
  String cover;
  //摘要
  String summary;
  //链接
  String link;

  MovieNews(this.title, this.cover, this.summary, this.link);
  //将返回的数据进行解析
  MovieNews.fromJson(Map data) {
   
    title = data['title'];
    summary = data['summary'];
    cover = data['cover'];
    link = data['link'];
  }
}

获取网页中的数据

• 根据节点和标签获取

import 'dart:async';
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/';
  //从豆瓣网页上获取需要的轮播图片
  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