Flutter布局问题：底部图片未按Align定位至屏幕底部

问题原因 #

你代码里的Stack设置了alignment: Alignment.center，这个属性会强制所有未被Positioned包裹的子widget都居中显示。第二个Align组件虽然自身设置了alignment: Alignment.bottomCenter，但它作为Stack的子widget，会被Stack的居中规则定位到屏幕中心，内部的图片组自然也就跑到了中间，而非底部。

修复方案 #

方案1：移除Stack的alignment属性，让Align自行定位 #

去掉Stack的全局对齐设置，让每个Align独立控制子元素的位置：

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Stack(
      children: <Widget>[
        const Align(
          alignment: Alignment.center,
          child: Image(
            image: AssetImage("assets/imgs/logo.png"),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 40),
            child: Column(
              mainAxisSize: MainAxisSize.min, // 仅占用内容所需高度
              children: [
                SizedBox(
                  width: MediaQuery.of(context).size.width / 2.5,
                  child: Image(
                    image: const AssetImage("assets/imgs/logo1.png"),
                    width: MediaQuery.of(context).size.width / 2.5,
                  ),
                ),
                const SizedBox(height: 10), // 替换冗余Padding，优化性能
                Flex(
                  direction: Axis.horizontal,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    SizedBox(
                      width: MediaQuery.of(context).size.width / 4,
                      child: const Image(
                        image: AssetImage("assets/imgs/square_logo.jpg"),
                      ),
                    ),
                    const SizedBox(width: 10),
                    SizedBox(
                      width: MediaQuery.of(context).size.width / 4,
                      child: const Image(
                        image: AssetImage("assets/imgs/square_logo1.png"),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

方案2：用Positioned固定底部图片位置 #

保留Stack的居中对齐，通过Positioned直接将底部图片组锚定到屏幕底部：

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        const Image(
          image: AssetImage("assets/imgs/logo.png"),
        ),
        Positioned(
          bottom: 40, // 距离屏幕底部40px
          left: 0,
          right: 0, // 左右贴边，宽度占满屏幕
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                width: MediaQuery.of(context).size.width / 2.5,
                child: Image(
                  image: const AssetImage("assets/imgs/logo1.png"),
                  width: MediaQuery.of(context).size.width / 2.5,
                ),
              ),
              const SizedBox(height: 10),
              Flex(
                direction: Axis.horizontal,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  SizedBox(
                    width: MediaQuery.of(context).size.width / 4,
                    child: const Image(
                      image: AssetImage("assets/imgs/square_logo.jpg"),
                    ),
                  ),
                  const SizedBox(width: 10),
                  SizedBox(
                    width: MediaQuery.of(context).size.width / 4,
                    child: const Image(
                      image: AssetImage("assets/imgs/square_logo1.png"),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

额外优化提示 #

• 用SizedBox替代无意义的Padding组件，减少不必要的布局嵌套
• 给Column设置mainAxisSize: MainAxisSize.min，避免组件占用多余的垂直空间

内容的提问来源于stack exchange，提问作者jamie1231