Flutter 中的 Alignment 属性容器答案

【问题标题】：Alignment Property Container in FlutterFlutter 中的 Alignment 属性容器
【发布时间】：2019-10-09 06:50:41
【问题描述】：

Alignment 属性在 Flutter 中的 Container 小部件中如何工作？我有以下代码在容器中没有对齐属性。

return GridTile(
                              child: Column(children: <Widget>[
                      Image.network(_workoutCategories[index].imageURL),
                      Container(  
                        color: const Color(0xffe67e22),
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: Text(_workoutCategories[index].name, style: TextStyle(color: Colors.white, fontSize: 24)),
                        ),
                      )
                  ]),
              );

结果如下：

当我在 Container 上添加对齐属性时，Container 似乎会拉伸以填充父级，如下所示：

我认为对齐属性仅用于对齐子小部件。到底是怎么回事？

【问题讨论】：

标签： flutter

【解决方案1】：

首先，您必须了解alignment 属性不是指Container 对齐，而是指它的子对齐。

想象一下，定义孩子的对齐方式的是它所接触的角。如果您将其对齐到左侧，孩子将触摸左角。但是，如果父级没有填满所有可用空间，则子级无法正确对齐，因为如果父级占用尽可能小的空间，则子级将触及父级的所有角落。这就是为什么 Container 在设置对齐时必须填充所有空间，否则孩子将无法遵守该对齐。

在您的情况下，如果您不希望橙色框填充所有空间并仍位于中心，则将其包装在另一个居中对齐的容器中：

Container(
  alignment: Alignment.center,
  Container(
    color: const Color(0xffe67e22),
    child: Padding(
      padding: const EdgeInsets.all(10.0),
      child: Text(_workoutCategories[index].name, style: TextStyle(color: Colors.white, fontSize: 24)),
    ),
  ),
)

【讨论】：

谢谢！是的，我考虑过使用 Center 小部件，但我想限制我使用的小部件的数量。
这总是一个好主意，但我想在这种情况下你别无选择。如果您认为此答案有用，请不要忘记将其标记为正确:)
绝对是！感谢您的帮助。