怎么用Flutter快速制作一个水印组件

本篇内容介绍了“怎么用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快速制作一个水印组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！