Flutter内嵌网页视图与样式定制插件instar_style_inappwebview的使用

在Flutter中，如果你想内嵌一个网页视图并进行样式定制，可以使用 flutter_inappwebview 插件。flutter_inappwebview 是一个功能强大的插件，允许你在Flutter应用中嵌入WebView，并提供了丰富的API来控制WebView的行为和样式。

1. 安装 flutter_inappwebview 插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_inappwebview 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.0.0+3

然后运行 flutter pub get 来安装插件。

2. 基本使用

以下是一个简单的示例，展示如何在Flutter应用中嵌入一个WebView：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewExample(),
    );
  }
}

class InAppWebViewExample extends StatefulWidget {
  [@override](/user/override)
  _InAppWebViewExampleState createState() => _InAppWebViewExampleState();
}

class _InAppWebViewExampleState extends State<InAppWebViewExample> {
  InAppWebViewController? webViewController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InAppWebView Example'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
        onLoadStart: (controller, url) {
          print("Page started loading: $url");
        },
        onLoadStop: (controller, url) {
          print("Page finished loading: $url");
        },
      ),
    );
  }
}

3. 样式定制

flutter_inappwebview 提供了多种方式来定制WebView的样式和行为。以下是一些常见的定制方式：

3.1 自定义CSS和JavaScript

你可以通过注入CSS和JavaScript来定制网页的样式和行为。例如，你可以隐藏某些元素或修改页面的背景颜色。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
  onLoadStop: (controller, url) async {
    await controller.evaluateJavascript(source: """
      document.body.style.backgroundColor = 'lightblue';
      document.querySelector('header').style.display = 'none';
    """);
  },
);

3.2 自定义WebView设置

你可以通过 InAppWebViewSettings 来定制WebView的行为，例如启用JavaScript、设置缓存模式等。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
    cacheEnabled: true,
    transparentBackground: true,
  ),
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
);

3.3 处理导航和页面加载

你可以通过 onLoadStart 和 onLoadStop 回调来处理页面加载事件，或者通过 onNavigationResponse 来处理导航响应。

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
  onLoadStart: (controller, url) {
    print("Page started loading: $url");
  },
  onLoadStop: (controller, url) {
    print("Page finished loading: $url");
  },
  onNavigationResponse: (controller, navigationResponse) async {
    if (navigationResponse.url.toString().contains("blocked-page")) {
      return NavigationResponsePolicy.CANCEL;
    }
    return NavigationResponsePolicy.ALLOW;
  },
);

4. 使用 instar_style_inappwebview 插件

如果你需要更高级的样式定制，可以考虑使用 instar_style_inappwebview 插件。这个插件基于 flutter_inappwebview，并提供了更多的样式定制选项。

4.1 安装 instar_style_inappwebview

在 pubspec.yaml 文件中添加 instar_style_inappwebview 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  instar_style_inappwebview: ^1.0.0

然后运行 flutter pub get 来安装插件。

4.2 使用 instar_style_inappwebview

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InstarStyleInAppWebViewExample(),
    );
  }
}

class InstarStyleInAppWebViewExample extends StatefulWidget {
  [@override](/user/override)
  _InstarStyleInAppWebViewExampleState createState() => _InstarStyleInAppWebViewExampleState();
}

class _InstarStyleInAppWebViewExampleState extends State<InstarStyleInAppWebViewExample> {
  InstarStyleInAppWebViewController? webViewController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InstarStyleInAppWebView Example'),
      ),
      body: InstarStyleInAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
        onLoadStart: (controller, url) {
          print("Page started loading: $url");
        },
        onLoadStop: (controller, url) {
          print("Page finished loading: $url");
        },
        styleOptions: InstarStyleOptions(
          backgroundColor: Colors.lightBlue,
          hideHeader: true,
          customCSS: """
            body {
              font-family: 'Arial', sans-serif;
              color: #333;
            }
          """,
        ),
      ),
    );
  }
}