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

发布时间:2023-02-01 09:07:56 作者:iii
来源:亿速云 阅读:156

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

推荐阅读:
  1. Canonical为什么选择Flutter来构建未来的Ubuntu应用
  2. Flutter在Android平台上启动时,Native层做了哪些工作

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

flutter

上一篇:node后端路由自动加载怎么实现

下一篇:MyBatis Generator ORM层面的代码自动生成器怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》