Flutter中WebView阅读器模式实现方案咨询

嘿，这个需求我刚好折腾过！Flutter本身的原生WebView组件确实没有直接支持阅读器模式的配置，但借助第三方插件完全可以实现类似iOS的SFSafariViewController和Chrome的阅读器模式功能，下面分平台给你具体方案：

iOS端：模拟SFSafariViewController的阅读器模式 #

推荐使用flutter_inappwebview插件，它可以直接调用SFSafariViewController的原生属性，包括entersReaderIfAvailable。

代码示例： #

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

// 打开带阅读器模式的Safari视图
void openSafariWithReaderMode(String url) async {
  await SafariViewController.open(
    url: Uri.parse(url),
    settings: SafariViewControllerSettings(
      entersReaderIfAvailable: true, // 开启自动阅读器模式
      barCollapsingEnabled: true,
    ),
  );
}

这样配置后，只要网页支持阅读器模式，就会自动进入纯净的阅读界面，和原生SFSafariViewController的体验完全一致。

Android端：Chrome阅读器模式支持 #

同样可以用flutter_inappwebview插件，它支持Android Chrome的阅读器模式API，只需要在InAppWebView的设置里开启即可：

代码示例： #

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
  initialSettings: InAppWebViewSettings(
    readerModeEnabled: true, // 开启阅读器模式
  ),
)

当网页适配阅读器模式时，插件会自动切换到简洁的阅读视图，和Chrome浏览器的阅读器体验一致。

注意事项 #

• 首先需要在pubspec.yaml中添加flutter_inappwebview依赖，执行flutter pub get完成安装
• 阅读器模式的生效前提是网页本身支持该功能（比如大部分新闻类资讯网站都适配了）
• 如果不想用第三方插件，iOS端也可以通过原生通道（MethodChannel）直接调用原生的SFSafariViewController，但开发成本比用插件高很多

内容的提问来源于stack exchange，提问作者jRuMoL