Flutter 中实现防止截图

原理#

ScreenshotPreventingView 是一个自定义的 UIView，其主要目的是防止其内部的内容被截屏或录屏捕获。

其实现原理主要利用了 UITextField 的 isSecureTextEntry 属性。当这个属性被设置为 true 时，系统会自动阻止其内容在截图和录屏中显示。

项目可以在 GitHub 找到。

创建隐藏的 `UITextField`#

在 ScreenshotPreventingView 中，初始化了一个不可见的 UITextField：textField
将 textField.isUserInteractionEnabled 设置为 false，以避免用户交互
textField 的背景色设置为透明

获取隐藏内容容器#

由于 UITextField 的结构在不同的 iOS 版本中有所不同，需要动态获取其内部用于展示文本的容器视图
使用 HiddenContainerRecognizer 结构体中的方法 getHiddenContainer(from:)，根据系统版本获取内部容器视图的类名
- >= iOS 15 为 _UITextLayoutCanvasView
- iOS 13 / 14 为 _UITextFieldCanvasView
- iOS 12 为 _UITextFieldContentView
通过过滤 textField 的子视图，找到匹配上述类名的视图，即 hiddenContentContainer

将自定义内容添加到容器中#

ScreenshotPreventingView 提供了一个可选的 contentView，用于容纳需要保护的自定义内容
使用 setup(contentView:) 方法，将 contentView 添加到 hiddenContentContainer 中
设置 contentView 的约束，使其填充整个容器视图

同步用户交互属性#

重写了 isUserInteractionEnabled 属性的 didSet 方法
当 isUserInteractionEnabled 被修改时，同步修改 hiddenContentContainer 的 isUserInteractionEnabled

控制截图防护开关#

提供了一个公共属性 preventScreenCapture
preventScreenCapture 导致 textField.isSecureTextEntry 跟随变动

延迟设置安全输入模式#

在 setupUI() 方法中，使用 DispatchQueue.main.async 将 preventScreenCapture 的默认值设置为 true
这是因为在视图初始化过程中，立即设置 isSecureTextEntry 可能无效，需要在主线程的下一个运行循环中设置

总结#

利用 UITextField 的 isSecureTextEntry 属性，系统会自动在截图或录屏时遮罩其内容。通过将自定义的内容视图添加到 UITextField 内部的特定子视图中，达到了保护自定义内容的目的。这种方法不涉及私有 API，具有较好的兼容性和安全性。

Flutter 实现#

创建 Flutter 插件#

创建一个 Flutter 插件，用于封装原生的 iOS 视图
在插件中，实现一个继承自 NSObject 和 FlutterPlatformViewFactory 的工厂类，用于生成原生视图

实现原生 iOS 视图#

在 iOS 平台代码中，创建一个自定义的 UIView，类似于 ScreenshotPreventingView
利用 UITextField 的 isSecureTextEntry 属性，防止视图内容被截图或录屏
将需要保护的内容添加到 UITextField 的内部容器中

注册 Platform View#

在插件的 registerWithRegistrar 方法中，注册自定义的 FlutterPlatformViewFactory
指定一个唯一的 viewTypeId，用于在 Flutter 端创建对应的 Widget

在 Flutter 中使用#

创建一个继承自 StatefulWidget 的类，封装对 Platform View 的使用
在 build 方法中，使用 UiKitView（对于 iOS）创建原生视图

ios/Classes/ScreenshotPreventingViewFactory.swift

1
import Flutter
2
import UIKit
3

4
public class ScreenshotPreventingViewFactory: NSObject, FlutterPlatformViewFactory {
5
    public func create(
6
        withFrame frame: CGRect,
7
        viewIdentifier viewId: Int64,
8
        arguments args: Any?
9
    ) -> FlutterPlatformView {
10
        return ScreenshotPreventingPlatformView(frame: frame)
11
    }
12
}

ios/Classes/ScreenshotPreventingPlatformView.swift

1
import Flutter
2
import UIKit
3

4
public class ScreenshotPreventingPlatformView: NSObject, FlutterPlatformView {
5
    private let _view: UIView
6

7
    init(frame: CGRect) {
8
        _view = ScreenshotPreventingView(frame: frame)
9
    }
10

11
    public func view() -> UIView {
12
        return _view
13
    }
14
}

ios/Classes/ScreenshotPreventingView.swift

1
import UIKit
2

3
public class ScreenshotPreventingView: UIView {
4
    private let textField = UITextField()
5
    private var hiddenContentContainer: UIView?
6

7
    override init(frame: CGRect) {
8
        super.init(frame: frame)
9
        setupUI()
10
    }
11

12
    required init?(coder aDecoder: NSCoder) {
13
        super.init(coder: aDecoder)
14
        setupUI()
15
    }
16

17
    private func setupUI() {
18
        textField.isSecureTextEntry = true
19
        textField.isUserInteractionEnabled = false
20
        textField.backgroundColor = .clear
21

22
        hiddenContentContainer = HiddenContainerRecognizer.getHiddenContainer(from: textField)
23

24
        guard let container = hiddenContentContainer else { return }
25

26
        addSubview(container)
27
        container.frame = bounds
28
        container.autoresizingMask = [.flexibleWidth, .flexibleHeight]
29

30
        // 添加需要保护的内容视图
31
        let contentView = UIView(frame: bounds)
32
        // 在 contentView 上添加需要展示的子视图
33
        container.addSubview(contentView)
34
    }
35
}

lib/screenshot_preventing_view.dart

1
import 'package:flutter/foundation.dart';
2
import 'package:flutter/material.dart';
3
import 'package:flutter/services.dart';
4

5
class ScreenshotPreventingView extends StatelessWidget {
6
  @override
7
  Widget build(BuildContext context) {
8
    if (defaultTargetPlatform == TargetPlatform.iOS) {
9
      return UiKitView(
10
        viewType: 'cn.lpkt.no_screenshot_view',
11
        creationParams: null,
12
        creationParamsCodec: const StandardMessageCodec(),
13
      );
14
    } else {
15
      // 非 iOS 平台的处理
16
      return Container();
17
    }
18
  }
19
}

ios/Classes/NoScreenshotView.swift

1
import Flutter
2
import UIKit
3

4
public class NoScreenshotView: NSObject, FlutterPlugin {
5
    public static func register(with registrar: FlutterPluginRegistrar) {
6
        let factory = ScreenshotPreventingViewFactory()
7
        registrar.register(factory, withId: "cn.lpkt.no_screenshot_view")
8
    }
9
}

原理#

创建隐藏的 UITextField#