2021年Flutter中使用flutter_html解析html文件

duanshuiLu点抗母

于 2021-03-23 10:32:20 发布

阅读量1.2k

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_36824777/article/details/115111700

版权

1. 安装插件
配置 flutter_html 插件。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26+2 
  flutter_swiper: ^1.1.6
  fluttertoast: ^7.1.6
  http: ^0.12.2
  dio: ^3.0.10
  
  # 解析HTML
  flutter_html: ^1.1.0
在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

 

2. 引入依赖
在需要用到的该插件的文件中引入插件包。

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';
 

3. 使用插件
Html(
    // 渲染的数据
    data:htmlData,
    // 自定义样式
    style: {},
    customRender: {
        "flutter": (RenderContext context, Widget child, attributes, _) {
            return FlutterLogo(
                style: (attributes['horizontal'] != null)
                    ? FlutterLogoStyle.horizontal
                    : FlutterLogoStyle.markOnly,
                textColor: context.style.color,
                size: context.style.fontSize.size * 5,
            );
        },
    },
    onLinkTap: (url) {
        print("Opening $url...");
    },
    onImageTap: (src) {
        print(src);
    },
    onImageError: (exception, stackTrace) {
        print(exception);
    },
),
 

4. 完整示例
如下所示为一个新闻列表页的代码。

// pages/News.dart;
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:dio/dio.dart';
 
 
class NewsPage extends StatefulWidget {
    NewsPage({Key key}) : super(key: key);
    @override
    _NewsPageState createState() => _NewsPageState();
}
 
class _NewsPageState extends State<NewsPage> {
    // 当前页数
    int  _page = 1;
    // 页面数据
    List _list = [];
    // 是否还有
    bool _hasMore = true;
    // 滚动控制器
    ScrollController _scrollController = new ScrollController();
    @override
    void initState() {
        super.initState();
        this._getData();