微信交流群

# Builder

官方介绍A platonic widget that calls a closure to obtain its child widget,直接翻译是:

调用闭包以获取其子小部件的小部件

嗯...,反正只看介绍和翻译看不懂,下面来说下Builder能干什么吧。

基础用法:

Builder(
  builder: (BuildContext context){
    return Container();
  },
)
1
2
3
4
5

Builder中有一个builder,返回一个Widget即可,那和直接使用Container有什么区别吗?

答案肯定是有的,用处主要体现在context上。

# 使用场景一

看下这个异常信息:Scaffold.of() called with a context that does not contain a Scaffold,这个异常学习Flutter的过程中会经常遇到,原因就是当前的context没有包含在Scaffold控件中,比如下面的写法就会出现此异常:

class HomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('老孟'),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.pink,
          textColor: Colors.white,
          onPressed: _displaySnackBar(context),
          child: Text('show SnackBar'),
        ),
      ),
    );
  }
}

_displaySnackBar(BuildContext context) {
  final snackBar = SnackBar(content: Text('老孟'));
  Scaffold.of(context).showSnackBar(snackBar);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用Build解决此问题:

Scaffold(
    appBar: AppBar(
        title: Text('老孟'),
    ),
    body: Builder(
        builder: (context) => 
            Center(
            child: RaisedButton(
            color: Colors.pink,
            textColor: Colors.white,
            onPressed: () => _displaySnackBar(context),
            child: Text('老孟'),
            ),
        ),
    ),
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 使用场景二

自定义事件分发,代码如下:

NotificationListener<CustomNotification>(
  onNotification: (CustomNotification notification) {
    print('介绍事件——2:${notification.value}');
    return false;
  },
  child: Center(
    child: RaisedButton(
      child: Text('发送'),
      onPressed: () {
        CustomNotification('自定义事件').dispatch(context);
      },
    ),
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

此时点击按钮并不会分发事件,修改如下:

NotificationListener<CustomNotification>(
  onNotification: (CustomNotification notification) {
    print('介绍事件——2:${notification.value}');
    return false;
  },
  child: Center(
    child: Builder(
      builder: (context) {
        return RaisedButton(
          child: Text('发送'),
          onPressed: () {
            CustomNotification('自定义事件').dispatch(context);
          },
        );
      },
    ),
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

只需在RaisedButton外面包裹Builder即可,为什么会出现此问题?

因为没有Builder的context表示当前整个控件的context,其上并没有NotificationListener监听,而加上Builder后,context表示Builder控件,其上有NotificationListener监听