Flutter WebView刷新功能插件webview_refresher的使用

Flutter WebView刷新功能插件webview_refresher的使用

Webview Refresher

在官方的WebView插件基础上添加下拉刷新功能。

安装

在pubspec.yaml文件中添加以下依赖：

flutter pub add webview_refresher

使用

首先，创建一个WebViewController实例，并定义onRefresh和finishRefresh方法。这些方法用于处理刷新逻辑。

final controller = WebViewController();
Completer<void>? _completer;

Future onRefresh() async {
  _completer = Completer<void>();
  if (await controller.currentUrl() == null) {
    await forward();
  } else {
    await controller.reload();
  }
  await _completer!.future;
}

finishRefresh() {
  if (_completer == null) return;
  if (!_completer!.isCompleted) {
    _completer?.complete();
  }
}

[@override](/user/override)
void initState() {
  super.initState();
  controller.setNavigationDelegate(NavigationDelegate(
    onPageFinished: (url) {
      finishRefresh();
    },
    onWebResourceError: (error) {
      finishRefresh();
    },
  ));
}

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Demo'),
      actions: [
        IconButton(
          onPressed: () {
            controller.loadRequest(Uri.parse('https://www.zhihu.com/'));
          },
          icon: const Icon(Icons.play_arrow_rounded),
        ),
      ],
    ),
    body: WebviewRefresher(
      controller: controller,
      onRefresh: onRefresh,
    ),
  );
}

完整示例

以下是完整的示例代码：

import 'dart:async';

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Webview Refresher Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final controller = WebViewController();
  Completer<void>? _completer;

  Future onRefresh() async {
    _completer = Completer<void>();
    if (await controller.currentUrl() == null) {
      await forward();
    } else {
      await controller.reload();
    }
    await _completer!.future;
  }

  finishRefresh() {
    if (_completer == null) return;
    if (!_completer!.isCompleted) {
      _completer?.complete();
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    controller.setNavigationDelegate(NavigationDelegate(
      onPageFinished: (url) {
        finishRefresh();
      },
      onWebResourceError: (error) {
        finishRefresh();
      },
    ));
  }

  Future<void> forward() async {
    await controller.loadRequest(Uri.parse('https://www.flutter.cn/'));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Webview Refresher Demo'),
        actions: [
          IconButton(
            onPressed: forward,
            icon: const Icon(Icons.play_arrow_rounded),
          ),
        ],
      ),
      body: WebviewRefresher(
        controller: controller,
        onRefresh: onRefresh,
      ),
    );
  }
}

更多关于Flutter WebView刷新功能插件webview_refresher的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter WebView刷新功能插件webview_refresher的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，如果你想在 WebView 中实现刷新功能，可以使用 webview_refresher 插件或者结合其他 WebView 插件（如 webview_flutter）来实现。webview_refresher 是一个专门用于 WebView 刷新功能的插件，它提供了一个下拉刷新的功能。

使用 webview_refresher 插件

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  webview_refresher: ^1.0.0  # 请查看 pub.dev 获取最新版本

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

2. 基本用法

接下来，你可以在你的 Flutter 应用中使用 WebViewRefresher 小部件来实现带有下拉刷新功能的 WebView。

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

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

class _MyWebViewState extends State<MyWebView> {
  late WebViewController _webViewController;

  Future<void> _refresh() async {
    // 刷新 WebView
    _webViewController.reload();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView with Refresh'),
      ),
      body: WebViewRefresher(
        onRefresh: _refresh,
        child: WebView(
          initialUrl: 'https://example.com',
          onWebViewCreated: (WebViewController webViewController) {
            _webViewController = webViewController;
          },
        ),
      ),
    );
  }
}

3. 代码解释

  • WebViewRefresher: 这是一个带有下拉刷新功能的容器，包裹了 WebView。
  • onRefresh: 当用户下拉刷新时，会触发这个回调函数。在这个回调函数中，我们调用 _webViewController.reload() 来刷新 WebView。
  • WebView: 这是 Flutter 官方提供的 WebView 组件，用于加载网页。

4. 其他注意事项

  • webview_refresher 插件主要提供了一个下拉刷新的功能，但实际的 WebView 功能仍然依赖于 webview_flutter 或其他 WebView 插件。
  • 确保你已经在 pubspec.yaml 中添加了 webview_flutter 依赖，因为 webview_refresher 依赖于它。

其他替代方案

如果你不想使用 webview_refresher，你也可以通过 webview_flutter 和 RefreshIndicator 来自定义一个下拉刷新功能。

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

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

class _MyWebViewState extends State<MyWebView> {
  late WebViewController _webViewController;

  Future<void> _refresh() async {
    // 刷新 WebView
    _webViewController.reload();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView with Refresh'),
      ),
      body: RefreshIndicator(
        onRefresh: _refresh,
        child: WebView(
          initialUrl: 'https://example.com',
          onWebViewCreated: (WebViewController webViewController) {
            _webViewController = webViewController;
          },
        ),
      ),
    );
  }
}
回到顶部