Question

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

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上添加alignment属性时，Container似乎会拉伸以填充父级，如下所示：

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

Answer 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)),
    ),
  ),
)

Flutter中的对齐属性容器

1 个答案: