flutter_html 和 WebView 解析html 和 build.gradle源码

 

1. flutter_html 描述及相关 API

// 以下内容涉及 flutter_html 的使用和其相关的 API 接口
// API 接口地址如下:
http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=20

2. Flutter 解析 HTML 插件

// 这部分内容描述了如何在 Flutter 中解析 HTML
// 插件的官方链接如下:
https://pub.dev/packages/flutter_html

flutter_html 案例代码

// 这是一个简单的 flutter_html 使用案例
// 该案例展示了如何在 Flutter 中解析 HTML 数据

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: <Widget>[
            Html(
              data: "${ _html.length > 0 ? _html[0]['content'] : 1}",
              // 下面是一些可选参数:
              padding: EdgeInsets.all(8.0),
              backgroundColor: Colors.white70,
              defaultTextStyle: TextStyle(fontFamily: 'serif'),
              linkStyle: const TextStyle(
                color: Colors.redAccent,
              ),
              onLinkTap: (url) {
                // 在这里可以实现点击链接后的逻辑，例如打开一个 webview
              },
              onImageTap: (src) {
                // 点击图片后的逻辑，例如显示图片的大图
              },
              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 页面

// WebView 用于加载远程的 web 页面
// 以下是一个例子的 web 页面 URL:
http://www.phonegap100.com/newscontent.php?aid=198

3. Flutter WebView 组件 inappbrowser 的使用

// 这部分内容描述了如何在 Flutter 中使用 WebView 组件 inappbrowser
// 插件的官方链接如下:
https://pub.dev/packages/flutter_inappbrowser

// 注意事项:
// 对于 Android 平台，minSdkVersion 的最小版本要求是 17
// 如果在 app 文件夹的 build.gradle 中遇到错误，请进行替换操作
// 高版本的 flutter_inappbrowser 出错时，可以考虑使用版本 flutter_inappbrowser: ^1.2.1

build.gradle 文件内容

// 这是 build.gradle 的文件内容
// 这里提供了一个常见的配置，包括一些基本的 Flutter 和 Kotlin 设置

//build.gradle 文件源码
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
    compileSdkVersion 28

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.itying.flutter_app01"
        minSdkVersion 17
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

WebView 案例代码

// 这是一个使用 WebView 在 Flutter 中加载远程网页的简单案例

import 'package:flutter/material.dart';
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';

class WebView extends StatefulWidget{
  WebView({Key key});
  _WebView createState() => _WebView();
}

class _WebView extends State {
  @override
  initState() {
    super.initState();
  }
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(title: Text('webView'),),
        body: Column(
          children: <Widget>[
            Expanded(
              child: InAppWebView(
                initialUrl: "http://www.phonegap100.com/newscontent.php?aid=198",
              ),
            )
          ]
        )
    );
  }
}