如果你写过Flutter,你一定见过BuildContext。每个Flutter Widget都有一个@override build方法,接收一个BuildContext参数。对于StatelessWidget,是StatelessWidget.build;对于StatefulWidget,是对应的State.build。但是什么是BuildContext?你能拿它做什么?

可以看到BuildContext实际是个abstract class,光看类型无法得知实际传入的BuildContext是什么类型。

我们借助IDE,在任意一个Widget的build方法内打一个断点,通过查看堆栈,就能看到build方法的调用者,也就知道了BuildContext是怎么被传入的。简单来说,BuildContext就是Widget对应的Element。Stateless和Stateful Widget的BuildContext有所区别,但是原理差不多,我们以StatelessWidget为例进行讲解。

我们先看一下StatelessElement的代码,忽略无关代码后,非常简单:

class StatelessElement extends ComponentElement {
    StatelessElement(StatelessWidget widget) : super(widget);
 
    @override
    StatelessWidget get widget => super.widget as StatelessWidget;
    
    @override
    Widget build() => widget.build(this);
}

Flutter中Widget实际上是UI的“配置”或者“蓝图”,而Element则是对应的Widget实例。