Flutter网页视图插件jio_webview的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter网页视图插件jio_webview的使用

插件介绍

jio_webview 是一个为 Android 和 iOS 提供原生 WebView 的的 Flutter 插件。它允许你在 Flutter 应用中加载和显示网页内容。

使用方法

  1. 首先，你需要在 pubspec.yaml 文件中添加对 jio_webview 插件的依赖。
  2. 然后，在你的 Dart 代码中导入并使用该插件。

示例代码

下面是一个完整的示例代码，展示了如何使用 jio_webview 插件来创建一个简单的的 WebView 应用。

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    const webUrl = 'https://iocode.shop/';
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('WebView example app'),
        ),
        body: NativeWebView(
          onControllerCreated: (controller) async {
            await controller.loadUrl(webUrl);
          },
        ),
      ),
    );
  }
}

许可证

版权信息如下：

Copyright (c) 2024 Jiocoders

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION with THE SOFTWARE OR THE USE OR OTHER DEALINGS in THE
SOFTWARE.

更多关于Flutter网页视图插件jio_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter网页视图插件jio_webview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter中的jio_webview插件的使用，下面是一个简单的代码示例，展示了如何在Flutter应用中集成和使用jio_webview来显示一个网页视图。

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

dependencies:
  flutter:
    sdk: flutter
  jio_webview: ^0.x.x  # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用JioWebview：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewDemo(),
    );
  }
}

class WebViewDemo extends StatefulWidget {
  @override
  _WebViewDemoState createState() => _WebViewDemoState();
}

class _WebViewDemoState extends State<WebViewDemo> {
  late JioWebviewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: JioWebview(
              initialUrl: 'https://www.example.com', // 初始加载的URL
              onWebViewCreated: (JioWebviewController webViewController) {
                _controller = webViewController;
              },
              javascriptMode: JavascriptMode.unrestricted, // 允许执行JavaScript
            ),
          ),
          ElevatedButton(
            onPressed: () {
              // 使用控制器加载新的URL
              _controller.loadUrl('https://www.google.com');
            },
            child: Text('Load Google'),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 添加依赖：在pubspec.yaml文件中添加了jio_webview依赖。
  2. 创建主应用：MyApp是一个简单的MaterialApp，它设置了应用的主题和主页。
  3. 创建WebView页面：WebViewDemo是一个有状态的组件，它包含了JioWebview组件。
  4. 处理WebView创建：在JioWebview的onWebViewCreated回调中，我们保存了JioWebviewController实例，这样我们就可以在后续控制WebView的行为（例如加载新的URL）。
  5. 加载初始URL：我们设置了initialUrl属性来指定WebView初始加载的URL。
  6. 添加按钮：我们在页面底部添加了一个按钮，点击按钮时会使用_controller加载一个新的URL。

请注意，jio_webview的具体API和用法可能会随着版本的更新而有所变化，因此请参考最新的官方文档或插件仓库的README文件以获取最准确的信息。如果jio_webview插件不再维护或存在兼容性问题，你也可以考虑使用更流行的webview_flutter插件。

回到顶部