Flutter(Dart)：如何在主页面展示存储的变量？

我来帮你调整代码，让爬取到的文本能顺利显示在主页面上。核心思路是通过异步函数返回数据+状态管理更新UI来实现，具体步骤如下：

1. 改造爬取函数，让它返回数据 #

你的第二个文件里的mainz函数目前只是打印文本，我们需要让它把爬取到的内容返回给主页面，而不是只输出到控制台：

// function.dart
import 'package:http/http.dart' as http;
import 'package:html/parser.dart' as parser;
import 'package:html/dom.dart';

// 修改为异步函数，返回爬取到的文本字符串
Future<String> fetchFetchedText() async {
  http.Response response = await http.get(Uri.parse('https://www.google.com'));
  Document document = parser.parse(response.body);
  
  // 把所有<a>标签的文本拼接成一个字符串，用换行分隔方便阅读
  StringBuffer textBuffer = StringBuffer();
  document.getElementsByTagName('a').forEach((Element element) {
    final String fetchedText = element.text;
    textBuffer.writeln(fetchedText);
  });
  
  return textBuffer.toString();
}

2. 把主页面改成StatefulWidget #

因为我们需要异步获取数据后更新UI，原来的StatelessWidget无法动态更新状态，所以要改成StatefulWidget：

// main.dart
import 'package:flutter/material.dart';
import './function.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 存储爬取到的文本
  String? fetchedText;
  // 标记是否正在加载数据
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    // 页面初始化时调用爬取函数
    _loadFetchedText();
  }

  Future<void> _loadFetchedText() async {
    try {
      // 调用function.dart里的异步函数获取文本
      String text = await fetchFetchedText();
      setState(() {
        fetchedText = text;
        isLoading = false;
      });
    } catch (e) {
      // 处理加载失败的情况
      setState(() {
        fetchedText = '加载出错：$e';
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('爬取文本展示')),
      body: Center(
        child: isLoading
            ? const CircularProgressIndicator() // 加载中显示转圈动画
            : SingleChildScrollView( // 文本过长时支持滚动
                padding: const EdgeInsets.all(16),
                child: Text(fetchedText ?? '暂无数据'),
              ),
      ),
    );
  }
}

关键细节说明 #

• 异步函数返回数据：将原来的mainz函数改为返回Future<String>的异步函数，主页面可以通过await等待并获取爬取结果。
• 状态管理更新UI：使用setState()触发页面重建，当数据获取完成后，自动更新UI显示文本。
• 加载状态与错误处理：添加加载指示器和错误提示，避免用户看到空白页面，提升体验。

这样修改后，主页面就能成功展示从网站爬取到的文本内容了。

内容的提问来源于stack exchange，提问作者Rajesh