flutter 中实现磨砂玻璃成果
前言
磨砂玻璃成果是一个很酷的用户界面概念，使咱们的用户界面看起来更有吸引力。它基本上是一个含糊的笼罩与缩小不透明度，以辨别或缩小某一观点。这个性能看起来的确不错，然而它会影响应用程序的性能。
注释
那么，让咱们看看如何在 Flutter 中实现磨砂玻璃成果。
编写代码
通过应用 BackdroFilter () widget 和 ImageFilter 类，能够非常容易地在 Flutter 中实现它。用于含糊图像、 container 或许多其余 widget 。它能够在 iOS 和 android 上运行。它用于突出须要更多焦点的内容，含糊须要较少焦点的内容。
创立一个 container 并应用 BackdroFilter 和 ClipRect 将其包装起来。当初增加背景滤镜的属性: ImageFilter.素，而后增加 sigmaX，sigmaY。SigmaX 和 sigmaY 越高，含糊度越高。
import 'dart:ui';import 'package:flutter/material.dart';class FrostedGlassLookDemo extends StatefulWidget { const FrostedGlassLookDemo({super.key}); @override @override_FrostedGlassLookDemoState createState() => _FrostedGlassLookDemoState();}class _FrostedGlassLookDemoState extends State<FrostedGlassLookDemo> { @override @overrideWidget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( elevation: 1, centerTitle: true, title: const Text("Frosted Glass Look Demo"), backgroundColor: Colors.blueGrey, ), body: Stack( children: [ Center( child: Container( height: MediaQuery.of(context).size.height / 3, width: MediaQuery.of(context).size.width / 1, decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), ), child: const FlutterLogo(), )), Center( child: ClipRect( child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: Container( height: MediaQuery.of(context).size.height / 3, width: MediaQuery.of(context).size.width / 1.5, decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), color: Colors.grey.shade200.withOpacity(0.5)), child: const Center( child: Text( "Glass Effect Container", style: TextStyle(fontSize: 15), )), ), ), ), ), ], ), ); }}输入成果
留神: 我将这个 widget 块重叠在一个 Image 上方，以查看工作成果。我用 Flutter 的标记作为一个图像。当初，咱们能够看到咱们的图像含糊成果。
结束语
如果本文对你有帮忙，请转发让更多的敌人浏览。
兴许这个操作只有你 3 秒钟，对我来说是一个激励，感激。
祝你有一个美妙的一天~
© 猫哥
- 微信 ducafecat
- https://wiki.ducafecat.tech
- https://video.ducafecat.tech
本文由mdnice多平台公布