重点是什么?
- Widgets 是用于构建UI的类.
- Widgets 用于布局和UI元素.
- 通过简单的widget来构建复杂的widget
Flutter布局机制的核心就是widget。在Flutter中，几乎所有东西都是一个widget - 甚至布局模型都是widget。您在Flutter应用中看到的图像、图标和文本都是widget。 甚至你看不到的东西也是widget，例如行（row）、列（column）以及用来排列、约束和对齐这些可见widget的网格（grid）。
您可以通过构建widget来构建更复杂的widget。例如，下面左边的屏幕截图显示了3个图标，每个图标下有一个标签：
第二个屏幕截图显示布局结构，显示一个行包含3列，其中每列包含一个图标和一个标签。
注意: 本教程中的大多数屏幕截图都是在debugPaintSizeEnabled为true时显示的，因此您可以看到布局结构。 有关更多信息，请参阅可视化调试，这是调试 Flutter Apps中的一节。
以下是此UI的widget树示意图：
大部分应该看起来应该像您所期望的，但你可能想了解一下Container（以粉红色显示）。 Container也是一个widget，允许您自定义其子widget。如果要添加填充，边距，边框或背景色，请使用Container来设置（译者语：只有容器有这些属性）。
在这个例子中，每个Text放置在Container中以添加边距。整个行也被放置在容器中以在行的周围添加填充。
本例UI中的其他部分也可以通过属性来控制。使用其color属性设置图标的颜色。使用Text.style属性来设置字体，颜色，粗细等。列和行的属性允许您指定他们的子项如何垂直或水平对齐，以及应该占据多少空间。
布局一个 widget
重点是什么？
- 即使应用程序本身也是一个 widget.
- 创建一个widget并将其添加到布局widget中是很简单的.
- 要在设备上显示widget，请将布局widget添加到 app widget中。
- 使用Scaffold是最容易的，它是 Material Components库中的一个widget，它提供了一个默认banner，背景颜色，并且具有添加drawer，snack bar和底部sheet的API。
- 如果您愿意，可以构建仅使用标准widget库中的widget来构建您的应用程序
如何在Flutter中布局单个widget？本节介绍如何创建一个简单的widget并将其显示在屏幕上。它还展示了一个简单的Hello World应用程序的完整代码。
在Flutter中，只需几个步骤即可在屏幕上放置文本，图标或图像。
1.选择一个widget来保存该对象。
根据您想要对齐或约束可见窗口小部件的方式，从各种布局widget中进行选择， 因为这些特性通常会传递到所包含的widget中。这个例子使用Center，它可以将内容水平和垂直居中。
2.创建一个widget来容纳可见对象
例如，创建一个Text widget:
Text(‘Hello World‘), 或者 new Text( ‘Hello World‘, style: new TextStyle(fontSize: 32.0,color: Colors.grey[500]),) )
创建一个 Image widget:
Image.asset( ‘images/lake.jpg‘, fit: BoxFit.cover, ), 或者 new Image.asset( ‘images/myPic.jpg‘, fit: BoxFit.cover, ),
创建一个 Icon widget:
Icon( Icons.star, color: Colors.red[500], ), 或者 new Icon( Icons.star, color: Colors.red[500] )
3.将可见widget添加到布局widget.
所有布局widget都有一个child属性（例如Center或Container），或者一个 children属性，如果他们需要一个widget列表（例如Row，Column，ListView或Stack）。
将Text widget添加到Center widget：
Center(
child: Text(‘Hello World‘),
),
或者
new Center(
child: new Text(
‘Hello World‘,
style: new TextStyle(fontSize: 32.0)
)
),
4.将布局widget添加到页面.
Flutter应用本身就是一个widget，大部分widget都有一个build()方法。在应用程序的build方法中创建会在设备上显示的widget。
对于Material应用程序，您可以使用Scaffold widget; 它提供默认横幅，背景颜色，and has API for adding drawers, snack bars, and bottom sheets。然后，您可以将Center widget直接添加到body主页的属性中。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter layout demo‘,
home: new Scaffold(
appBar: AppBar(
title: Text(‘Flutter layout demo‘),
),
body: Center(
child: Text(‘Hello World‘),
),
),
);
}
}
Note: 在设计用户界面时，您可以使用标准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应用程序。
好了! 当你运行这个应用时，你会看到:
Dart 代码 (Material app): main.dart
Dart 代码 (仅使用标准Widget的app): main.dart
原文地址：https://www.cnblogs.com/joe235/p/11130893.html