flutter_html 和 WebView 解析html

一、flutter_html
涉及的 api 接口:
http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20
二、Flutter 解析 html
https://pub.dev/packages/flutter_html
 
flutter_html 案例代码  ---- 下面有WebView 案例代码
import ‘dart:convert‘;import ‘package:flutter/material.dart‘;import ‘package:dio/dio.dart‘;import ‘package:flutter_html/flutter_html.dart‘;import ‘package:html/dom.dart‘ as dom;class FlutterHtml extends StatefulWidget{  FlutterHtml({Key key});  _FlutterHtml createState() => _FlutterHtml();}class _FlutterHtml extends State {  var _html = [];  @override  initState() {    super.initState();    _getData();  }  _getData() async{    var response = await Dio().get(‘http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20‘);    var res = json.decode(response.data)[‘result‘];    setState(() {      _html = res;    });    print(res);  }  Widget build(BuildContext context) {    // TODO: implement build    return Scaffold(        appBar: AppBar(title: Text(‘FlutterHtml‘),),        body: ListView(          children: <Widget>[            Html(              data: "${ _html.length > 0 ? _html[0][‘content‘] : 1}",              //Optional parameters:              padding: EdgeInsets.all(8.0),              backgroundColor: Colors.white70,              defaultTextStyle: TextStyle(fontFamily: ‘serif‘),              linkStyle: const TextStyle(                color: Colors.redAccent,              ),              onLinkTap: (url) {                // open url in a webview              },              onImageTap: (src) {                // Display the image in large form.              },              customTextStyle: (dom.Node node, TextStyle baseStyle) {                if (node is dom.Element) {                  switch (node.localName) {                    case "p":                      return baseStyle.merge(TextStyle(height: 2, fontSize: 20));                  }                }                return baseStyle;              },            )          ],        )    );  }}
WebView 加载的远程 web 页面:
http://www.phonegap100.com/newscontent.php?aid=198
 
二、Flutter WebView 组件 inappbrowser的使用
https://pub.dev/packages/flutter_inappbrowser 
 
注意事项 Android: minSdkVersion 最小版本为17 全局搜索改

WebView 案例代码

相关推荐