Flutter入门|（二）Widget

Widget

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

给我的感觉，万物皆为Widget。Android xml中的layout是Widget，ViewGroup是Widget，View也是Widget…

一个最简单的Android app是在是在activity.main.xml中定义一个"hello world"；一个最简单的Flutter应用也是一样，只需一个widget即可！代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

runApp()方法类似于程序的入口，给定的是一个widget的根。一般这个widget都会指定一个无状态的StatelessWidget或者是有状态的StatefulWidget。
无状态的StatelessWidget只能用来展示信息，不能有动作（用户交互）;有状态的StatefulWidget可以通过改变状态使得 UI 发生变化，它可以包含用户交互。

按照Flutter中文网的学习引导，我们刚开始接触的Widget就是StatelessWidget和StatefulWidget，下面来做一个初步的讲解。

StatelessWidget

A widget that does not require mutable state.
译为：不需要可变状态的控件。

• Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的。
• StatelessWidget一共只有三个方法:

  // 构造方法
  const StatelessWidget({ Key key }) : super(key: key);
  
  // createElement方法复写Widget方法，一般不需要使用
  @override
  StatelessElement createElement() => StatelessElement(this);

  // 用户界面的构建，描述此控件显示到用户界面部分。
  @protected
  Widget build(BuildContext context);

StatelessWidget 的使用非常简单，我们只需要继承 StatelessWidget，然后实现 build 方法就可以了。 demo示例代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

StatefulWidget

A widget that has mutable state.
译为：具有可变状态的控件。

• Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:
  • 一个 StatefulWidget类。
  • 一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在。
• StatefulWidget一共只有三个方法:

  // 构造方法
  const StatefulWidget({ Key key }) : super(key: key);
  
  // createElement方法复写Widget方法，一般不需要使用
  @override
  StatefulElement createElement() => StatefulElement(this);

  // 在视图树中的给定位置为这个控件创建可变状态。
  @protected
  State createState();

StatefulWidget 用起来麻烦一些，它除了需要继承自StatefulWidget，还需要一个 State。demo示例代码如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new RandomWords(),
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

总结

从代码层面来看，貌似 StatelessWidget 与 StatefulWidget 差别不是很大，都是在 MyApp 的 build() 方法里返回一个Widget对象，只不过 StatefulWidget 需要额外设置实现一个 createState() 方法而已。实际上，两者的区别非常大。 StatelessWidget 整个生命周期里都不会改变，所以 build 方法只会执行一次。而 StatefulWidget 只要状态改变，就会调用 build() 方法重新创建 UI。