布局方法

重点

Flutter布局机制的核心就是widget。

在Flutter中，几乎所有东西都是一个widget - 甚至布局模型都是widget。

您在Flutter应用中看到的图像、图标和文本都是widget。

甚至你看不到的东西也是widget，例如行（row）、列（column）以及用来排列、约束和对齐这些可见widget的网格（grid）。

您可以通过构建widget来构建更复杂的widget。例如，下面左边的屏幕截图显示了3个图标，每个图标下有一个标签：

第二个屏幕截图显示布局结构，显示一个行包含3列，其中每列包含一个图标和一个标签。

注意: 本教程中的大多数屏幕截图都是在debugPaintSizeEnabled为true时显示的，因此您可以看到布局结构。

以下是此UI的widget树示意图：

大部分应该看起来应该像您所期望的，但你可能想了解一下Container（以粉红色显示）。

Container也是一个widget，允许您自定义其子widget。如果要添加填充，边距，边框或背景色，请使用Container来设置（译者语：只有容器有这些属性）。

在这个例子中，每个Text放置在Container中以添加边距。整个行也被放置在容器中以在行的周围添加填充。

本例UI中的其他部分也可以通过属性来控制。使用其color属性设置图标的颜色。

使用Text的style属性来设置字体，颜色，粗细等。列和行的属性允许您指定他们的子项如何垂直或水平对齐，以及应该占据多少空间。

布局一个 widget

重点是什么？

如何在Flutter中布局单个widget？本节介绍如何创建一个简单的widget并将其显示在屏幕上。它还展示了一个简单的Hello World应用程序的完整代码。

在Flutter中，只需几个步骤即可在屏幕上放置文本，图标或图像。

选择一个widget来保存该对象。根据您想要对齐或约束可见窗口小部件的方式，从各种布局widget中进行选择， 因为这些特性通常会传递到所包含的widget中。

这个例子使用Center，它可以将内容水平和垂直居中。

创建一个widget来容纳可见对象注意:Flutter应用程序是用Dart语言编写的。如果您了解Java或类似的面向对象编程语言，Dart会感到非常熟悉。

如果不了解的话，你可以试试 DartPad-一个可以在任何浏览器上使用的交互式Dart playground。 Dart 语言之旅是一篇介绍Dart语言特性的概述。

例如，创建一个Text widget:

new Text('Hello World', style: new TextStyle(fontSize: 32.0))

创建一个 Image widget:

new Image.asset('images/myPic.jpg', fit: BoxFit.cover)

创建一个 Icon widget:

new Icon(Icons.star, color: Colors.red[500])

将可见widget添加到布局widget.所有布局widget都有一个child属性（例如Center或Container），或者一个 children属性，如果他们需要一个widget列表（例如Row，Column，ListView或Stack）。将Text widget添加到Center widget：

new Center(
  child: new Text('Hello World', style: new TextStyle(fontSize: 32.0))

将布局widget添加到页面.Flutter应用本身就是一个widget，大部分widget都有一个build()方法。在应用程序的build方法中创建会在设备上显示的widget。 对于Material应用程序，您可以将Center widget直接添加到body属性中

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
      ),
    );
  }
}

注意: 在设计用户界面时，您可以使用标准widget库中的widget，也可以使用Material Components中的widget。 您可以混合使用两个库中的widget，可以自定义现有的widget，也可以构建一组自定义的widget。对于非Material应用程序，您可以将Center widget添加到应用程序的build()方法中：

// 这个App没有使用Material组件,  如Scaffold.
// 一般来说, app没有使用Scaffold的话，会有一个黑色的背景和一个默认为黑色的文本颜色。
// 这个app，将背景色改为了白色，并且将文本颜色改为了黑色以模仿Material app
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(color: Colors.white),
      child: new Center(
        child: new Text('Hello World',
            textDirection: TextDirection.ltr,
            style: new TextStyle(fontSize: 40.0, color: Colors.black87)),
      ),
    );
  }
}

请注意，默认情况下，非Material应用程序不包含AppBar，标题或背景颜色。 如果您想在非Material应用程序中使用这些功能，您必须自己构建它们。此应用程序将背景颜色更改为白色，将文本更改为深灰色以模仿Material应用程序。