文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-07-05 02:08

关注

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯