Flutter控件——常用控件：StatelessWidget和Context

Posted 2022-06-16 wzj_what_why_how

StatelessWidget和Context

StatelessWidget

• StatelessWidget相对比较简单，它继承自widget类，重写了createElement()方法：

    @override
    StatelessElement createElement() => StatelessElement(this);
  

• StatelessWidget用于不需要维护状态的场景，它通常在build方法中通过嵌套其它 widget 来构建UI，在构建过程中会递归的构建其嵌套的 widget。

例子

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),
      ),
    );
  

上面的代码，实现了一个显示字符串的Echo widget 。

• 按照惯例，widget 的构造函数参数应使用命名参数，命名参数中的必需要传的参数要添加required关键字，这样有利于静态代码分析器进行检查
• 在继承 widget 时，第一个参数通常应该是Key。另外，如果 widget 需要接收子 widget ，那么child或children参数通常应被放在参数列表的最后。
• 同样是按照惯例， widget 的属性应尽可能的被声明为final，防止被意外改变。

然后我们可以通过如下方式使用它：

 Widget build(BuildContext context) 
  return Echo(text: "hello world");

---

Context

• build方法有一个context参数，它是BuildContext类的一个实例，表示当前 widget 在 widget 树中的上下文，
• 每一个 widget 都会对应一个 context 对象（因为每一个 widget 都是 widget 树上的一个节点）。
• 实际上，context是当前 widget 在 widget 树中位置中执行”相关操作“的一个句柄(handle)，
• 比如它提供了从当前 widget 开始向上遍历 widget 树以及按照 widget 类型查找父级 widget 的方法。

下面是在子树中获取父级 widget 的一个示例：

class ContextRoute extends StatelessWidget  
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Context测试"),
      ),
      body: Container(
        child: Builder(builder: (context) 
          // 在 widget 树中向上查找最近的父级`Scaffold`  widget
          Scaffold scaffold = context.findAncestorWidgetOfExactType<Scaffold>();
          // 直接返回 AppBar的title， 此处实际上是Text("Context测试")
          return (scaffold.appBar as AppBar).title;
        ),
      ),
    );