Flutter水印实例: 文本绘制与离屏渲染

封面图 • 2025-11-14 • Flutter

在 Flutter 中，实现水印（Watermark）通常可以通过 **文本绘制** 和 **离屏渲染（Offscreen Rendering）** 来完成。水印常用于在界面中添加半透明的文字或图案，以防止内容被非法复制或作为品牌标识。

下面是一个完整的 Flutter 水印实例，使用 `CustomPaint` 和 `Canvas` 进行文本绘制，并通过 `Offscreen` 渲染来提升性能（如在大量重复绘制时）。

---

## ✅ 实现目标

- 在界面上绘制一个半透明的水印文字
- 使用 `CustomPaint` 绘制文本
- 使用 `Offscreen` 渲染提高性能（可选）

---

## 🧾 示例代码：Flutter 水印（文本绘制 + 离屏渲染）

### 1. 创建一个自定义的 WatermarkWidget

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

class WatermarkWidget extends StatelessWidget {
  final String text;
  final double opacity;
  final double textSize;
  final Color color;

const WatermarkWidget({
    Key? key,
    required this.text,
    this.opacity = 0.2,
    this.textSize = 48,
    this.color = const Color.fromRGBO(0, 0, 0, 0.3),
  }) : super(key: key);

@override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: WatermarkPainter(
        text: text,
        opacity: opacity,
        textSize: textSize,
        color: color,
      ),
      size: MediaQuery.of(context).size,
    );
  }
}

class WatermarkPainter extends CustomPainter {
  final String text;
  final double opacity;
  final double textSize;
  final Color color;

WatermarkPainter({
    required this.text,
    required this.opacity,
    required this.textSize,
    required this.color,
  });

@override
  void paint(Canvas canvas, Size size) {
    final textStyle = TextStyle(
      color: color.withOpacity(opacity),
      fontSize: textSize,
      fontWeight: FontWeight.w300,
      fontFamily: 'Arial',
    );

final textSpan = TextSpan(text: text, style: textStyle);
    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );

// 计算文本尺寸
    textPainter.layout(maxWidth: size.width, minWidth: size.width);

// 绘制多个水印（横向和纵向）
    for (int x = -100; x < size.width + 100; x += 150) {
      for (int y = -100; y < size.height + 100; y += 150) {
        textPainter.paint(canvas, Offset(x.toDouble(), y.toDouble()));
      }
    }
  }

@override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
```

---

### 2. 在页面中使用 WatermarkWidget

```dart
import 'package:flutter/material.dart';
import 'watermark_widget.dart'; // 导入上面创建的 WatermarkWidget

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // 主内容
            Center(
              child: Text(
                '这是主界面内容',
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
            ),

// 水印层
            WatermarkWidget(
              text: 'Sample Watermark',
              opacity: 0.2,
              textSize: 48,
              color: Colors.grey,
            ),
          ],
        ),
      ),
    );
  }
}
```

---

## 📌 离屏渲染优化（可选）

如果你希望进一步优化性能，可以使用 `RepaintBoundary` 或 `Offscreen` 来进行离屏渲染：

### 使用 `RepaintBoundary` 包裹 WatermarkWidget

```dart
RepaintBoundary(
  child: WatermarkWidget(
    text: 'Sample Watermark',
    opacity: 0.2,
    textSize: 48,
    color: Colors.grey,
  ),
)
```

这会将水印作为一个独立的图层进行渲染，避免频繁重绘。

---

## ✅ 总结

| 功能 | 实现方式 |
|------|----------|
| 文本绘制 | `CustomPaint` + `TextPainter` |
| 半透明效果 | `Color.withOpacity()` |
| 离屏渲染 | `RepaintBoundary` |
| 多次绘制 | 循环绘制多个位置的水印 |

---

如果你想让水印支持旋转、渐变、图片等更复杂的样式，也可以进一步扩展这个类。

需要我帮你扩展成图片水印或动态水印吗？