Flutter中Stack结合LayoutBuilder与Positioned无法实现居中定位问题

我需要通过Stack组件将文本（示例用黄色小容器替代）居中显示在红色容器上方，且窗口调整大小时保持居中。尝试使用Stack+LayoutBuilder+Positioned的结构实现，但子组件始终停留在左上角，简化代码后问题仍存在。

示例代码 #

main.dart

import 'package:flutter/material.dart';
import 'package:imdb/screens/home_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
       home: HomeScreen());
  }
}

home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff3f3f3),
        body: Stack(
          children: [
            Container(
              height: 200,
              width: 200,
              color: Colors.red,
            ),
 
            LayoutBuilder(builder: (context, constraints) {
              return Positioned(
                left: constraints.maxWidth * 0.5,
                top: constraints.maxHeight*0.5,
                child: Container(
                  height: 10,
                  width: 10,
                  color: Colors.yellowAccent
                ),
              );
            }),
          ],
        ));
  }
}

问题原因 #

1. LayoutBuilder约束范围错误：放在Stack的children中时，LayoutBuilder获取的是Stack的全屏约束，而非红色容器的尺寸约束。
2. Positioned定位逻辑偏差：直接设置left: constraints.maxWidth * 0.5会让黄色容器的左上角处于屏幕中心，而非容器自身居中；同时该逻辑未关联红色容器的固定尺寸与位置，导致无法实现相对红色容器居中的效果。

解决方案 #

方案1：利用Stack的alignment属性快速居中

这是最简洁的实现方式，给Stack设置alignment: Alignment.center后，子组件会自动居中：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff3f3f3),
        body: Stack(
          alignment: Alignment.center, // 设置全局居中对齐
          children: [
            Container(
              height: 200,
              width: 200,
              color: Colors.red,
            ),
            Container(
              height: 10,
              width: 10,
              color: Colors.yellowAccent
            ),
          ],
        ));
  }
}

方案2：相对于红色容器单独居中

如果需要黄色容器严格绑定红色容器的位置居中，可将黄色容器作为红色容器的子组件，用Align包裹：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff3f3f3),
        body: Stack(
          children: [
            Container(
              height: 200,
              width: 200,
              color: Colors.red,
              child: Align(
                alignment: Alignment.center,
                child: Container(
                  height: 10,
                  width: 10,
                  color: Colors.yellowAccent
                ),
              ),
            ),
          ],
        ));
  }
}

方案3：手动计算Positioned参数

若必须使用Positioned，可通过红色容器与黄色容器的尺寸差计算偏移量，确保黄色容器自身居中：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final redSize = 200.0;
    final yellowSize = 10.0;
    return Scaffold(
        backgroundColor: Color(0xfff3f3f3),
        body: Stack(
          children: [
            Positioned(
              left: 0,
              top: 0,
              child: Container(
                height: redSize,
                width: redSize,
                color: Colors.red,
              ),
            ),
            Positioned(
              // 偏移公式：红色容器起始位置 + 红色容器半宽 - 黄色容器半宽
              left: 0 + redSize/2 - yellowSize/2,
              top: 0 + redSize/2 - yellowSize/2,
              child: Container(
                height: yellowSize,
                width: yellowSize,
                color: Colors.yellowAccent
              ),
            ),
          ],
        ));
  }
}

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