极简Dart代码搞定App内实时数据抓取

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:html/parser.dart' as parser;
import 'package:html/dom.dart';
​
void main() {
  runApp(MyApp());
}
​
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dart 数据抓取示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: DataFetchingExample(),
    );
  }
}
​
class DataFetchingExample extends StatefulWidget {
  @override
  _DataFetchingExampleState createState() => _DataFetchingExampleState();
}
​
class _DataFetchingExampleState extends State<DataFetchingExample> {
  List<Post> posts = [];
  bool isLoading = false;
  String errorMessage = '';
​
  // 从 JSON API 获取数据
  Future<void> fetchJsonData() async {
    setState(() {
      isLoading = true;
      errorMessage = '';
    });
​
    try {
      final response = await http.get(
        Uri.parse('https://jsonplaceholder.typicode.com/posts'),
        headers: {
          'User-Agent': 'MyFlutterApp/1.0',
        },
      );
​
      if (response.statusCode == 200) {
        final List<dynamic> data = json.decode(response.body);
        setState(() {
          posts = data.map((json) => Post.fromJson(json)).toList();
          isLoading = false;
        });
      } else {
        setState(() {
          errorMessage = '获取数据失败: ${response.statusCode}';
          isLoading = false;
        });
      }
    } catch (e) {
      setState(() {
        errorMessage = '发生错误: $e';
        isLoading = false;
      });
    }
  }
​
  // 解析 HTML 内容示例
  Future<void> fetchAndParseHtml() async {
    setState(() {
      isLoading = true;
      errorMessage = '';
    });
​
    try {
      final response = await http.get(
        Uri.parse('https://httpbin.org/html'),
        headers: {
          'User-Agent': 'MyFlutterApp/1.0',
        },
      );
​
      if (response.statusCode == 200) {
        final document = parser.parse(response.body);
        final Element? h1Element = document.querySelector('h1');
        
        setState(() {
          posts = [
            Post(
              id: 1,
              title: 'HTML 解析示例',
              body: h1Element?.text ?? '未找到H1标签',
            )
          ];
          isLoading = false;
        });
      } else {
        setState(() {
          errorMessage = '获取HTML失败: ${response.statusCode}';
          isLoading = false;
        });
      }
    } catch (e) {
      setState(() {
        errorMessage = '解析HTML时发生错误: $e';
        isLoading = false;
      });
    }
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dart 数据抓取示例'),
        backgroundColor: Colors.blue[700],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: fetchJsonData,
                  child: Text('获取JSON数据'),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.green,
                  ),
                ),
                ElevatedButton(
                  onPressed: fetchAndParseHtml,
                  child: Text('解析HTML'),
                  style: ElevatedButton.styleFrom(
                    primary: Colors.orange,
                  ),
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
              '数据抓取结果:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            if (isLoading)
              Center(child: CircularProgressIndicator())
            else if (errorMessage.isNotEmpty)
              Container(
                padding: EdgeInsets.all(12),
                color: Colors.red[50],
                child: Text(
                  errorMessage,
                  style: TextStyle(color: Colors.red),
                ),
              )
            else if (posts.isEmpty)
              Text('点击上方按钮获取数据')
            else
              Expanded(
                child: ListView.builder(
                  itemCount: posts.length,
                  itemBuilder: (context, index) {
                    return Card(
                      margin: EdgeInsets.symmetric(vertical: 8),
                      child: ListTile(
                        title: Text(
                          posts[index].title,
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        subtitle: Text(posts[index].body),
                        leading: CircleAvatar(
                          child: Text(posts[index].id.toString()),
                        ),
                      ),
                    );
                  },
                ),
              ),
          ],
        ),
      ),
    );
  }
}
​
// 数据模型
class Post {
  final int id;
  final String title;
  final String body;
​
  Post({required this.id, required this.title, required this.body});
​
  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5
  html: ^0.15.1