Flutter组件是从React中获得灵感后采用现代响应式框架构建的，其在构建UI时，将一切都看做组件。当组件状态发生改变时，组件会重构UI，Flutter会对比前后变化的不同，以最小的改动来进行重构UI。
1. 构建Flutter布局
Flutter布局机制的核心是组件。在Flutter中，将一切看做组件——甚至布局模型也可以说是组件。在Flutter应用程序中可以看到的如图像、图标以及文本都是组件，但我们看不到的也是组件如排列、约束、对齐、行以及列和网格。
我们可以通过组合组件来构建复杂的布局页面。例如简书App的底部切换选项卡，其显示五个图标，每个图标下方都有一个标签。
底部选项卡
我们将其做详细拆分后，可以看出，在一行中，有五列，每列包含一个图标和标签。
拆分底部选项卡
若要显示可视布局，需要设置debugPaintSizeEnabled为true。有关更多信息，参阅附录中的调试Flutter应用程序。
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled=true;
runApp(MyAppBar());
}
以下是该UI组件的树形结构图：
树形结构图
在组件中布置组件
- 选择布局小组件
根据我们需要的对齐或约束条件来选择布局组件中的组件，而这些特征通常会被传递到子组件中。
此示例使用Center将其内容水平和垂直居中。 - 创建可见组件
例如：创建一个Text组件：
Text('Hello World')
创建一个Image组件：
Image.asset(
'images/lake.jpg',
fit: BoxFit.cover
)
创建一个Icon组件：
Icon(
Icon.star,
color:Colors.red[500]
)
- 将可见组件添加到布局组件中
添加Text组件到Center组件中：
Center(
child: Text('Hello World')
)
- 将布局组件添加到页面中
Flutter应用程序本身也是一个组件，大多数组件都有一个build()方法。在应用程序中使用build()方法来实例化和返回组件并显示组件。
Material apps
对于Material应用程序，我们可以使用Scaffold组件；它提供默认横幅，背景颜色，并具有用于添加抽屉，提示信息，叠加层的API。然后我们可以将Center组件添加到Scaffold.body属性中。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: new Scaffold(
body: Center(
child: Text("Hello World"),
),
),
);
}
}
Material APP
Non-Material apps
对于没有使用Material的应用程序，我们可以将Center组件添加到应用程序的build()方法中。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Colors.white),
child: Center(
child: Text(
"Hello World",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 32,
color: Colors.black87
),
),
),
);
}
}
Non-Material APP
默认情况下，Non-Material应用程序中不包含AppBar，标题或背景颜色。若需要使用这些功能，则必须自己构建。
