新贵 Flutter （7）stateless widgets

flutter

在 Flutter 根据组件本身有无状态分为 StatelessWidget 和 StatefulWidget 两种组件。

在 Widget 中有表示结构元素的 button 或 menu 的 Widget，来有表示样式的 font 和 color，用于布局的 padding 的 Widget，也可以通过扩展现有的 Widget 创建自己 Widget。

 DecoratedBox(
   decoration: BoxDecoration(color: Colors.lightBlueAccent),
  child: Padding(padding: const EdgeInsets.all(8.0),child: Text('React'),),
  ),

DecoratedBox 让我们可以添加带有样式的 Box，通过给其颜色值来修改 DecoratedBox 的颜色，然后在 child 属性添加 Padding Widget 来包裹 Text Widget 来给 Text 添加一些内边距。这些组件在一起都形成一个组件组合。每一个组件都完整一个独立任务，达到了​职责单一。

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        title: 'my tut app',
        home: Scaffold(
          appBar: AppBar(
            title: Text("tuts"),
          ),
          body: Center(

            child:Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.lightBlueAccent),
                  child: Padding(padding: const EdgeInsets.all(8.0),child: Text('React'),),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.lightBlueAccent),
                  child: Padding(padding: const EdgeInsets.all(8.0),child: Text('Vue'),),
                ),
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.lightBlueAccent),
                  child: Padding(padding: const EdgeInsets.all(8.0),child: Text('Angular'),),
                ),
              ],
            )

          ),
        ));
  }
}

在可以在他们添加 SizeBox 来进行分隔，给出彼此间一定空隙。我们可以通过传入参数来控制 StatelessWidget

图

class TutTitle extends StatelessWidget{
​
  final String title;
​
  const TutTitle(this.title);
​
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DecoratedBox(
      decoration: BoxDecoration(color: Colors.lightBlueAccent),
      child: Padding(padding: const EdgeInsets.all(8.0),child: Text(title),),
    );
  }
}

我们可以通过 title 作为构造函数参数传入 StatelessWidget 来定义 Text 的内容，StatelessWidget 不会根据自身数据更改重新绘制​界面。

那么我们定义好的 Widget 又是如何绘制到界面上的，其实 Widget Tree 对应一个 Element Tree，Element 将 Widget 呈现到界面上​。每一个 Widget 都具有一个 Element 并会​创建一个 Element 的实例。

图

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

StatelessWidget 对应一个 StatelessElement ，当 StatelessWidget 绑定到 Widget Tree 就会调用上面的 createElement 方法来创建 StatelessElement，Flutter 启动后会查询 Element tree，而每一个 Element 都会有一个 Widget 的引用。

图

当调用 build 方法后就会一层一层将 Widget 绑定到 Widget Tree，同时 Element 也会一个接一个被创建后引用 Widget

图