Flutter快速制作一個(gè)水印組件實(shí)例詳解
正文
項(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)文章
Android動(dòng)態(tài)添加碎片代碼實(shí)例
這篇文章主要介紹了Android動(dòng)態(tài)添加碎片代碼實(shí)例,2019-06-06Android懸浮對話框(即點(diǎn)即關(guān)對話框)實(shí)現(xiàn)代碼
本文給大家介紹android懸浮對話框和即點(diǎn)即關(guān)閉對話框,本文介紹非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-03-03android使用OkHttp實(shí)現(xiàn)下載的進(jìn)度監(jiān)聽和斷點(diǎn)續(xù)傳
本篇文章主要介紹了android使用OkHttp實(shí)現(xiàn)下載的進(jìn)度監(jiān)聽和斷點(diǎn)續(xù)傳,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-02-02Android利用ConstraintLayout實(shí)現(xiàn)漂亮的動(dòng)畫詳解
最近在無意中看到一篇關(guān)于ConstraintLayout的文章,ConstraintLayout是Android Studio 2.2中主要的新增功能之一,下面這篇文章主要給大家介紹了關(guān)于Android利用ConstraintLayout實(shí)現(xiàn)漂亮的動(dòng)畫的相關(guān)資料,需要的朋友可以參考下。2017-05-05Android編程實(shí)現(xiàn)長按Button按鈕連續(xù)響應(yīng)功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)長按Button按鈕連續(xù)響應(yīng)功能,涉及Android自定義按鈕及事件響應(yīng)操作相關(guān)技巧,需要的朋友可以參考下2017-01-01Android基于訊飛語音SDK實(shí)現(xiàn)語音識(shí)別
本例子是一個(gè)調(diào)用訊飛語音識(shí)別SDK的例子源碼是一個(gè)最純凈的Demo比較容易看懂。實(shí)現(xiàn)的是點(diǎn)擊按鈕開始語音監(jiān)聽,手機(jī)需要聯(lián)網(wǎng),2/3G的均可,希望本文對大家學(xué)習(xí)Android有所幫助2016-06-06詳解Android應(yīng)用中使用TabHost組件進(jìn)行布局的基本方法
這篇文章主要介紹了Android應(yīng)用中使用TabHost組件進(jìn)行布局的基本方法,不繼承TabActivity并以最基本的布局文件方式進(jìn)行布局,需要的朋友可以參考下2016-04-04Android實(shí)現(xiàn)朋友圈評論回復(fù)列表
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)朋友圈評論回復(fù)列表,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Android實(shí)現(xiàn)ListView左右滑動(dòng)刪除和編輯
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)ListView左右滑動(dòng)刪除和編輯的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-05-05