概念

Flutter 中的 widget 的概念更广泛，它不仅可以表示 UI 元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector 、用于 APP 主题数据传递的 Theme 等等，而原生开发中的控件通常只是指 UI 元素。

避免绕晕，此时只需简单的认为 widget 就是前端框架中的组件，组件可以嵌套组件，widget 可以嵌套 widget，下文中讲到 “组件”、“控件” 时均指 widget。

Widget 抽象类

在下文中讲到的 StatelessWidget 、 StatefulWidget 类都是直接继承自 Widget 类，只需记住：

abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });

  final Key? key;
    
    ...
}

• 在 Widget 抽象类中定义了一个 key 属性，需要通过构造函数传递，而这个 key 的作用是决定是否在下一次 build 时复用旧的 widget ，决定的条件在 canUpdate() 方法中。

StatelessWidget 类（无状态）

简单说就是这个组件不会因为某个 data 的变化而变化，就是一个纯粹的静态组件。

class Echo extends StatelessWidget  {
  const Echo({
    Key? key,  
    required this.text,
    this.backgroundColor = Colors.grey, //默认为灰色
  }):super(key:key);
    
  final String text;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: backgroundColor,
        child: Text(text),
      ),
    );
  }
}

Context

可从中获取父组件的一些数据

class ContextRoute extends StatelessWidget  {
  const ContextRoute({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Context测试"),
      ),
      body: Builder(builder: (context){
       Scaffold? scaffold =  context.findAncestorWidgetOfExactType<Scaffold>();
       return (scaffold?.appBar as AppBar).title as Widget;
      }),
    );

  }

}