Flutter 实现背景高斯模糊并拦截手势

最新推荐文章于 2024-12-24 11:32:03 发布

原创

最新推荐文章于 2024-12-24 11:32:03 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #高斯模糊

本文介绍了如何在Flutter中使用BackdropFilter Widget实现背景高斯模糊效果，并通过在外部添加透明Container来拦截手势，防止穿透到底层组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter 实现背景高斯模糊并拦截手势

在flutter中可以通过一个Widget直接实现背景模糊效果：BackdropFilter

源码介绍如下（例子被我省略了，大家可以直接查看源码的时候去看一下）：

/// A widget that applies a filter to the existing painted content and then
/// paints [child].
///
/// The filter will be applied to all the area within its parent or ancestor
/// widget's clip. If there's no clip, the filter will be applied to the full
/// screen.

这边是我自己写的一个简单例子供大家参考：

import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:flutter/painting.dart';

class BackdropFilterPage extends StatefulWidget {
  @override
  _BackdropFilterPageState createState() {
    // TODO: implement createState
    return _BackdropFilterPageState();
  }
}

class _BackdropFilterPageState extends State<BackdropFilterPage> {
  bool isShow = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(