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();
// 監聽滾動事件
_scrollController.addListener((){
// 獲取滾動條下拉的距離
// print(_scrollController.position.pixels);
// 獲取整個頁面的高度
// print(_scrollController.position.maxScrollExtent);
if(_scrollController.position.pixels>_scrollController.position.maxScrollExtent-40){
this._getData();
}
});
}
// 獲取資料串列
void _getData() async{
if(this._hasMore){
var url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${_page}";
// 請求遠程資料
Response result = await Dio().get(url);
var list = json.decode(result.data)["result"];
setState(() {
// 拼接資料
this._list.addAll(list);
this._page++;
});
if(list.length<20){
setState(() {
// 關閉加載
this._hasMore = false;
});
}
}
}
// 下拉重繪
Future<void> _onRefresh() async{
print("下拉重繪");
// 持續兩秒
await Future.delayed(Duration(milliseconds:2000),(){
this._getData();
});
}
// 加載影片
Widget _getMoreWidget() {
// 如果還有資料
if(this._hasMore){
return Center(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'加載中',
style: TextStyle(fontSize: 16.0),
),
// 加載圖示
CircularProgressIndicator(
strokeWidth: 1.0,
)
],
),
),
);
}else{
return Center(
child: Text("...我是有底線的..."),
);
}
}
@override
Widget build(BuildContext context) {
return Container(
child:Scaffold(
appBar: AppBar(
title:Text("新聞串列")
),
body:this._list.length==0?this._getMoreWidget():RefreshIndicator(
child: ListView.builder(
// 上拉加載控制器
controller: _scrollController,
itemCount: this._list.length,
itemBuilder: (context,index){
Widget tip = Text("");
// 當渲染到最后一條資料時，加載影片提示
if(index == this._list.length-1){
tip = _getMoreWidget();
}
return Column(
children: <Widget>[
ListTile(
title:Text(
"${this._list[index]["title"]}",
maxLines:1,
),
onTap:(){
Navigator.pushNamed(context,'/content',arguments: {
"aid":this._list[index]["aid"]
});
},
),
Divider(),
// 加載提示
tip
],
);
},
),
// 下拉重繪事件
onRefresh:this._onRefresh
)
)
);
}
}新聞串列頁的效果圖如下：
以下是點擊新聞串列頁跳轉詳情頁的代碼，這個頁面中會用到決議html的插件，
// pages/Content.dart;
import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
// 引入決議html的插件
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';
class ContentPage extends StatefulWidget {
final Map arguments;
ContentPage({Key key,this.arguments}) : super(key: key);
@override
_ContentPageState createState() => _ContentPageState(this.arguments);
}
class _ContentPageState extends State<ContentPage> {
final Map arguments;
List _list=[];
_ContentPageState(this.arguments);
@override
void initState() {
super.initState();
// 發起請求
this._getData();
}
// 請求資料
void _getData() async{
// 將新聞頁面中傳入的引數作為請求引數
var url = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=${this.arguments['aid']}";
var result = await Dio().get(url);
setState(() {
this._list = json.decode(result.data)["result"];
});
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("新聞詳情"),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
// 官方代碼
Html(
// 渲染的資料
data:this._list.length>0?this._list[0]["content"]:'',
// 自定義樣式
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);
},
),
],
)
),
)
);
}
}以下是詳情頁決議的Html檔案的效果圖，
參考：https://pub.flutter-io.cn/packages/flutter_html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/246985.html
標籤：區塊鏈