Flutter - 自定义Widget

我们前面说过Flutter其实都是由widget构成的，那这节我们来看看怎么自定义一个widget呢？
首先我们先要来看下StatefulWidget和StatelessWidget。
这两个类是我们创建自定义Widget的基类。
从名字来看StatefulWidget就是动态的，StatelessWidget就是静态的，不需要做修改的。
这两个类暂且先了解下大概意思就成，后续的学习中我们会慢慢接触到。
我们在把上节课的Hello World代码拿出来看下:

import 'package:flutter/material.dart'; 

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

下来我们用自定义Widget来改写下看看。 首先先定义个App类继承于前面所说的StatelessWidget(因为只是显示文字，没别的操作，相当于静态的:

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

这是一个自定义组件的基本结构。我们来解释下上面的代码:

• 首先自定义Widget是要继承于前面所说的StatelessWidget
• 第二行override意思是下面的build方法会重写基类(StatelessWidget)里的build方法
• 第三行Widget的意思是build的返回值是Widget类型
• context参数是代表上下文，固定写法，记住就好
  基本结构有了，我们将显示文字的组件copy进基本结构里作为返回值即可，如下:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello World',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

最后将runApp里面的变为我们的App()就行，完整代码如下:

import 'package:flutter/material.dart'; //meterial 是一种设计风格

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello World',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

一个自定义Widget就这么形成了，谢谢！