Flutter快速制作一個水印組件實例詳解

更新時間：2023年01月30日 15:43:40 作者：半點橘色

這篇文章主要為大家介紹了Flutter快速制作一個水印組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

項目開發(fā)的過程中，經(jīng)常會遇到添加水印的需求，其作用無非就是防止重要信息通過截圖外傳。（雖然我覺得并沒有什么卵用，但領(lǐng)導(dǎo)的需求是不容質(zhì)疑的）

那么，作為一線碼農(nóng)的我，也只能屁顛屁顛的開搞。

通過child屬性將水印疊加給子組件

水印組件，既然是組件，就是需要發(fā)揚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屬性一般情況是獲取登錄用戶信息進行動態(tài)寫入，在demo中就寫死了。

build方法的內(nèi)容很簡單，無非是通過Stack進行堆疊布局，通過createWatermark方法創(chuàng)建水印，放置于子組件的上方。

createWatermark方法

核心內(nèi)容就在于createWatermark方法。

  /// 創(chuàng)建水印
  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,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

創(chuàng)建水印可以通過橫向（Row）和縱向（Column）布局，將水印文本內(nèi)容渲染在頁面中。當然，樣式可以隨喜愛而定，例如Transform.rotate設(shè)置傾斜角度，Color設(shè)置文本顏色等。

其中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(),
      ],
    );
  }
  /// 創(chuàng)建水印
  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,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

是不是很簡單？

水印組件的核心就是這么簡單，大家可以在此基礎(chǔ)上，結(jié)合項目的需求進行拓展開發(fā)。

以上就是Flutter快速制作一個水印組件實例詳解的詳細內(nèi)容，更多關(guān)于Flutter制作水印組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: