Flutter 笔记: PopScope

1,519 阅读1分钟

在新版本中WillPopScope已经被抛弃了,现在更应该使用PopScope这个组件

示例代码:

  // 状态
  final popState = ValueNotifier(false);

  @override
  Widget build(BuildContext context) {
    final child = AnimatedBuilder(
      animation: popState,
      builder: (context, child) {
        return PopScope(
          canPop: popState.value,
          onPopInvoked: (didPop) {
            if (didPop) {
              return;
            }
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('更改状态才能退出,当前状态: ${popState.value}')));
          },
          child: ElevatedButton(
            child: Text('更改状态: ${popState.value}'),
            onPressed: () {
              popState.value = !popState.value;
              if (popState.value) {
                ScaffoldMessenger.of(context)
                    .showSnackBar(const SnackBar(content: Text('按下返回按钮退出。')));
              }
            },
          ),
        );
      },
    );

    final mapPop = ElevatedButton(
      onPressed: () {
        Navigator.maybePop(context);
        if (!popState.value) {
          ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('更改状态才能退出,当前状态: ${popState.value}')));
        }
      },
      child: const Text('系统返回和mayPop一样'),
    );

    final pop = ElevatedButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: const Text('pop()直接返回'),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('Foo page'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SizedBox.expand(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //...
            child,
            //...
            const SizedBox(height: 20),
            mapPop,
            const SizedBox(height: 20),
            pop,
          ],
        ),
      ),
    );
  }

PopScope抛弃异步,更加符合Flutter框架,官方描述说明是管理系统返回的组件,主要的一个用法是NavigatorPopHandler,这个组件为二级Navagator提供系统返回功能

代码地址:github