Flutter快速制作一个水印组件实例详解

2024-10-28 12:14:48

正文

项目开发的过程中，经常会遇到添加水印的需求，其作用无非就是防止重要信息通过截图外传。（虽然我觉得并没有什么卵用，但领导的需求是不容质疑的）

那么，作为一线码农的我，也只能屁颠屁颠的开搞。

通过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制作水印组件的资料请关注我们其它相关文章！

Flutter使用 input chip 标签组件示例详解

目录前言正文类构造属性如何在 Dart 文件中实现代码全部代码结论前言这里有一些拥有属性的 chip,其中之一就是 input chip.input chip 通常用于以保守的结构处理客户端输入或向客户端提供想法.除了 label 和 avtar 之外,input chip 还可以有一个删除图标.在 Flutter 中,您可以利用 InputChip widget 制作这种 chip. InputChip 是一个 material widget ,它以保守的结构处理令人难以置信
Flutter组件生命周期和App生命周期示例解析

目录引言无状态组件(StatelessWidget) 有状态组件(StatefulWidget) StatefulWidget生命周期详细分析 1. createState 2. initState 3. didChangeDependencies 4. build 5. didUpdateWidget 6. deactivate 7. dispose 8. reassemble App生命周期结束语引言在Flutter开发中,所有的组件和页面都继承自Widget,所以探索页面的生命周
Flutter之TabBarView组件项目实战示例

目录 TabBarView TabBar TabBarView+项目实战 1 构建导航头部搜索框 2 构建导航头部TabBar 3 构建导航底部TabBarView容器 4 构建导航底部结构填充 5 构建导航底部结构轮播图 6 构建导航底部结构信息流总结 TabBarView TabBarView 是 Material 组件库中提供了 Tab 布局组件,通常和 TabBar 配合使用. TabBarView 封装了 PageView,它的构造方法: TabBarView({ Key? key,
Flutter控制组件显示和隐藏三种方式详解

目录方式一:if语句控制方式二:Offstage组件方式三: Visibility Offstage和Visibility的区别: 方式一:if语句控制 // 例如: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if(a=="显示") Text("显示"), Offstage( offstage: false, child: Text("显示"), ),
Flutter Widget开发之Focus组件图文详解

目录正文 FocusNode对象小部件树向上传送时会起到怎样的作用呢正文就网络和应用程序而言,键盘快捷键很重要,今天我们要谈的便是让这类快捷键得以在Flutter运作的小部件:Focus.Shortcuts和Action. 这套系统中的第一个小部件是Focus,小部件树中到处都有它的踪迹,包括按钮个文本输入在内之类的用户界面交互区块 FocusNode对象这个小部件还包含FocusNode对象 Focus({ FocusNode? node, Widget? child, }) : n
Flutter有状态组件StatefulWidget生命周期详解

目录 1.StatefulWidget的背后 2.StatefulWidget的生命周期 2.1创建阶段 2.2更新阶段 2.3销毁阶段总结: 1.StatefulWidget的背后 flutter开发过程中,我们经常会用到两个组件StatelessWidget和StatefulWidget.前者为无状组件,后者为有状态组件,无状态组件通常在创建后内部的数据无法改变,而有状态组件可以维持内部的数据状态,适合动态组件使用. /// 无状态组件的定义 class MyApp extends Sta
flutter text组件使用示例详解

目录正文 Text组件 Text组件构造器上的主要属性正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import
Flutter快速制作一个水印组件实例详解

目录正文通过child属性将水印叠加给子组件 createWatermark方法 Watermark组件的完整代码正文项目开发的过程中,经常会遇到添加水印的需求,其作用无非就是防止重要信息通过截图外传.(虽然我觉得并没有什么卵用,但领导的需求是不容质疑的) 那么,作为一线码农的我,也只能屁颠屁颠的开搞. 通过child属性将水印叠加给子组件水印组件,既然是组件,就是需要发扬Flutter套娃的精神,通过child属性将水印叠加给子组件. class Watermark extends
vue实现简单表格组件实例详解

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件按钮组件等等,vue三大核心组件路由状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说第一步:构建一个简单的vue项目,老规矩
vue组件编写之todolist组件实例详解

我们在topNav这个页面上插入一个todolist子组件我不知道怎么回事,这里的markdown的代码总是串行..所以代码看得不舒服,见谅啊,我最后会放github的源代码地址. 1. 父组件topNav中注册子组件,引入子组件 <template> <div> <p>下面这一行就是定义的组件名称</p> <todo-list></todo-list> <router-view></router-view>
Vue的事件响应式进度条组件实例详解

写在前面找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图以
Vuejs 单文件组件实例详解

在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非常明显了: 字符串模板:缺乏高亮,书写麻烦,特别是 HTML 多行的时候,虽然可以将模板写在 html 文件中,但是侵入性太强,不利于组件解耦分离. 不支持CSS:意味着当 HTML 和 JavaScript 组件化时,CSS明显被遗漏了没有构建步骤:限制只能使用 HTML 和 ES5 JavaScript,而不能使用
js中自定义react数据验证组件实例详解

我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');
对Python中TKinter模块中的Label组件实例详解

Python2.7.4 OS-W7x86 1. 简介 Label用于在指定的窗口中显示文本和图像.最终呈现出的Label是由背景和前景叠加构成的内容. Label组件定义函数:Label(master=None, cnf={}, **kw) 其中,kw参数是用来自定义lable组件的键值对. 2. 背景自定义背景的话,有三部分构成:内容区+填充区+边框 <1>内容区参数有:width,length用于指定区域大小,如果显示前景内容是文本,则以单个字符大小为单位:如果显示的是图像,则以像素为单
vue的toast弹窗组件实例详解

相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): 0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k) 1.一般都是多处使用 --需要解决每个页面重复引用+注册 1.一般都是跟js交互的 --无需在 <template> 里面写 <toast :show="true" text="弹窗消息
Django中的forms组件实例详解

Form介绍我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入的长度和格式等正不正确.如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误信息.. Django form组件就实现了上面所述的功能. 总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签对用户提交的数据进行校验保留上次输入内容先在应用目录下my_for
jquery.picsign图片标注组件实例详解

经过几天的尝试和学习,封装了自己的第一个js组件,有很多不足之处还请赐教. 因为一些业务需求,需要给图片添加一些标注,从网上找了一些但都不能满足需求,并且存在一些bug,坑太多因此就有想法自己封装一个,学习了其他类似组件的实现思路,以及js组件的开发思路,开发了jquery.picsign组件 jQuery图片标注组件(jquery.picsign) 在线演示:http://artlessbruin.gitee.io/picsign/ gitee:https://gitee.com/Artle

Flutter快速制作一个水印组件实例详解

目录

正文

通过child属性将水印叠加给子组件

createWatermark方法

Watermark组件的完整代码

相关推荐

随机推荐