由 ScaffoldMessenger 管理的 SnackBars
概述
#Scaffold
中的 SnackBar
API 现在由 ScaffoldMessenger
处理,其中一个默认在 MaterialApp
的上下文中可用。
背景
#在此更改之前,SnackBar
会通过在当前 BuildContext
中调用 Scaffold
来显示。通过调用 Scaffold.of(context).showSnackBar
,当前的 Scaffold
会将 SnackBar
动画显示出来。这仅适用于当前的 Scaffold
,并且如果 SnackBar
显示过程中路由发生变化,它将不会在路由之间保持。如果在执行异步事件过程中调用 showSnackBar
,并且 BuildContext
因路由更改和 Scaffold
被销毁而失效,这也会导致错误。
ScaffoldMessenger
现在处理 SnackBar
以便在路由之间保持并始终显示在当前的 Scaffold
上。默认情况下,一个根 ScaffoldMessenger
包含在 MaterialApp
中,但您可以为 ScaffoldMessenger
创建自己的受控范围,以进一步控制哪些 Scaffold
接收您的 SnackBar
。
变更说明
#以前的方法是调用 Scaffold
来显示 SnackBar
。
Scaffold(
key: scaffoldKey,
body: Builder(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: const Text('snack'),
duration: const Duration(seconds: 1),
action: SnackBarAction(
label: 'ACTION',
onPressed: () { },
),
));
},
child: const Text('SHOW SNACK'),
);
},
)
);
新方法调用 ScaffoldMessenger
来显示 SnackBar
。在这种情况下,不再需要 Builder
来提供一个“在”Scaffold
下方的、带有 BuildContext
的新范围。
Scaffold(
key: scaffoldKey,
body: GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: const Text('snack'),
duration: const Duration(seconds: 1),
action: SnackBarAction(
label: 'ACTION',
onPressed: () { },
),
));
},
child: const Text('SHOW SNACK'),
),
);
在过渡期间呈现 SnackBar
时,SnackBar
会完成一个 Hero
动画,平滑地移动到下一页。
ScaffoldMessenger
创建了一个范围,其中所有后代 Scaffold
都注册以接收 SnackBar
,这就是它们在这些过渡中保持的原因。当使用 MaterialApp
提供的根 ScaffoldMessenger
时,所有后代 Scaffold
都会收到 SnackBar
,除非在树的更深处创建了新的 ScaffoldMessenger
范围。通过实例化您自己的 ScaffoldMessenger
,您可以根据应用程序的上下文控制哪些 Scaffold
接收 SnackBar
,哪些不接收。
方法 debugCheckHasScaffoldMessenger
可用于断言给定上下文具有 ScaffoldMessenger
祖先。尝试在没有 ScaffoldMessenger
祖先的情况下呈现 SnackBar
会导致以下断言:
No ScaffoldMessenger widget found.
Scaffold widgets require a ScaffoldMessenger widget ancestor.
Typically, the ScaffoldMessenger widget is introduced by the MaterialApp
at the top of your application widget tree.
迁移指南
#迁移前的代码
// The ScaffoldState of the current context was used for managing SnackBars.
Scaffold.of(context).showSnackBar(mySnackBar);
Scaffold.of(context).hideCurrentSnackBar(mySnackBar);
Scaffold.of(context).removeCurrentSnackBar(mySnackBar);
// If a Scaffold.key is specified, the ScaffoldState can be directly
// accessed without first obtaining it from a BuildContext via
// Scaffold.of. From the key, use the GlobalKey.currentState
// getter. This was previously used to manage SnackBars.
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
Scaffold(
key: scaffoldKey,
body: ...,
);
scaffoldKey.currentState.showSnackBar(mySnackBar);
scaffoldKey.currentState.hideCurrentSnackBar(mySnackBar);
scaffoldKey.currentState.removeCurrentSnackBar(mySnackBar);
迁移后的代码
// The ScaffoldMessengerState of the current context is used for managing SnackBars.
ScaffoldMessenger.of(context).showSnackBar(mySnackBar);
ScaffoldMessenger.of(context).hideCurrentSnackBar(mySnackBar);
ScaffoldMessenger.of(context).removeCurrentSnackBar(mySnackBar);
// If a ScaffoldMessenger.key is specified, the ScaffoldMessengerState can be directly
// accessed without first obtaining it from a BuildContext via
// ScaffoldMessenger.of. From the key, use the GlobalKey.currentState
// getter. This is used to manage SnackBars.
final GlobalKey<ScaffoldMessengerState> scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();
ScaffoldMessenger(
key: scaffoldMessengerKey,
child: ...
)
scaffoldMessengerKey.currentState.showSnackBar(mySnackBar);
scaffoldMessengerKey.currentState.hideCurrentSnackBar(mySnackBar);
scaffoldMessengerKey.currentState.removeCurrentSnackBar(mySnackBar);
// The root ScaffoldMessenger can also be accessed by providing a key to
// MaterialApp.scaffoldMessengerKey. This way, the ScaffoldMessengerState can be directly accessed
// without first obtaining it from a BuildContext via ScaffoldMessenger.of. From the key, use
// the GlobalKey.currentState getter.
final GlobalKey<ScaffoldMessengerState> rootScaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();
MaterialApp(
scaffoldMessengerKey: rootScaffoldMessengerKey,
home: ...
)
rootScaffoldMessengerKey.currentState.showSnackBar(mySnackBar);
rootScaffoldMessengerKey.currentState.hideCurrentSnackBar(mySnackBar);
rootScaffoldMessengerKey.currentState.removeCurrentSnackBar(mySnackBar);
时间线
#首次发布版本:1.23.0-13.0.pre
稳定版本:2.0.0
参考资料
#API 文档
相关问题
相关 PR