您现在的位置是：首页 > 前端 > Flutter Flutter

flutter-28(实现简单的新闻系统渲染新闻详情数据以及用用flutter_html 解析析html)

2020-04-30【Flutter】1492人已围观

简介## 一、Flutter 实现一个简单的新闻 APP **涉及的 api 接口：** 新闻列表： http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 新闻详情：http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20 ## 二、Flutter 解析 html [文档 https://pub.dev/packages/

## 一、Flutter  实现一个简单的新闻 APP

**涉及的 api 接口：**

新闻列表： http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1

新闻详情：http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20

## 二、Flutter  解析 html

[文档 https://pub.dev/packages/flutter_html](https://pub.dev/packages/flutter_html)

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200322223552.png)

> 文件代码

```
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:html/dom.dart' as dom;

class ContentDemoPage extends StatefulWidget {
  Map arguments;
  ContentDemoPage({Key key,this.arguments}) : super(key: key);
  _ContentDemoPageState createState() => _ContentDemoPageState(this.arguments);
}

class _ContentDemoPageState extends State<ContentDemoPage> {
  Map arguments;
  List _list = [];
  _ContentDemoPageState(this.arguments);
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getData();
  }
  _getData() async{
    var apiUrl="http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=${this.arguments["aid"]}";
    var response=await Dio().get(apiUrl);

setState(() {
      this._list=json.decode(response.data)["result"];
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("HTML 解析 Demo"),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        body: _list.length > 0 ? ListView(
          children: <Widget>[
            Text("${this._list.length>0?this._list[0]["title"]:''}",textAlign: TextAlign.center,),
            Html(
              data: """
              ${this._list.length>0?this._list[0]["content"]:''}
              """,
            ),
          ],
        ) : Text(""),
    );
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-27(Flutter 新下拉刷新上拉分页加载更多)

下一篇：flutter-29(使用WebView组件url_launcher加载远程web页面渲染新闻详情数据)