为什么列的 MainAxisAlignment 在颤振中具有不同的输出？

Question

我在“列”中使用 mainAxisAlignment: MainAxisAlignment.end, 将一些内容放置在屏幕底部。这工作正常。 我需要添加一张图片，这张图片也显示在屏幕底部，对齐和定位没有改变它。所以我把 Column 作为一个孩子放在另一列中，这允许我将图片放在一行中，并将其放在右上角。但是现在原始列的内容在屏幕中居中。我该怎么办？

应该是这样的： HomeScreenLayout

这是我的代码：

Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/Images/backgroundhomescreen.png'),
        fit: BoxFit.cover,
      ),
    ),
    child:Column(
      children: [
        Row(                                                    //Logo
            children: [
              Image(
                image: AssetImage('assets/Images/logo.png'),
                width: 120,
              ),
            ]
        ),
        Column(
          //crossAxisAlignment: CrossAxisAlignment.center,
          // mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[...

Answer 1

您可以使用 spacer widget

简单地在颤振中实现自定义间距

Answer 2

您可以将 crossAxisAlignment 设置为 CrossAxisAlignment.end 以将所有子项向右对齐或将 TopBox 小部件包装在 Align 中。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container( //Outer Container
      height: 900,
      width: 400,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.black,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
//           Align(
//           alignment: Alignment.centerRight,
//           child:  TopBox()
//             ,),
          TopBox(),
          Spacer(),
          BottomBox(),
        ],
      ),
    );
  }
}

class BottomBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 200,
    );
  }
}

class TopBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(15),
      color: Colors.blue,
      height: 100,
      width: 175,
    );
  }
}