Flutter快速制作一个水印组件实例详解
更新时间：2023年01月30日 15:43:40 作者：半点橘色
这篇文章主要为大家介绍了Flutter快速制作一个水印组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
项目开发的过程中，经常会遇到添加水印的需求，其作用无非就是防止重要信息通过截图外传。（虽然我觉得并没有什么卵用，但领导的需求是不容质疑的）
那么，作为一线码农的我，也只能屁颠屁颠的开搞。
通过child属性将水印叠加给子组件
水印组件，既然是组件，就是需要发扬Flutter套娃的精神，通过child属性将水印叠加给子组件。
class Watermark extends StatelessWidget {
const Watermark({Key? key, required this.child}) : super(key: key);
final Widget child;
/// 水印信息
final String waterInfo = '半点橘色 6666';
@override
Widget build(BuildContext context) {
return Stack(
children: [
child,
_createWatermark(),
],
);
}
/// ....
}
waterInfo属性一般情况是获取登录用户信息进行动态写入，在demo中就写死了。
build方法的内容很简单，无非是通过Stack进行堆叠布局，通过createWatermark方法创建水印，放置于子组件的上方。
createWatermark方法
核心内容就在于createWatermark方法。
/// 创建水印
Widget _createWatermark() {
return IgnorePointer(
child: Column(
children: List.generate(
6,
(index) => Expanded(
child: Row(
children: List.generate(
3,
(index) => Expanded(
child: Center(
child: Transform.rotate(
angle: -0.34,
child: Text(
waterInfo,
style: const TextStyle(
color: Color(0x10000000),
fontSize: 14,
decoration: TextDecoration.none,
),
),
),
),
),
),
),
),
),
),
);
}
创建水印可以通过横向（Row）和纵向（Column）布局，将水印文本内容渲染在页面中。当然，样式可以随喜爱而定，例如Transform.rotate设置倾斜角度，Color设置文本颜色等。
其中IgnorePointer组件是个重点。
它可以让点击事件穿透容器，直达下层。这样一来即使水印叠加在最顶层，也不会影响到页面手势的操作。
IgnorePointer还有个同胞兄弟AbsorbPointer，它的作用与IgnorePointer相反，会消费掉点击事件，使其无法穿透容器向下传递。
Watermark组件的完整代码
import 'package:flutter/material.dart';
/// 水印组件
class Watermark extends StatelessWidget {
const Watermark({Key? key, required this.child}) : super(key: key);
final Widget child;
final String waterInfo = '半点橘色 6666';
@override
Widget build(BuildContext context) {
return Stack(
children: [
child,
_createWatermark(),
],
);
}
/// 创建水印
Widget _createWatermark() {
return IgnorePointer(
child: Column(
children: List.generate(
6,
(index) => Expanded(
child: Row(
children: List.generate(
3,
(index) => Expanded(
child: Center(
child: Transform.rotate(
angle: -0.34,
child: Text(
waterInfo,
style: const TextStyle(
color: Color(0x10000000),
fontSize: 14,
decoration: TextDecoration.none,
),
),
),
),
),
),
),
),
),
),
);
}
}
是不是很简单？
水印组件的核心就是这么简单，大家可以在此基础上，结合项目的需求进行拓展开发。
以上就是Flutter快速制作一个水印组件实例详解的详细内容，更多关于Flutter制作水印组件的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Android获取位置信息的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
当 flutter 的现有组件无法满足产品要求的UI效果时，我们就需要通过自绘组件的方式来进行实现了。本文章就来介绍如何用贝塞尔曲线实现一个带文本的波浪球，需要的可以参考一下2022-05-05
这篇文章主要介绍了Android 6.0调用相机图册崩溃的完美解决方案,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
在Android中使用gradient（渐变）通常是通过drawable文件来设置背景,下面是可以直接用的几种用法汇总,包括线性渐变、径向渐变、扫描渐变（sweep）等,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了 Android 全局异常捕获实例详解的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要为大家介绍了Android VNDK使用及原理深入探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
对于对话框风格大家普遍使用PopupWindow,也有许多朋友开发设计时使用的是activity对话框方式，因此，本文对如何通过activity实现与PopupWindow相同的效果进行详细介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
Android 使用Vitamio打造自己的万能播放器（2）—— 手势控制亮度、音量、缩放
本文主要介绍Android Vitamio插件的一些功能,这里主要介绍 Android Vitamio插件的手势控制亮度,音量,缩放的功能,并提供代码实例,有需要的小伙伴可以参考下2016-07-07
本篇文章主要介绍了Android视频压缩的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Jetpack Compose是用于构建原生Android UI的现代工具包。Jetpack Compose使用更少的代码，强大的工具和直观的Kotlin API，简化并加速了Android上的UI开发。本文将利用Jetpack Compose绘制可爱的天气动画，感兴趣的可以了解一下2022-01-01
最新评论