0

我想将包含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 - 堆栈中的定位小部件导致

如果只有定位的孩子，堆栈会产生无限的高度

4

2 回答 2

1

自定义解决方案：

主要.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,
            ),
          ),
        ),
      ],
    );
  }
}
于 2021-09-14T00:26:04.357 回答
0

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

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

这里也描述了这个问题。

解决方案：

  1. 一种方法是在堆栈中放置一个未定位的项目，它将成为堆栈的参考点（包括已定位的项目）。这可能是一个已知大小的容器。
  2. 另一种选择是设置Positioned与全局值有关的值，例如屏幕大小（请参阅Priyansu Choudhury的回答）
于 2021-09-14T20:18:02.700 回答