在Flutter中如何解析HTML表格数据并显示在应用中？

在Flutter中如何解析HTML表格数据并显示在应用中？现有的html插件似乎只能渲染HTML，但无法直接提取表格数据。有没有好的方法可以提取HTML表格中的特定行列数据，并将其转换为Flutter可用的数据结构（如List或Map）？另外，提取后如何高效地渲染这些表格数据，比如使用DataTable或GridView？能否分享具体的代码示例和最佳实践？

3 回复

作为屌丝程序员，分享个简单的Flutter HTML表格解析方案。首先使用html包加载HTML内容，然后利用正则或DOM解析表格结构。

  1. 添加依赖：html: ^0.5.0
import 'package:flutter/material.dart';
import 'package:html/parser.dart';

class HtmlTableParser extends StatelessWidget {
  final String htmlContent;

  HtmlTableParser(this.htmlContent);

  @override
  Widget build(BuildContext context) {
    var document = parse(htmlContent);
    var tableRows = document.querySelectorAll('table tr');

    return ListView.builder(
      itemCount: tableRows.length,
      itemBuilder: (context, index) {
        var cells = tableRows[index].querySelectorAll('td, th');
        return Row(
          children: cells.map((cell) => Text(cell.text)).toList(),
        );
      },
    );
  }
}
  1. 调用时传入HTML字符串即可。此方法可提取表格数据并以表格形式展示，适合简单场景。若要处理复杂HTML，建议引入更专业的库如jsoup的Dart版。记得优化性能，避免频繁操作UI线程。

更多关于在Flutter中如何解析HTML表格数据并显示在应用中？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


作为一个屌丝程序员，分享个简单的Flutter HTML表格解析方法。

首先，使用flutter_html插件加载HTML表格。例如：

Html(
  data: """
    <table>
      <tr><th>Name</th><th>Age</th></tr>
      <tr><td>Tom</td><td>25</td></tr>
      <tr><td>Sara</td><td>30</td></tr>
    </table>
  """,
)

若要提取数据，可以借助html库解析HTML：

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

String htmlData = """
<table>
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Tom</td><td>25</td></tr>
  <tr><td>Sara</td><td>30</td></tr>
</table>
""";

Document document = parser.parse(htmlData);
List<Map<String, String>> tableData = [];

for (var row in document.querySelectorAll('tr')) {
  if (row.querySelector('th') != null) continue; // 跳过表头
  var cells = row.querySelectorAll('td');
  tableData.add({"Name": cells[0].text, "Age": cells[1].text});
}

print(tableData); // 提取的数据

最后将提取的数据展示到Flutter的ListView中即可。这种方法简单易懂，适合初学者。

Flutter HTML表格解析与显示教程

在Flutter中解析HTML表格并显示数据，可以通过以下步骤实现：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  html: ^0.15.0  # 用于解析HTML
  http: ^0.13.4  # 用于网络请求(如果需要从网络获取HTML)

2. 解析HTML表格

import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';

List<List<String>> parseHtmlTable(String htmlString) {
  final document = parse(htmlString);
  final tables = document.getElementsByTagName('table');
  
  if (tables.isEmpty) return [];
  
  final table = tables.first;
  final rows = table.getElementsByTagName('tr');
  final data = <List<String>>[];
  
  for (final row in rows) {
    final cells = row.getElementsByTagName('td');
    if (cells.isEmpty) continue;
    
    final rowData = cells.map((cell) => cell.text.trim()).toList();
    data.add(rowData);
  }
  
  return data;
}

3. 显示表格数据

可以使用Flutter的DataTable或Table widget来显示解析的数据：

DataTable buildDataTable(List<List<String>> tableData) {
  return DataTable(
    columns: tableData[0]
        .map((header) => DataColumn(label: Text(header)))
        .toList(),
    rows: tableData.sublist(1).map((row) {
      return DataRow(
        cells: row.map((cell) => DataCell(Text(cell))).toList(),
      );
    }).toList(),
  );
}

4. 完整示例

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

class HtmlTablePage extends StatefulWidget {
  @override
  _HtmlTablePageState createState() => _HtmlTablePageState();
}

class _HtmlTablePageState extends State<HtmlTablePage> {
  List<List<String>> tableData = [];

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

  Future<void> fetchAndParseTable() async {
    final response = await http.get(Uri.parse('YOUR_HTML_URL'));
    if (response.statusCode == 200) {
      final parsedData = parseHtmlTable(response.body);
      setState(() {
        tableData = parsedData;
      });
    }
  }

  List<List<String>> parseHtmlTable(String htmlString) {
    // 解析代码同上
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('HTML Table')),
      body: tableData.isEmpty
          ? Center(child: CircularProgressIndicator())
          : SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: DataTable(
                columns: tableData[0]
                    .map((header) => DataColumn(label: Text(header)))
                    .toList(),
                rows: tableData.sublist(1).map((row) {
                  return DataRow(
                    cells: row.map((cell) => DataCell(Text(cell))).toList(),
                  );
                }).toList(),
              ),
            ),
    );
  }
}

注意事项

  1. 处理不同HTML表格结构可能需要调整解析逻辑
  2. 考虑添加错误处理和空状态
  3. 对于大型表格，考虑使用PaginatedDataTable或列表优化性能

以上代码提供了从HTML解析表格并在Flutter中显示的基本框架，你可以根据实际需求进行调整。

回到顶部