写在前面

在学习Flutter之前，让我们先来一起了解其架构，及大致的工作原理

Framework：由Dart编写，提供用于处理动画，绘图和手势的基础库
Engine：由c/c++编写的Flutter引擎，包含Skia引擎，Dart运行环境，文字排版引擎等

Widget

在 Flutter 中，Widget 是构建用户界面的基本构建块。一个 Widget 可以是一个按钮、文本框、图像、布局或其他任何用户界面组件。Flutter 中的所有组件都是 Widget，并且 Widget 以层次结构的形式组合在一起，形成了用户界面。框架会逐一构建这些 widget，直到最底层的描述 widget 几何形状的RenderObject

总的来说，Flutter的渲染流程为：Widget -> Element -> RenderObject，RenderObject是最终给Flutter的渲染数据，他保存了大小位置等信息，Flutter通过它去绘制页面。

在开发过程中编写组件时，我们通常根据是否需要管理状态，将组件继承StatelessWidget或StatefulWidget

1、StatelessWidget（无状态）

组件继承StatelessWidget，通过build方法放回一个布局好的控件。

创建了就直接显示，无大小，色彩等属性在生命周期内保持不变
常见的有Container，ScorllView等

class MyTextWidget extends StatelessWidget {
  final String text;

  MyTextWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

2、StatefulWidget（有状态）

创建管理State，通过 State 的 build 方法去构建控件。

属性可以在其生命周期内发生变化
常见的有可以在其生命周期内发生变化实现一个简单的计数器 Widget，用于在用户点击按钮时增加计数器的值：

class MyCounterWidget extends StatefulWidget {
  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int count = 0;

  void _incrementCounter() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('You have clicked the button $count times'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Click Me!'),
        ),
      ],
    );
  }
}

布局

（1）布局创建

在各种layout widgets中选择一个布局widget
创建一个可见widget，并将其添加到布局widget
将布局widget添加到页面

（2）widgets布局

排列：Row/colum widget
对齐：mainAxisAlignmen和crossAxisAlignment控制对齐子项
调整大小：Expanded widget，调整widget的大小以适合行或列
组合：mainAxisSize设置为MainAxisSize.min，可将子项紧密组合在一起

（3）常用布局

标准widgets
- Container：类似css的盒模型
- GridView：可滚动网格
- ListView：可滚动列表
- Stack：将widget覆盖到另一个上
Material widgets
- Card：有圆角和阴影的盒子
- ListTitle：将最多三行的文本、可选的导语以及后面的图标组织在一行中

参考

Widgets 介绍 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

Flutter入门——从Widget到布局