如何在Flutter中固定居中Widget并相对定位其他Widget？

要让CenterWidget固定在屏幕中央，同时BottomWidget与它保持50像素间距，你需要避免让BottomWidget影响CenterWidget的居中计算。当前使用Column并设置mainAxisAlignment: MainAxisAlignment.center会将**整个Column的内容（CenterWidget+BottomWidget）**居中，导致CenterWidget被向上偏移。

解决方案1：使用Stack布局（固定高度场景） #

由于你的CenterWidget高度固定（200+100=300px），可以直接通过Stack和Positioned精确定位：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    const centerWidgetHeight = 300.0; // CenterWidget的总高度
    const spacing = 50.0;

    return MaterialApp(
      home: Scaffold(
        body: Stack(
          alignment: Alignment.center,
          children: [
            // 固定在屏幕中央的CenterWidget
            const CenterWidget(),
            // 定位在CenterWidget下方50px处的BottomWidget
            Positioned(
              top: screenHeight / 2 + centerWidgetHeight / 2 + spacing,
              child: const BottomWidget(),
            ),
          ],
        ),
      ),
    );
  }
}

// 以下是原有的CenterWidget和BottomWidget代码，无需修改
class CenterWidget extends StatelessWidget {
  const CenterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        height: 200,
        width: 200,
        color: Colors.amber,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 100,
            width: 200,
            color: Colors.black,
          ),
        ],
      )
    ]);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      width: 50,
      color: Colors.blue,
    );
  }
}

解决方案2：动态获取CenterWidget高度（通用场景） #

如果CenterWidget高度不固定，可以使用GlobalKey动态获取其尺寸，避免硬编码：

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey _centerWidgetKey = GlobalKey();
  double _centerWidgetHeight = 0.0;
  const spacing = 50.0;

  @override
  void initState() {
    super.initState();
    // 等待布局完成后获取尺寸
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final renderBox = _centerWidgetKey.currentContext?.findRenderObject() as RenderBox?;
      if (renderBox != null) {
        setState(() {
          _centerWidgetHeight = renderBox.size.height;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;

    return MaterialApp(
      home: Scaffold(
        body: Stack(
          alignment: Alignment.center,
          children: [
            CenterWidget(key: _centerWidgetKey),
            if (_centerWidgetHeight > 0)
              Positioned(
                top: screenHeight / 2 + _centerWidgetHeight / 2 + spacing,
                child: const BottomWidget(),
              ),
          ],
        ),
      ),
    );
  }
}

// 原有的CenterWidget和BottomWidget代码保持不变
class CenterWidget extends StatelessWidget {
  const CenterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        height: 200,
        width: 200,
        color: Colors.amber,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 100,
            width: 200,
            color: Colors.black,
          ),
        ],
      )
    ]);
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      width: 50,
      color: Colors.blue,
    );
  }
}

说明 #

• 方案1适合CenterWidget高度固定的场景，代码简洁直接。
• 方案2适合CenterWidget高度动态变化的场景，通过GlobalKey在布局完成后获取实际高度，确保定位准确。
• 移除了BottomWidget中的SizedBox(height:50)，因为我们已经通过Positioned或布局逻辑控制了间距，避免重复设置。

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