制作网站的钱,淘金网站建设,网站seo推广营销,wordpress 制作单页随着版权意识的加强#xff0c;越来越多的应用开始在应用内部增加各种各样的水印信息#xff0c;防止核心信息泄露#xff0c;便于朔源。 效果如下#xff1a;
在Flutter中增加全局水印的方式#xff0c;目前有两种实现。 方案一#xff0c;在native层添加一个遮罩层越来越多的应用开始在应用内部增加各种各样的水印信息防止核心信息泄露便于朔源。 效果如下
在Flutter中增加全局水印的方式目前有两种实现。 方案一在native层添加一个遮罩层但这种方式需要双端都要开发效率低下维护成本高优点当然也有那就是性能高。 方案二直接在Flutter中添加一个悬浮层实现企微飞书等界面的水印效果就如上图中的效果一样。 为了凸显Flutter的高效当然是直接使用Flutter中的Api进行实现。
第一步创建所需的水印样式
import dart:math;import package:flutter/material.dart;class WaterMarkWidget extends StatelessWidget {final int rowCount;//控制每一行显示的水印个数final int columnCount;//控制每一列显示的个数final String text;//水印文案const WaterMarkWidget({Key? key,this.rowCount 2,this.columnCount 3,required this.text,}) : super(key: key);overrideWidget build(BuildContext context) {return IgnorePointer(//这个很关键一定要忽略焦点事件child: SafeArea(child: Padding(padding: const EdgeInsets.only(top: 50),child: Column(children: createColumnWidgets(),),),),);}ListWidget createRowWidgets() {ListWidget list [];for (var i 0; i rowCount; i) {final widget Expanded(child: Center(child: Transform.rotate(angle: -pi / 4.5,child: Opacity(opacity: 0.2,child: Text(text,style: const TextStyle(fontSize: 12,color: Colors.blue,),),),),),);list.add(widget);}return list;}ListWidget createColumnWidgets() {ListWidget list [];for (var i 0; i columnCount; i) {final widget Expanded(child: Row(children: createRowWidgets(),));list.add(widget);}return list;}
}
在这段代码中核心要注意的是增加焦点忽略不然就会出现焦点抢占的问题。
第二步创建一个水印管理工具类
主要使用了OverlayEntry的特性动态添加与删除。
import package:flutter/material.dart;class GlobalWaterMarkUtil {static final GlobalWaterMarkUtil _singleton GlobalWaterMarkUtil._internal();factory GlobalWaterMarkUtil() {return _singleton;}GlobalWaterMarkUtil._internal();OverlayEntry? _overlayEntry;/// 添加自定义水印。将[widget]覆盖在所有视图的最上层void addCustomWatermark(BuildContext context, Widget widget) {_overlayEntry?.remove();OverlayState? overlayState Overlay.of(context);_overlayEntry OverlayEntry(builder: (context) widget);overlayState.insert(_overlayEntry!);}/// 移除水印Futurevoid removeWatermark() async {if (_overlayEntry ! null) {_overlayEntry?.remove();_overlayEntry null;}}
}
工具类内容简单主要用于添加和删除OverlayEntry毕竟不是所有界面都需要添加水印。
第三步在需要的界面增加水印
class _MyHomePageState extends StateMyHomePage with WidgetsBindingObserver {GlobalWaterMarkUtil waterMarkUtil GlobalWaterMarkUtil();overridevoid initState() {super.initState();addGlobalWatermark();}///添加全局水印void addGlobalWatermark(){WidgetsBinding.instance.addPostFrameCallback((timeStamp) {waterMarkUtil.addCustomWatermark(context,WaterMarkWidget(text: Hello Flutter \n ${DateTime.now()},));});}overridevoid dispose() {waterMarkUtil.removeWatermark();super.dispose();}}经过这简单的三步即可实现全局水印的效果在使用时一定要记得在dispose中调用移除函数不然容易出现水印重叠的效果如果是针对整个App添加水印那只需要在Flutter的HomePage里面添加一次即可因为HomePage永远在栈底所以水印将一直悬浮在所有页面之上。
