【flutter for open harmony】第三方库Flutter 鸿蒙版 图片加水印 实战指南（适配 1.0.0）✨

Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

本文详细介绍如何在Flutter鸿蒙应用中实现图片加水印功能，支持文字水印和位置调节。

一、前言

图片加水印是保护版权、标识来源的重要手段。本文将带领大家使用Flutter开发一个图片加水印应用。

二、效果展示

2.1 功能特性

功能	描述
文字水印	添加自定义文字水印
位置选择	支持5个位置选择
透明度调节	调节水印透明度
字体大小	调节水印字体大小

三、项目背景与目标

3.1 项目背景

在图片分享、版权保护等场景中，需要给图片添加水印。

3.2 项目目标

• 实现文字水印功能
• 支持位置和透明度调节
• 提供字体样式设置

四、技术架构设计

4.1 核心技术

• CustomPaint: 自定义绘制
• Stack: 层叠布局
• Positioned: 位置控制

4.2 实现原理

通过Stack和Positioned将水印文字叠加在图片上，支持多种位置和样式设置。

五、详细实现

5.1 Flutter端实现

import 'package:flutter/material.dart';

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

  @override
  State<ImageWatermarkPage> createState() => _ImageWatermarkPageState();
}

class _ImageWatermarkPageState extends State<ImageWatermarkPage> {
  String _watermarkText = 'Sample Watermark';
  String _position = 'bottomRight';
  double _opacity = 0.5;
  double _fontSize = 24;
  Color _textColor = Colors.white;

  Alignment get _alignment {
    switch (_position) {
      case 'topLeft': return Alignment.topLeft;
      case 'topRight': return Alignment.topRight;
      case 'center': return Alignment.center;
      case 'bottomLeft': return Alignment.bottomLeft;
      case 'bottomRight': return Alignment.bottomRight;
      default: return Alignment.bottomRight;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('图片加水印'),
        centerTitle: true,
        backgroundColor: Colors.cyan,
        foregroundColor: Colors.white,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Card(
              child: Container(
                width: double.infinity,
                height: 250,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [Colors.cyan[200]!, Colors.blue[200]!],
                  ),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Stack(
                  alignment: _alignment,
                  children: [
                    Opacity(
                      opacity: _opacity,
                      child: Container(
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.black45,
                          borderRadius: BorderRadius.circular(4),
                        ),
                        child: Text(
                          _watermarkText,
                          style: TextStyle(
                            fontSize: _fontSize,
                            color: _textColor,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 24),
            TextField(
              decoration: const InputDecoration(
                labelText: '水印文字',
                border: OutlineInputBorder(),
              ),
              onChanged: (value) {
                setState(() {
                  _watermarkText = value.isEmpty ? 'Sample Watermark' : value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

5.2 UI界面实现

UI采用Material Design 3风格，显示水印预览和设置选项。

六、核心功能解析

6.1 位置控制

通过Alignment控制水印位置：

Alignment get _alignment {
  switch (_position) {
    case 'topLeft': return Alignment.topLeft;
    case 'bottomRight': return Alignment.bottomRight;
    default: return Alignment.bottomRight;
  }
}

6.2 透明度调节

使用Opacity组件控制透明度：

Opacity(
  opacity: _opacity,
  child: Text(_watermarkText),
)

七、实际应用场景

• 版权保护：添加版权水印
• 品牌标识：添加品牌Logo
• 时间戳：添加拍摄时间

八、优化建议

1. 图片水印：支持添加图片水印
2. 批量处理：支持批量添加水印
3. 水印模板：保存常用水印模板

九、常见问题与解决方案

9.1 水印遮挡

问题：水印遮挡重要内容

解决方案：调整水印位置和透明度

9.2 导出质量

问题：导出图片质量下降

解决方案：使用高质量导出设置

十、总结

本文详细介绍了Flutter鸿蒙图片加水印的实现，包括位置控制、透明度调节等核心技术。通过本实例，掌握了图片处理和自定义绘制的使用方法。

十一、参考资料

• Flutter CustomPaint
• image插件