Flutter添加Container后图片从居中移至顶部的问题排查与修复

我在Flutter中展示一张居中显示的图片，点击悬浮操作按钮添加Container后，图片从屏幕中心位置移动到了顶部。相关代码如下：

import 'package:flutter/material.dart';
import 'editPage.dart';

void main() {
  runApp(EditPage());
}

class EditPage extends StatefulWidget {
  const EditPage({super.key,});
  @override
  State<EditPage> createState() => _EditPageState();
}

class _EditPageState extends State<EditPage> {
  List<Widget> movableTextWidgets = [];
  @override
  Widget build(BuildContext context) {
    return Directionality(
        textDirection: TextDirection.ltr,
        child:   Scaffold(
          backgroundColor: Colors.white.withOpacity(0.9),
          body: SafeArea(
                child: Center(
                  child: Stack(
                    children : [
                      Hero(
                        tag: "image1",
                        child: AspectRatio(
                          aspectRatio: 5 / 7, // Set your desired aspect ratio
                          child: Padding(
                            padding:
                            const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                            child: Container(
                              width: double.infinity,
                              height: double.infinity,
                              decoration: BoxDecoration(
                                boxShadow: const [
                                  BoxShadow(
                                    blurRadius: 4,
                                  ),
                                ],
                                image: DecorationImage(
                                  fit: BoxFit.cover,
                                  //add image here any
                                  image: AssetImage("images/2.png"),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                      ...movableTextWidgets,
                    ],
                              ),
                ),
          ),

          floatingActionButton: FloatingActionButton(
            shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(50.0))),
            foregroundColor: Colors.black,
            onPressed: () {
              _addMovableTextBox();

            },
            child: Icon(Icons.add),
          ),
        )
    );
  }
  void _addMovableTextBox() {
    setState(() {
      movableTextWidgets.add(MovableTextBox());
    });
  }
}


class MovableTextBox extends StatefulWidget {
  @override
  _MovableTextBoxState createState() => _MovableTextBoxState();
}
const ballDiameter = 15.0;
class _MovableTextBoxState extends State<MovableTextBox> {
  double width = 200.0;
  double height = 80.0;
  double top = 100;
  double left = 100;
  @override
  Widget build(BuildContext context) {
    return Stack(
        children: <Widget>[
          Positioned(
            top: top,
            left: left,
            child: GestureDetector(
              onPanUpdate: (details) {
                setState(() {
                  top += details.delta.dy;
                  left += details.delta.dx;
                });
              },
              child: Stack(
                children: [
                  Container(
                    width: width,
                    height: height,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 2,
                        color: Colors.black,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
        ]
    );
  }
}

效果说明 #

• 添加Container前：图片在屏幕中心位置显示
• 添加Container后：图片偏移至屏幕顶部

问题原因 #

你的布局中，Stack被Center包裹，初始状态下Stack没有子组件占据空间，尺寸等于内部图片的尺寸，Center让这个Stack居中显示。当添加带有Positioned的MovableTextBox后，Stack会自动扩展到父级（SafeArea）的最大尺寸，而Stack默认的alignment是AlignmentDirectional.topStart，导致图片从原来的居中位置变成在Stack左上角对齐，视觉上移到了屏幕顶部。

解决方案 #

给Stack添加alignment: Alignment.center属性，让内部未定位的子组件（图片）始终保持在Stack的中心位置，即使Stack尺寸变化也不会偏移。

修改后的关键代码部分：

child: Stack(
  alignment: Alignment.center, // 添加这一行
  children : [
    Hero(
      // ... 图片原有代码
    ),
    ...movableTextWidgets,
  ],
),

同时，MovableTextBox内部的Stack是多余的，可直接返回Positioned组件简化代码：

class _MovableTextBoxState extends State<MovableTextBox> {
  double width = 200.0;
  double height = 80.0;
  double top = 100;
  double left = 100;
  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: top,
      left: left,
      child: GestureDetector(
        onPanUpdate: (details) {
          setState(() {
            top += details.delta.dy;
            left += details.delta.dx;
          });
        },
        child: Container(
          width: width,
          height: height,
          decoration: BoxDecoration(
            border: Border.all(
              width: 2,
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}

修改后，添加Container时图片会保持居中，同时可移动的Container也能正常拖动。

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