如何在 Flutter 中使用 JavaScript

JavaScript 是一种常用的编程语言。它最早是被用于网页端的编程。现在，通过使用 Flutter 的 webview_flutter 插件，你可以在 Flutter 应用中使用 JavaScript。

步骤 1：添加依赖

要使用 webview_flutter 插件，我们需要在 pubspec.yaml 文件中添加相应的依赖。在你的项目文件夹中找到 pubspec.yaml 文件，然后添加如下内容：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.0

运行 flutter packages get 命令获取依赖项。

步骤 2：创建 WebView 控件

要使用 JavaScript，我们需要在 Flutter 应用中创建一个 WebView 控件，可以在其中嵌入 HTML 内容。下面是一个简单的示例：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter WebView'),
        ),
        body: WebView(
          initialUrl: 'https://www.example.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

步骤 3：使用 JavaScript

现在，我们可以在 Flutter 应用中使用 JavaScript 了。要在 WebView 中运行 JavaScript，我们可以使用 evaluateJavascript 方法。

下面是一个简单的示例，演示如何从 JavaScript 中获取文本框的内容，并将其作为 Flutter 中的一个字符串使用。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter WebView'),
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                controller: controller,
                decoration: InputDecoration(hintText: 'Enter text'),
              ),
            ),
            Expanded(
              child: WebView(
                initialUrl: 'https://www.example.com',
                javascriptMode: JavascriptMode.unrestricted,
                onPageFinished: (url) {
                  // 在 WebView 加载完成后执行 JavaScript
                  _executeJavascript();
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  _executeJavascript() async {
    // 从 JavaScript 中获取文本框的内容，并将其作为 Flutter 中的一个字符串使用
    final inj = await controller
        .evaluateJavascript("document.querySelector('input').value;");
    final text = inj.replaceAll('"', '').trim();
    print(text);
  }
}

结论

通过使用 webview_flutter 插件，我们可以在 Flutter 应用中嵌入 JavaScript，并与 Flutter 应用程序交互。