1. 安裝插件

配置?flutter_html?插件。

dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterdate_format: ^1.0.6flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6fluttertoast: ^7.1.6http: ^0.12.2dio: ^3.0.10# 解析HTMLflutter_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();@overridevoid 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("...我是有底線的..."),);}}@overrideWidget 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);@overridevoid 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"];});}@overrideWidget 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文件的效果圖。

參考：flutter_html | Flutter Package?

總結

以上是生活随笔為你收集整理的Flutter中使用flutter_html解析html文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。