如何使页面的背景半透明以在 Flutter 中显示上一个屏幕？

Posted 2023-03-06

【中文标题】如何使页面的背景半透明以在 Flutter 中显示上一个屏幕？

【英文标题】：How can I make the background of a page semi-transparent to show the previous screen in Flutter?

【发布时间】：2018-12-28 03:55:01

【问题描述】：

我正在尝试开发一个具有透明背景的屏幕，以显示前一个屏幕（导航堆栈上的前一个屏幕）。

这是我目前所拥有的。我试图通过将 Scaffold 的主体包裹在一个不透明对象中来调整它的不透明度，但这并没有影响背景的不透明度。通过使用屏幕而不是弹出栏或菜单，我可能会以错误的方式处理这个问题 - 我是 Flutter 的新手，可以使用一些指导和建议！谢谢！

return new Scaffold(
  body: new Opacity( // This controls the opacity of the buttons.
    opacity: 1.0,
    child: Column( 
      children: <Widget>[
        Row(
          children: <Widget>[
            _actionButton('email', '/home'), // _actionButton returns a rounded button with the route to push to the navigation stack.
            _actionButton('sms', '/smsRedirect'),
          ]
        ),
        Row(
          children: <Widget>[
            _actionButton('jira', '/jiraRedirect'),
            _actionButton('slack', '/slackRedirect')
          ]
        ),
        Row(
          children: <Widget>[
            _actionButton('override', '/override')
          ]
        ),
        Row(
          children: <Widget>[
            _exitButton() // _exitButton returns a button to return to the home screen.
          ]
        )
      ]
    )
  )
);

【参考方案1】：

当你推送一个页面时，它默认使用PageRouteBuilder，它有一个不透明的背景 - 请参阅the source。

很难从您的代码中准确判断您在做什么，但如果您尝试制作模态对话框，您最好使用showDialog 函数和a Dialog。

如果你绝对必须使用一个页面，这是可能的，但你必须基本上重写PageRouteBuilder 才能没有不透明的屏障。

【参考方案2】：

您需要创建一个自定义 PageRoute。看看这个 Stack Overflow 的答案，我想这就是你要寻找的：

Transparent PageRoute in Flutter for displaying a (semi-) transparent page