Flutter 中的模糊效果：实现毛玻璃效果

Flutter 中的模糊效果：实现毛玻璃效果

5 回复

使用BackdropFilter和BoxDecoration结合实现。

更多关于Flutter 中的模糊效果：实现毛玻璃效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以使用BackdropFilter和ImageFilter.blur实现毛玻璃效果。通过设置模糊半径，控制模糊程度。

在 Flutter 中实现毛玻璃效果，可以使用 BackdropFilter 和 ImageFilter.blur。以下是一个简单示例：

import 'package:flutter/material.dart';

class BlurEffectExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图片
          Image.asset('assets/background.jpg', fit: BoxFit.cover),
          // 毛玻璃效果
          Positioned.fill(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(color: Colors.white.withOpacity(0.1)),
            ),
          ),
        ],
      ),
    );
  }
}

BackdropFilter 使用 ImageFilter.blur 实现模糊效果，sigmaX 和 sigmaY 控制模糊程度。调整颜色和透明度可进一步优化效果。

使用BackdropFilter和BlurImage。

在Flutter中，可以通过BackdropFilter和ImageFilter.blur来实现毛玻璃效果。BackdropFilter是一个小部件，它可以将一个过滤器应用到其背景上，而ImageFilter.blur则用于创建模糊效果。

以下是一个简单的示例，展示如何在Flutter中实现毛玻璃效果：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              // 背景图片
              Image.network(
                'https://picsum.photos/500/500',
                fit: BoxFit.cover,
                width: double.infinity,
                height: double.infinity,
              ),
              // 毛玻璃效果
              Positioned.fill(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(
                    color: Colors.white.withOpacity(0.1),
                  ),
                ),
              ),
              // 内容
              Center(
                child: Text(
                  '毛玻璃效果',
                  style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码说明：

  1. 背景图片：使用Image.network加载一张网络图片作为背景。
  2. 毛玻璃效果：使用BackdropFilter包裹一个Container，并通过ImageFilter.blur设置模糊效果。sigmaX和sigmaY控制模糊的强度。
  3. 内容：在模糊层上方添加文本或其他内容。

关键点：

  • BackdropFilter需要包裹一个Container，并且通常设置color为半透明色以实现更好的视觉效果。
  • ImageFilter.blur的sigmaX和sigmaY值越大，模糊效果越强。

通过这种方式，你可以轻松在Flutter应用中实现毛玻璃效果。

回到顶部