Flutter，从网站获取特定图像答案

【问题标题】：Flutter, fetching specfic image from websiteFlutter，从网站获取特定图像
【发布时间】：2019-05-27 19:23:16
【问题描述】：

我正在学习颤振，并想获取作为卡通缩略图的各种图像。我使用了HTTP 库并获取了响应数据。

但是，我怎样才能提取该图像？

网址：https://comic.naver.com/webtoon/weekdayList.nhn?week=

Future<http.Response> _getData() async {
    return await http.get('https://comic.naver.com/webtoon/weekdayList.nhn?week=');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Fetching"),
          onPressed: (){
            _getData().then((response){
              //dom.Document document = parser.parse(response.body);
              print(response.body);
            }).catchError((e) => print(e));
          },
        ),
      ),
    );
  }

下面是我想做的。

将网页获取为 HTML 代码

查找每个卡通的图片网址

获取该图像

【问题讨论】：

你为什么不使用docs.flutter.io/flutter/painting/NetworkImage-class.html？
@GünterZöchbauer 也许是因为他是新手，不知道这件事？
要使用该库，我必须知道图像的 url，这导致必须在网页中提取该 url。
所以你想提取 URL，而不是图像。
是的，我编辑了请看

标签： html http flutter

【解决方案1】：

这里有一个基本的例子，按下右上角的按钮后，你会得到ListView中的图片：

    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    import 'package:html/parser.dart' as parser;
    import 'package:html/dom.dart' as dom;


   ...create your StatefulWidget



     class ParsingWidgetState extends State<ParsingWidget> {
      List<String> list = List();

      void _getData() async {
        final response =
            await http.get('https://comic.naver.com/webtoon/weekdayList.nhn?week=');
        dom.Document document = parser.parse(response.body);
        final elements = document.getElementsByClassName('thumb');

        setState(() {
          list = elements
              .map((element) =>
                  element.getElementsByTagName("img")[0].attributes['src'])
              .toList();
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.red,
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.refresh),
                  onPressed: () {
                    _getData();
                  },
                ),
              ],
            ),
            body: ListView.builder(
              itemCount: list.length,
              itemBuilder: (context, index) {
                return Image.network(
                  list[index],
                  height: 200.0,
                );
              },
            ));
      }
    }

尝试使用 FutureBuilder 代替 setState，这只是一个工作示例。

更多信息：

【讨论】：