轻松完成 Flutter 网页解析功能 ｜8月更文挑战

头疼脑胀的代码搬运工
1,144 阅读3分钟

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

废话开篇：原生WebView是展示网页（无论是本地还是网页）的控件，当进行混合开发的时候其实也是用WebView 进行展示，但是网页内容的加载过程变更WebView的滚动范围，这对于混合开发来说就需要进行监听网页加载状态即时去刷新UI布局，flutter 下的网页展示用完真是即简单又方便，这里简单记录一下使用过程。

先看一下效果：

image.png

步骤一、添加第三方依赖。

pub.dev/packages/fl…

访问此网站搜索 flutter_html 查看具体的版本然后进行依赖安装。

image.png

执行依赖安装

终端执行 flutter packages get 命令

image.png

步骤二、使用 flutter_html

直接上代码：

new SingleChildScrollView(
  child: new Column(
    children: <Widget>[
      new Container(
        padding: EdgeInsets.only(left: 10,right: 10,top: 10),
        child:new Text(detailArticle != null ? detailArticle!.title : '',style: SystemFont.customBlodFontAndWeight(20, FontWeight.w800),maxLines: 2,),
      ),
      new Container(
        padding: EdgeInsets.only(left: 0,right: 10),
        child: new Html(
          data: detailArticle != null ? detailArticle!.content : '',
          style: {
            '*':Style(color: Colors.black,letterSpacing: 3,lineHeight: LineHeight(1.7),fontFamily: "SY",fontSize:FontSize(16) ,fontWeight: FontWeight.w500),
          },
        ),
      ),
      new Container(
        color: Colors.white,
        height: 40,
      )
    ],
  ),
),

这里需要注意的是最外层要包裹上 SingleChildScrollView 组件，否则会有绘制报错，有些情况需要再最外层包裹上 Expanded 来设置 SingleChildScrollView 组件的最大高度。

文本内容展示属性 data

这里通过网络获取html文本，然后添加到 html data属性下，这样就能展示里面的标签内容了。

文本内容样式 style

这里可以理解为 CSS 里面的style，需要注意的是 它里面的值需要用Flutter下的Style进行赋值。比如：全局设置文本颜色、字间距、行高、字体、字体粗细等。

style: {
  '*':Style(color: Colors.black,letterSpacing: 3,lineHeight: LineHeight(1.7),fontFamily: "SY",fontSize:FontSize(16) ,fontWeight: FontWeight.w500),
},

除了上面的样式外还可以设置网页内图片的点击事件、link事件等。

image.png

步骤三、总结与对比

之前也写过iOS下原生的网页混合开发，这里简单总结一下，iOS下的UIWebView是展示网页内容的控件，在它之上是有UIScrollView的，UIScrollView 是负责滚动的视图，如果要在网页里进行原生UI的搭建，那么就是在UIScrollView进行子视图的添加。由于网页不是一次性加载完成的，也就是说，网页的 UIScrollView 的滚动范围是不断变化的，所以就需要不断的监听UIScrollView的滚动范围这个属性的变化，然后修改原生组件在UIScrollView的布局位置。

而flutter 的网页展示组件前、后均可添加其他组件，其他的加载过程全部由flutter_html自行处理，完全不用去考虑布局问题（其实就是自身原生开发水平菜，达不到flutter_html这样的高度封装 [汗颜][汗颜][汗颜]）。

没有什么特别难的技术，只是遇到了就写下来，记录一下，代码拙劣，大神勿喷，如果对大家有帮助，更是深感欣慰。

avatar
文章
阅读
粉丝