您好,登錄后才能下訂單哦!
本篇內容介紹了“怎么用Flutter快速制作一個水印組件”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
水印組件,既然是組件,就是需要發(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方法的內容很簡單,無非是通過Stack進行堆疊布局,通過createWatermark方法創(chuàng)建水印,放置于子組件的上方。
核心內容就在于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)布局,將水印文本內容渲染在頁面中。當然,樣式可以隨喜愛而定,例如Transform.rotate設置傾斜角度,Color設置文本顏色等。
其中IgnorePointer組件是個重點。
它可以讓點擊事件穿透容器,直達下層。這樣一來即使水印疊加在最頂層,也不會影響到頁面手勢的操作。
IgnorePointer還有個同胞兄弟AbsorbPointer,它的作用與IgnorePointer相反,會消費掉點擊事件,使其無法穿透容器向下傳遞。
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, ), ), ), ), ), ), ), ), ), ), ); } }
“怎么用Flutter快速制作一個水印組件”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。