Flutter解析HTML中的JSON数据并动态渲染

我在Flutter项目中遇到一个问题：从HTML中提取JSON数据后，需要动态渲染到界面上。目前使用html包解析HTML内容能获取到JSON字符串，但不知道如何高效地将这些数据转化为Flutter可用的Widget。具体场景是：API返回的HTML包含类似<script>var data = {"title":"示例","items":[1,2,3]}</script>的结构，需要把data里的内容动态生成ListView或Card列表。尝试过用jsonDecode转化后用Map直接构建Widget，但遇到数据类型不匹配或null值导致渲染异常。想请教：1) 是否有专门处理HTML内嵌JSON的Dart库？2) 动态渲染时如何处理JSON结构的动态变化（比如某些字段可能缺失）？3) 对这种混合数据源，有没有最佳实践方案？


更多关于Flutter解析HTML中的JSON数据并动态渲染的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复

在Flutter中解析HTML中的JSON数据并动态渲染，可以使用flutter_html插件来解析HTML，并结合dart:convert库解析JSON。首先，通过正则提取HTML中的JSON片段，然后解析为Dart对象。接着，根据JSON数据动态生成UI。

  1. 添加依赖：
dependencies:
  flutter_html: ^3.0.0
  1. 示例代码：
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String htmlContent = '''
    <div>
      {"name": "Flutter", "version": "3.7.0"}
    </div>
    ''';
    dynamic jsonData = extractAndParseJson(htmlContent);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('JSON in HTML')),
        body: jsonData != null 
          ? Column(children: [Text(jsonData['name']), Text(jsonData['version'])])
          : Html(data: htmlContent),
      ),
    );
  }

  dynamic extractAndParseJson(String html) {
    final match = RegExp(r'<div>\s*({.*?})\s*</div>', dotAll: true).firstMatch(html);
    if (match != null) {
      try {
        return jsonDecode(match.group(1)!);
      } catch (_) {}
    }
    return null;
  }
}

这段代码会尝试从HTML内容中提取JSON数据并解析，如果失败则直接显示原始HTML。

更多关于Flutter解析HTML中的JSON数据并动态渲染的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


作为屌丝程序员，我来分享个简单方法。首先使用dart:convert库解析JSON数据，比如 var jsonData = jsonDecode(jsonString);。接着解析HTML，可以用flutter_html插件，它支持从网络或本地加载HTML内容。

示例代码如下：

import 'package:flutter_html/flutter_html.dart';
import 'dart:convert';

void main() {
  String htmlContent = '''
  <div>
    <h1>${jsonData['title']}</h1>
    <p>${jsonData['description']}</p>
  </div>
  ''';
  
  // 解析JSON
  var jsonData = jsonDecode('{"title":"Hello","description":"World"}');
  
  // 渲染HTML
  Html(data: htmlContent);
}

这样就能动态渲染HTML了。记住处理JSON数据时要检查键是否存在，避免运行时错误。如果需要更复杂功能，可以结合webview或自定义标签。

Flutter解析HTML中的JSON数据并动态渲染

在Flutter中解析HTML中的JSON数据并动态渲染，你可以按照以下步骤实现：

1. 添加依赖

首先在pubspec.yaml中添加必要的依赖：

dependencies:
  flutter_html: ^3.0.0-alpha.5  # 解析HTML
  http: ^0.13.4  # 网络请求

2. 实现代码

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_html/flutter_html.dart';
import 'dart:convert';

class JsonHtmlViewer extends StatefulWidget {
  @override
  _JsonHtmlViewerState createState() => _JsonHtmlViewerState();
}

class _JsonHtmlViewerState extends State<JsonHtmlViewer> {
  dynamic jsonData;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    try {
      final response = await http.get(Uri.parse('你的API地址'));
      if (response.statusCode == 200) {
        setState(() {
          jsonData = json.decode(response.body);
          isLoading = false;
        });
      }
    } catch (e) {
      print('Error fetching data: $e');
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('JSON HTML渲染')),
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : SingleChildScrollView(
              child: Column(
                children: [
                  if (jsonData['htmlContent'] != null)
                    Html(data: jsonData['htmlContent']),
                  // 也可以渲染其他JSON数据
                  if (jsonData['text'] != null)
                    Text(jsonData['text']),
                ],
              ),
            ),
    );
  }
}

3. 使用说明

  1. 这个示例假设你的JSON数据中包含htmlContent字段，里面是HTML内容
  2. flutter_html包会解析HTML标签并渲染为Flutter组件
  3. 你可以根据需要扩展，处理更复杂的HTML结构和JSON数据

注意事项

  • 对于复杂的HTML内容，可能需要自定义flutter_html的渲染器
  • 确保HTML内容是安全的，避免XSS攻击
  • 处理网络请求的异常情况

希望这个示例能帮助你实现需求！

回到顶部