文本对齐底部将文本保持在屏幕顶部

debugcn 发表于 Dev

连续式

我已经将文本覆盖到图像上，并且我正在尝试使文本位于图像的底部。我尝试使用的不同变体，alignment: Alignment.bottom但是如果添加end它，只会将文本放在图像顶部的最右边，而不是底部：

               return new Column(
                  children: <Widget>[
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                              new Container(
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    color: Colors.pink[250],
                                    width: 7,
                                  ),
                                  borderRadius: BorderRadius.circular(9),
                                ),
                                  child: new Container(
                                    child: new Image.asset(dateIdeas[index]['Image']),
                                  ),
                              ),
                              Container(
                                alignment: Alignment.bottomCenter,
                                child: Text(dateIdeas[index]['Description'],
                                    style: TextStyle(
                                      fontSize: 30,
                                      color: Colors.white,
                                      fontFamily: 'IndieFlower',
                                    )),
                              ),
                          ],
                        ),
                      ],
                    )
                  ],
                );

我不确定我是否只是在这里缺少什么。

西达克

问题在于文本的容器宽度和高度与图像的宽度和高度不同。由于您使用Stack，因此请使用Positioned.fill小部件在图像上方创建一个与其大小相同的容器。

就像是：

Stack(
  children: <Widget>[
    Container(), // Your image here
    Positioned.fill(
      child: Container(), // Your text with alignment here
    ),
  ]
),

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。