如何在Stack中居中Widget并通过代码控制其移动？

下面提供几种实用方案，实现Stack内Widget初始居中且支持代码控制移动的需求：

方案一：用Transform.translate实现精确像素偏移 #

这种方式直接在目标Widget外层包裹Transform.translate，通过控制offset参数实现移动——初始时设为Offset(0,0)保持居中，后续修改offset值即可控制位移，视觉偏移不会影响布局位置。

示例代码：

import 'package:flutter/material.dart';

class MoveableWidget extends StatefulWidget {
  const MoveableWidget({super.key});

  @override
  State<MoveableWidget> createState() => _MoveableWidgetState();
}

class _MoveableWidgetState extends State<MoveableWidget> {
  // 初始偏移为0，保持居中
  Offset _offset = const Offset(0, 0);

  void moveWidget() {
    // 右移5像素，上移2像素（y轴向上为负）
    setState(() {
      _offset = const Offset(5, -2);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Transform.translate(
            offset: _offset,
            child: Container(
              height: 50,
              width: 50,
              color: Colors.blue,
              child: const Center(child: Text('Move this programmatically')),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: moveWidget,
        child: const Icon(Icons.move_up),
      ),
    );
  }
}

方案二：用Positioned动态计算布局位置 #

通过MediaQuery获取屏幕尺寸，结合Widget自身宽高计算初始居中的left/top值，再通过变量控制偏移量，动态修改Positioned的属性，这种方式会改变Widget的实际布局位置。

示例代码：

import 'package:flutter/material.dart';

class MoveableWidget extends StatefulWidget {
  const MoveableWidget({super.key});

  @override
  State<MoveableWidget> createState() => _MoveableWidgetState();
}

class _MoveableWidgetState extends State<MoveableWidget> {
  // 初始偏移量为0
  double _xOffset = 0;
  double _yOffset = 0;
  final double _widgetSize = 50;

  void moveWidget() {
    // 右移5像素，上移2像素
    setState(() {
      _xOffset = 5;
      _yOffset = -2;
    });
  }

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    // 计算初始居中位置，叠加偏移量
    final left = (screenSize.width - _widgetSize) / 2 + _xOffset;
    final top = (screenSize.height - _widgetSize) / 2 + _yOffset;

    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            left: left,
            top: top,
            child: Container(
              height: _widgetSize,
              width: _widgetSize,
              color: Colors.blue,
              child: const Center(child: Text('Move this programmatically')),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: moveWidget,
        child: const Icon(Icons.move_up),
      ),
    );
  }
}

方案三：用Alignment动态偏移（比例适配场景） #

Alignment的取值范围是(-1,-1)到(1,1)，对应Stack的左上角到右下角。如果需要基于中心的像素偏移，可将像素值转换为相对Stack尺寸的比例，适合需要适配不同屏幕的场景。

示例代码：

import 'package:flutter/material.dart';

class MoveableWidget extends StatefulWidget {
  const MoveableWidget({super.key});

  @override
  State<MoveableWidget> createState() => _MoveableWidgetState();
}

class _MoveableWidgetState extends State<MoveableWidget> {
  Alignment _alignment = Alignment.center;

  void moveWidget() {
    setState(() {
      final screenSize = MediaQuery.of(context).size;
      // 将像素偏移转换为Alignment的比例值
      _alignment = Alignment(
        5 / (screenSize.width / 2),
        -2 / (screenSize.height / 2),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: _alignment,
        children: [
          Container(
            height: 50,
            width: 50,
            color: Colors.blue,
            child: const Center(child: Text('Move this programmatically')),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: moveWidget,
        child: const Icon(Icons.move_up),
      ),
    );
  }
}

补充说明 #

• 如果需要带动画的平滑移动，可将setState替换为AnimatedBuilder，或使用AnimatedPositioned/AnimatedAlign组件。
• 方案一的视觉偏移不会影响布局交互区域，方案二的布局偏移会同步改变交互区域位置，可根据需求选择。

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