欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter快速制作一個(gè)水印組件實(shí)例詳解

 更新時(shí)間:2023年01月30日 15:43:40   作者:半點(diǎn)橘色  
這篇文章主要為大家介紹了Flutter快速制作一個(gè)水印組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

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

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

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

水印組件,既然是組件,就是需要發(fā)揚(yáng)Flutter套娃的精神,通過child屬性將水印疊加給子組件。

class Watermark extends StatelessWidget {
  const Watermark({Key? key, required this.child}) : super(key: key);
  final Widget child;
  /// 水印信息
  final String waterInfo = '半點(diǎn)橘色 6666';
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        _createWatermark(),
      ],
    );
  }
  /// ....
}

waterInfo屬性一般情況是獲取登錄用戶信息進(jìn)行動(dòng)態(tài)寫入,在demo中就寫死了。

build方法的內(nèi)容很簡單,無非是通過Stack進(jìn)行堆疊布局,通過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)容渲染在頁面中。當(dāng)然,樣式可以隨喜愛而定,例如Transform.rotate設(shè)置傾斜角度,Color設(shè)置文本顏色等。

其中IgnorePointer組件是個(gè)重點(diǎn)。

它可以讓點(diǎn)擊事件穿透容器,直達(dá)下層。這樣一來即使水印疊加在最頂層,也不會(huì)影響到頁面手勢的操作。

IgnorePointer還有個(gè)同胞兄弟AbsorbPointer,它的作用與IgnorePointer相反,會(huì)消費(fèi)掉點(diǎn)擊事件,使其無法穿透容器向下傳遞。

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 = '半點(diǎn)橘色 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é)合項(xiàng)目的需求進(jìn)行拓展開發(fā)。

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

相關(guān)文章

最新評論