flutter_html 和 WebView 解析html

2021-04-15 11:29

阅读:484

标签:min   webview   image   fonts   htm   wait   element   http   view   

一、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: [
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 案例代码

flutter_html 和 WebView 解析html

标签:min   webview   image   fonts   htm   wait   element   http   view   

原文地址:https://www.cnblogs.com/zhaofeis/p/12363180.html

上一篇:1.Web介绍与HTTP基础

下一篇:html基本标签


评论


亲,登录后才可以留言!