关于程序员:flutter-中实现磨砂玻璃效果

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 多平台公布