Flutter - 来自 WebViewScaffold 中显示的网页的电话呼叫

Posted 2023-02-23

【中文标题】Flutter - 来自 WebViewScaffold 中显示的网页的电话呼叫

【英文标题】：Flutter - Phone Call From Webpage Displayed in a WebViewScaffold

【发布时间】：2018-09-06 08:56:56

【问题描述】：

背景：我正在使用 WebViewScaffold (flutter webview plugin) 在我的颤振应用程序中打开一个网站。该网站有一个 call 选项，您可以在其中单击一个按钮并启动“tel://1231231234”网址。

问题：WebView显示网页不可用等 （类似于here 显示的问题）。 我需要它才能在 ios 和 android 上工作。如何在两个设备平台上使用 Flutter WebView 插件来实现这一点？

我见过几个人只在 Android 上使用 Intent（如上图所示的问题）而不使用 Flutter。这是平台特定代码的问题吗？

【参考方案1】：

为此做了一些锻炼。

WebviewScaffold(
   url: link,
   invalidUrlRegex: Platform.isAndroid
   ? "^tel:|^https:\/\/api.whatsapp.com\/send|^mailto:"
   : "^tel:|^mailto:",
)

在无效的正则表达式中添加了whatsapp，tel和mailto，因此WebviewScaffold将在onStateChanged捕获它们后中止操作

flutterWebviewPlugin.onStateChanged
    .listen((WebViewStateChanged state) async 
  if (mounted) 
    if (state.type == WebViewState.abortLoad) 
      _launchSocialNativeLink(state.url);
    
  
);

Future<void> _launchUrl(String url) async 
  if (await canLaunch(url)) 
    await launch(url);
   else 
    throw 'Could not launch $url';
  


Future<void> _launchSocialNativeLink(String url) async 
  if (Platform.isIOS) 
    if (url.contains("tel:")) 
      _launchUrl(URL);
    
   else if (Platform.isAndroid) 
    if (url.contains(":tel") ||
        url.contains("https://api.whatsapp.com/send")) 
      _launchUrl(URL);
    
  

【参考方案2】：

如Flutter Webview Plugin 的示例所示，您可以实现以下方法来更改 URL。

  _onUrlChanged = flutterWebviewPlugin.onUrlChanged.listen((String url) 
      if (mounted) 
        setState(() 
          _history.add("onUrlChanged: $url");
        );
    if(url.contains("tel"))
    //implement for condition
       
      
    );

您可以使用 Flutter 提供的 url launcher 包来实现所需的条件，它适用于 Android 和 iOS。希望对您有所帮助。

【讨论】：

我之前尝试过这个解决方案，这个解决方案的问题是 Webpage not available 消息停留在 WebView 中，为了使其正常工作，我必须将所有导航路线弹回主屏幕，然后推送网页路线。这是一个问题，因为用户在网页上失去了位置（也许可以通过保存状态修复）。不仅如此，这不是一个非常干净的解决方案。

那么你必须实现_onStateChanged，即当url开始加载时。试试这个if (state.type == WebViewState.startLoad) //implementation 。使用state.url访问网址

虽然我可以在网页开始加载时启动 url，但 网页不可用 页面仍会在 WebView 中加载。不知何故，我需要一种方法来防止/取消 url 在 WebView 中加载。