Flutter Widget 之Align

可以组成widget的能力是Flutter其中一个最强大的特色。

但你能如何具体说明一个child应如何置放或安置在其parent中呢？

例如，若你有个Container widget，

你能如何选择Text widget在它内部的哪边出现呢？

Container(
    child: Text('Hello!'),
);

最简单的方法是用Center widget将它置放在中间。

Container(
    child: Center(
        child: Text('Hello!'),
    ),
);

但比如说，如果你想把它置放在右下角呢？

这就是Align widget很好用的时候。

Container(
    child: Align(
        alignment: Alignment.bottomRight,
        child: Text('Hello!'),
    ),
);

Align能让你在widget的父widget明确的位置中将其置放，

例如，bottomRight或topLeft或centerRight 任何你喜欢的位置。

你也可以具体说明校准value 从左到右以及上到下的 范围是从-1至1.

这能让你将子 widget精准地置放在其父widget中。

Container(
    child: Alignment(
        Alignment: Alignment(-0.75, -0.75),
        child: Text('Hello!'),
    ),
)

Container(
    child: Alignment(
        Alignment: Alignment(0.00, 0.00),
        child: Text('Hello!'),
    ),
)

Container(
    child: Alignment(
        Alignment: Alignment(1.00, 0.50),
        child: Text('Hello!'),
    ),
)

Container(
    child: Alignment(
        Alignment: Alignment(1.60, -0.80),
        child: Text('Hello!'),
    ),
)

Container(
    child: Alignment(
        Alignment: Alignment(-0.40, 0.90),
        child: Text('Hello!'),
    ),
)

你也可以用Align来将widget叠起来。

Stack(
    childern: [
        Align(
            alignment: Alignment(0.0, 0.0),
            child: Text('Hello!'),
        ),
    ],
);

如果想了解有关Align的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址