问题

我是新手学Flutter，想要问一下如何使底部中心的内容在堆叠小部件中溢出容器。我已经尝试过，但没有得到我想要的预期结果。

实际结果:

预期结果:

答案1

得分: 2

Position(
   bottom: 0, // 0 表示在父部件定义的空间底部
)

如果你想访问超出那些空间，你可以使用负值。

Position(
   bottom: -0 到 ...... 任何你想要的值
)

** 但请记住，通常 Stack 不允许显示溢出的区域，因为它最初定义为 "clipBehavior: false"，所以要更改这个：

Stack(
  clipBehavior: Clip.none,
  children:[ Position(bottom: -50)]
)

Position(
   bottom: 0, // 0 means at the bottom of defined Spaces by its Parent Widget
)

Position(
   bottom: -0 to ...... any as u desired
)

Stack(
  clipBehavior: Clip.none,
  children:[ Position(bottom: -50)]
)

答案2

得分: 1

这是你需要的内容：

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Stack(
        alignment: AlignmentDirectional.topCenter,
        children: [
          Container(
            height: 200,
            color: Colors.blue[100],
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: const [
              SizedBox(height: 150,),
               SizedBox(
                  height: 100,
                  width: 100,
                  child: Placeholder()),
            ],
          )
        ],
      ),
    );
  }
}

如你所见，当你想要使用 Stack 时，可以将 Stack 中的每个子元素想象成一个单独的屏幕。

请注意代码中有一个高度为 200 的容器，而你显示的 Placeholder 是独立的。因为你的占位符高度为 100，所以你需要使用 SizedBox(height: 150,)。

愉快编码...

<details>
<summary>英文:</summary>

here is what you need:

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

@override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: [
Container(
height: 200,
color: Colors.blue[100],
),
Column(
mainAxisSize: MainAxisSize.min,
children: const [
SizedBox(height: 150,),
SizedBox(
height: 100,
width: 100,
child: Placeholder()),
],
)
],
),
);
}
}

as you see, when you want to use `Stack`, imagine that every child in Stack is a separate screen.

please attention to code that you have a Container with height of 200,
and your Placeholder you are showing is separated. and because your placeholder height is 100 you need to have `SizedBox(height: 150,)`.

[![enter image description here][1]][1]

happy coding...


  [1]: https://i.stack.imgur.com/NqHqS.png

</details>



# 答案3
**得分**: 0

Stack(
children: [
Positioned(
left: 20.0,
top: 20.0,
child: Text('子部件 1'),
),
Positioned(
right: 20.0,
bottom: 20.0,
child: Text('子部件 2'),
),
],
)

<details>
<summary>英文:</summary>

Stack(
  children: [
    Positioned(
      left: 20.0,
      top: 20.0,
      child: Text(&#39;Child Widget 1&#39;),
    ),
    Positioned(
      right: 20.0,
      bottom: 20.0,
      child: Text(&#39;Child Widget 2&#39;),
    ),
  ],
)


</details>