如何实现Scaffold.of()的高效用法？移除Builder简化代码

嘿，我完全懂你想去掉Builder嵌套、让代码更清爽的心情！官方文档说的拆分build函数方案其实很好上手，核心就是把需要调用Scaffold.of()的组件抽成独立的Widget类，这样它自动就能拿到Scaffold的子上下文，根本不需要Builder。

先搞懂为什么需要子上下文 #

Scaffold.of(context)的要求是：传入的context必须是Scaffold子树中的上下文。如果你直接在Scaffold所在的Widget的build方法里用当前context，这个context属于Scaffold的父级，自然找不到Scaffold实例——这就是为什么你之前直接用按钮函数、继承按钮都不行的原因。

原来的Builder写法（对比用） #

先看看你现在可能在用的代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SnackBar Demo')),
      body: Center(
        // 必须用Builder包裹才能拿到子上下文
        child: Builder(
          builder: (context) {
            return ElevatedButton(
              onPressed: () {
                Scaffold.of(context).showSnackBar(
                  SnackBar(content: Text('Hello SnackBar!')),
                );
              },
              child: Text('Show SnackBar'),
            );
          },
        ),
      ),
    );
  }
}

拆分Widget的优化写法 #

把按钮部分抽成一个独立的StatelessWidget，代码瞬间清爽：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SnackBar Demo')),
      body: Center(
        // 直接用抽出来的按钮，无需Builder
        child: _SnackBarButton(),
      ),
    );
  }
}

// 独立的按钮Widget，它的context是Scaffold的子上下文
class _SnackBarButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // 这里的context完全可用
        Scaffold.of(context).showSnackBar(
          SnackBar(content: Text('Hello SnackBar!')),
        );
      },
      child: Text('Show SnackBar'),
    );
  }
}

为什么这个方法有效？ #

因为_SnackBarButton是Scaffold子树里的一个独立Widget，它的build方法拿到的context属于这个子Widget本身，天然就在Scaffold的子树范围内，所以Scaffold.of(context)能顺利找到上层的Scaffold实例——原理和Builder完全一致，但代码结构更清晰，没有嵌套层级。

为什么你之前的尝试没成功？ #

• 用函数创建按钮：比如写个_buildButton(context)函数，传入的还是MyHomePage的context（Scaffold的父上下文），函数只是复用代码，不会生成新的上下文，所以依然找不到Scaffold。
• 继承ElevatedButton：如果只是简单继承而没有重写build逻辑，使用时还是在父Widget的上下文里调用，同样拿不到子上下文。除非像上面那样把它做成独立的Widget类，重写build时才会生成自己的上下文。

内容的提问来源于stack exchange，提问作者Sdlion