第一章●第四节：组件介绍<01>

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，标题或背景颜色。若需要使用这些功能，则必须自己构建。

---

总目录结构