Flutter：将容器包裹在带有定位子项的 Stack 周围

Question

我想将包含 Positioned 个子项的 Stack 小部件 居中。 Stack 的大小在渲染之前是未知的。

不幸的是，Stack 似乎无限大（如图所示，当用容器包裹它时）。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.yellow,
                  width: 5.0,
                ),
              ),
              child: buildStack()),
        ),
      ),
    );
  }

  Widget buildStack() {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Container(),
        Positioned(
          top: 0,
          left: 0,
          child: Container(
            height: 50,
            width: 50,
            color: Colors.red,
          ),
        ),
        Positioned(
          top: 50,
          left: 50,
          child: Container(
            height: 50,
            width: 50,
            color: Colors.blue,
          ),
        ),
      ],
    );
  }
}

最后一个问题：如何将一个容器包裹在一个包含已定位子元素的堆栈周围并居中？

以下是一些类似的问题，但对我没有帮助：

Stack makes infinite height if only have Positioned children

Answer 1

自定义解决方案：

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
      const MaterialApp(debugShowCheckedModeBanner: false, home: StackTest()));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: buildStack(context),
    );
  }

  Widget buildStack(BuildContext context) {
    double containerSize = 50;
    double borderSize = 5;
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Positioned(
          top: MediaQuery.of(context).size.height / 2 -
              (containerSize + borderSize),
          left: MediaQuery.of(context).size.width / 2 -
              (containerSize + borderSize),
          child: Container(
            height: 2 * containerSize + 2 * borderSize,
            width: 2 * containerSize + 2 * borderSize,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.yellow,
                width: borderSize,
              ),
            ),
          ),
        ),
        Positioned(
          top: MediaQuery.of(context).size.height / 2 - containerSize,
          left: MediaQuery.of(context).size.width / 2 - containerSize,
          child: Center(
            child: Container(
              height: containerSize,
              width: containerSize,
              color: Colors.red,
            ),
          ),
        ),
        Positioned(
          top: MediaQuery.of(context).size.height / 2,
          left: MediaQuery.of(context).size.width / 2,
          child: Center(
            child: Container(
              height: containerSize,
              width: containerSize,
              color: Colors.blue,
            ),
          ),
        ),
      ],
    );
  }
}

Answer 2

Stack 需要一个参考点。所以当里面只有 Positioned 项时，它不知道从哪里开始，不知道它有多大。

请参阅 RenderStack 文档：[...] If there are no non-positioned children, the stack becomes as large as possible [...]

也描述了这个问题。

解法：

一种方法是在堆栈中放置一个未定位的项目，它将成为堆栈的参考点（包括已定位的项目）。这可能是一个已知大小的容器。

另一种选择是针对全局值设置 Positioned，例如屏幕大小（参见 Priyansu Choudhury 回答）

Flutter：将容器包裹在带有定位子项的 Stack 周围

Flutter: Wrap container around Stack with Positioned children

flutter

flutter-layout

flutter-positioned