Question

我想创建一个对话框，而不是使它后面的小部件变暗的通常的实质性方法，而是使它们模糊。所以本质上，我想知道是否有一种方法不仅可以模糊图像，而且可以模糊整个应用程序（或其一部分）

Answer 1

您可以使用BackdropFilter使图像实际模糊并放置使用下面的代码在上面覆盖白色。这里_value是滑块使用可以选择的值。对于前。 10.0

@override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    SystemChrome.setEnabledSystemUIOverlays([]);
    // TODO: implement build
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      body: new Stack(children: <Widget>[
        new PageView.builder(
          itemBuilder: (context, pos) {
            return new Stack(
               children: <Widget>[
                 new FadeInImage(
                   fit: BoxFit.cover,
                   placeholder: new CachedNetworkImageProvider(
                       widget.CatimgList[pos].thumb_img),
                   image: new CachedNetworkImageProvider(
                       widget.CatimgList[pos].image_large),
                 ),
                new BackdropFilter(
                   filter: new ImageFilter.blur(sigmaX: _value, sigmaY: _value),
                   child: new Container(
                     decoration: new BoxDecoration(
                         color: Colors.white.withOpacity(_value)),
                   ),
                 )
               ],
            );
      );
)

Answer 2

在BoxDecoration中使用opacity：

child: new Container(
    decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
),

Answer 3

如果您想要实际的模糊效果（而不仅仅是透明覆盖），则可以将BackdropFilter与ImageFilter.blur一起使用。

Answer 4

对于您而言，我们可以按以下顺序组合这些小部件：class HelpMenuController : UITableViewController { override func viewDidLoad() { super.viewDidLoad() self.splitViewController?.preferredPrimaryColumnWidthFraction= 0.3 self.splitViewController?.maximumPrimaryColumnWidth = 0.3 * UIScreen.main.bounds.width } ... }。

Stack > [Widget1ToBlur, Widget2ToBlur,... , Container > BackdropFilter]

This article将为您提供有关BackdropFilter的信息。

Answer 5

为了让bg全屏模糊，颜色略带灰色(bgColor - Color(0xffbfbfbf))：

class MyOverlay extends StatelessWidget {
@override
Widget build(BuildContext context) {
final blur = 6.0; // 1.0 - very subtle, 9.0 - very strong blur

return Container(
  alignment: Alignment.center,
  color: Theme.of(context).bgColor.withOpacity(0.5),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
    child: Container(
      height: double.infinity,
      width: double.infinity,
      padding: EdgeInsets.all(24),
      // example content - centered logo with text below
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
             logo,
              height: 200,
              width: 200,
            ),
            Text(
              TranslationKeys.logoText.tr(),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    ),
  ),
);

} }

颤动模糊叠加

5 个答案: