Flutter教程之Flutter 中的磨砂玻璃效果
生活随笔
收集整理的這篇文章主要介紹了
Flutter教程之Flutter 中的磨砂玻璃效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
磨砂玻璃效果是flutter中一個很酷的UI概念,讓我們的UI看起來更有吸引力。它基本上是一個具有降低不透明度的模糊疊加層,以區分或減少某個視圖。此功能看起來確實不錯,但它會影響應用程序的性能。
那么,讓我們看看如何在 Flutter 中實現磨砂玻璃效果。
通過使用 BackdropFilter() 小部件和 ImageFilter 類在顫振中實現非常容易。Flutter 中的 BackdropFilter() 小部件也用于模糊圖像、容器或許多其他小部件。它適用于 iOS 和 android。它用于突出需要更多關注的內容和模糊需要較少關注的內容。
創建一個容器并用 BackdropFilter 和 ClipRect 將其包裝起來。現在添加背景濾鏡的屬性,濾鏡:ImageFilter.blur,并添加sigma X,sigmaY。sigmaX 和 sigmaY 越高,模糊度越高。
Example Code -- // ignore_for_file: library_private_types_in_public_api import 'dart:ui'; import 'package:flutter/material.dart'; class FrostedGlassLookDemo extends StatefulWidget { const FrostedGlassLookDemo({super.key}); @override _FrostedGlassLookDemoState createState() => _FrostedGlassLookDemoState(); } class _FrostedGlassLookDemoState extends State<FrostedGla總結
以上是生活随笔為你收集整理的Flutter教程之Flutter 中的磨砂玻璃效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CSS3打造磨砂玻璃的背景
- 下一篇: c++实现磨砂玻璃(类似马赛克)效果