Flutter 移动应用开发 #2：自定义小部件（Widget）

Flutter 里面到处都是小部件（Widget），你要显示一行文字，用一个 Text 小部件。需要展示图像，需要用到 Image 小部件。需要一个能设置背景、尺寸、边距的容器，可以使用 Container 小部件。要添加一组并排显示的内容，要用的是 Row 小部件。需要一组竖排显示的内容，可以使用 Column 小部件。

小部件可以组合到一块儿用，一个小部件是可以是另一个小部件或者另一些小部件的爸爸，另一个小部件又可以有它自己的孩子或孩子们。有些小部件只能有一个孩子（child），比如 Container。还有些小部件可以有多个孩子（children），比如 Row 或者 Column。

不同类型的小部件都有各自的功能，它们里面都定义了一些属性还有方法，通过这些东西我们可以配置使用小部件。比如 Container 部件里可以使用 width 设置容器的宽度，或者使用 height 属性设置容器的高度，在它的 child 属性里面需要指定这个 Container 的孩子是谁。注意部件属性的值很多都是 double 类型的，比如你需要一个 100 宽的容器，这个 Container 的 width 应该设置成 80.0，而不是整数 80。

我们可以自由地创建自己需要的小部件，在这个自定义的小部件里面，你可以使用 Flutter 提供的现成的小部件，也可以使用你定义的其它的自定义的小部件。一个自定义的小部件就是一个 Class（类），一般这个类会继承 StatelessWidget 或者 StatefulWidget ，这里说的 State 指的就是数据。如果在你的小部件里需要处理修改 State，那你需要创建一个 StatefulWidget 。如果不需要处理修改 State，可以创建一个 StatelessWidget。

下面创建了一个叫 App 的小部件，它继承了 StatelessWidget，意思就是在这个小部件里面不需要修改数据：

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

StatelessWidget 是个抽象类，它需要让我们在类里面添加一个叫 build 的方法，这个方法返回的东西就是一个 Widget，也就是你的自定义的小部件。

之前我们直接在 runApp 里面用了一个 Center 小部件（在界面上显示 hello），现在可以把这个 Center 放在自定义的 App 小部件里面，让它作为 build 方法返回的东西，然后把 App 交给 runApp。像这样：

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 32.0,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

热加载

现在我们的应用就可以使用热加载功能了，试着修改一下 Text 小部件里的文件，保存文件以后，在模拟器上你会立即看到修改之后的效果。

文字看不懂，可以看视频，订阅宁皓网，就能在线学 Flutter 的视频课程了。

组合使用自定义小部件

现在我们创建了一个叫 App 的 Stateless 类型的小部件，它的 build 方法 return 的东西会在屏幕中间显示一个 hello。下面我们可以单独再创建一个叫 Hello 的小部件，然后可以让它作为 App 小部件的 build 方法 return 的东西。小部件可以单独放在一个文件里面，然后在想要使用这个小部件的地方，先导入它，就可以使用这个小部件了。

我们在 lib 下面新建一个 demo 目录，里面创建一个文件叫 hello_demo.dart，文件里面可以定义一个叫 Hello 的小部件，注意文件顶部先要导入 flutter 这个 package 里的 material。

lib/demo/hello_demo.dart

import 'package:flutter/material.dart';

class Hello extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 32.0,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

lib/main.dart

import './demo/hello_demo.dart';
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Hello();
  }
}

我们在 App 这个小部件里面组合使用了另一个自己定义的小部件 Hello，因为这个小部件是在一个单独的文件里定义的，所以使用它的时候需要先导入定义这个小部件的那个文件（hello_demo.dart）。

视频是最容易理解的，订阅宁皓网，在线学 Flutter 的视频课程了。