Flutter 基础布局Align小部件的学习。一般来说，Align的使用都是其他控件的一个参数，目的是为了设置子child的对齐方式，比如居中，左上，右下等多个对齐方向，其本身用法也多灵活。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

Center(
 child: Container(
 t//宽高
 height: 120.0,
 width: 120.0,
 //颜色
 color: [50],
 //重头戏，布局组件
 child: Align(
 //顶部 右边对齐
 alignment: ,
 child: FlutterLogo(
 size: 60,
 ),
 ),
 ),
)

接下来我们看看构造函数吧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

const Align({
 Key key,
 this.alignment = ,
 this.widthFactor,
 this.heightFactor,
 Widget child
 })

alignment 设置对齐方向，使有多种使用方式： 比如：FractionalOffset(0.5, 0.5) == Alignment() == ，都是将子child居中对齐的控制方式 Alignment()表示矩形的中心。从到+的距离是矩形的一边到另一边的距离。 而Alignment中还可以这样使用对齐方式的控制，也是较为常用的使用方式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

如何对齐小部件

要将子窗口小部件在其父窗口中对齐，请使用该Align窗口小部件。如果您知道如何使用Center小部件，那么您是对的，因为Center这只是的特例Align。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

将您希望对齐的小部件与“对齐”小部件包装起来并设置其对齐属性。例如，这将使文本小部件与父级的右中间对齐。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

Align(
 alignment: Right,
 child: Text("widget"),
)

其他选项是文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

• Left
• Right

您不仅限于这些位置。您可以在任何位置对齐窗口小部件。通过指定x，y对，其中(0,0)是视图的中心，而边缘是围绕它的单位。也许图像会有所帮助：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

任何相对位置在哪里 (x,y)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

• 是 Alignment(, )
• 是 Alignment(0.0, )
• 是 Alignment(, )
• Left 是 Alignment(, 0.0)
• 是 Alignment(0.0, 0.0)
• Right 是 Alignment(, 0.0)
• 是 Alignment(, )
• 是 Alignment(0.0, )
• 是 Alignment(, )

请注意，图像中的对齐方式(x,y)不必在该范围内[-1, +1]。对齐(1,2)意味着它在小部件的右侧，在小部件的下方，高度又是其高度的一半。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

这是自定义对齐位置的示例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

Align(
 alignment: Alignment(0.7, -0.5),
 child: Text("widget"),
)

补充代码

这是用于制作以上示例的代码，以方便剪切和粘贴。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17795.html

import 'package:flutter/material.dart';

void main() =< runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 appBar: AppBar(),
 body: myLayoutWidget(),
 ),
 );
 }
}

Widget myLayoutWidget() {
 return Align(
 alignment: Alignment(0.7, -0.5),
 child: Text(
 "widget",
 style: TextStyle(fontSize: 30),
 ),
 );
}