颤振：用定位的孩子将容器包裹在堆栈周围答案

【问题标题】：Flutter: Wrap container around Stack with Positioned children颤振：用定位的孩子将容器包裹在堆栈周围
【发布时间】：2021-11-09 03:48:45
【问题描述】：

我想居中包含 Positioned 子级的 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,
          ),
        ),
      ],
    );
  }
}

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

这里有一些类似的问题，对我没有帮助：

Flutter - Positioned Widget in Stack causing

Stack makes infinite height if only have Positioned children

【问题讨论】：

标签： flutter flutter-layout flutter-positioned

【解决方案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,
            ),
          ),
        ),
      ],
    );
  }
}

【讨论】：

感谢您的想法。但是你确定，没有办法像普通小部件一样处理堆栈+定位吗？比如容器什么的？
是的，我敢肯定，Stack 的大小是无限的，直到我们将它放入一个 Container 中并给它一个高度。

【解决方案2】：

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

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

here 也描述了这个问题。

解决方案：

一种方法是将未定位的项目放入堆栈中，它将成为堆栈的参考点（包括已定位的项目）。这可能是一个已知大小的容器。
另一个选项是针对全局值设置Positioned，例如屏幕大小（请参阅Priyansu Choudhury 答案）

【讨论】：