Flutter Widget 最全使用介绍

Flutter widget 的设计思想跟 Android 略有不同，Flutter 中的 widget 可以用两条规则来约束：

• 一切都是 widget
• 每个 widget 只负责自己关注的部分

第一条意味着你所看到的东西都是由于 widget 构成，跟安卓不同的是，原本在安卓中一些参数相关的东西到了 Futter 中都被 widget 化，例如大小、背景、margin、padding 等等原本只需要一个参数设置的东西对应到 Flutter 中都映射成了 widget。
第二条的意思是，每个 widget 应该仅负责自己的职责所在，比如文本框 Text 组件，只负责如何显示一个文本，其他一概不管，不用考虑自己的大小、位置、margin 等等，这些由别的专门负责此功能的 widget 来控制。作为一个文本框就应该有文本框的觉悟。

举个栗子，我们希望显示一个文本时一个 Text 控件既可，但如果想控制它的大小、边距、位置这些属性就需要外面包一个 Container 来控制了。

关于如何安装 Flutter、创建项目等可以参照我的上一篇文章：
https://blog.csdn.net/u013872857/article/details/103016567

两种 Widget

Widget 总体上分为两种：StatelessWidget 和 StatefulWidget。
StatelessWidget 表示不可变的 widget，例如一些固定的标题、Icon 等等，widget 的特征不会在运行时发生变化。
StatefulWidget 相反，其属性可能会在运行时发生变化，例如进度条、输入框等等。
在使用上，StatelessWidget 会通过 build 方法创建一个不可变的 widget，这样 widget 只需要绘制一次。
我们在使用时直接继承它然后实现 build 方法既可。

class StatelessText extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Text("Stateless");
  }
}

而 StatefulWidget 中需要包含一个 State 对象来表现不同的状态，首先使用 createState 方法创建一个 State 对象，再通过 State 中的 build 方法创建一个 widget，后面每次状态变化时都会调用 build 方法重新绘制一个 widget。我们可以使用 setState 方法来触发 widget 更新。
这种使用起来也稍微麻烦点：

class EnableButton extends StatefulWidget {
  final bool enable;
  EnableButton(this.enable);
  @override
  State<StatefulWidget> createState() {
    return ButtonState(enable);//返回一个 State 对象
  }
}

class ButtonState extends State<EnableButton> {
  bool enable;
  ButtonState(this.enable);
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: (){
          setState(() {
            enable = !enable;
          });
        },
        child: Text(enable ? "Enable" : "Disable",