如何在Stack组件中正确设置Positioned组件的定位？

原因 #

你的Stack组件默认采用StackFit.loose布局逻辑，只会适配内部尺寸最大的子组件（也就是你的TextField），不会占满Scaffold的整个body区域。这就导致Positioned的定位参考是这个“缩小版”的Stack，而非屏幕边界，所以看起来位置不符合预期。

解决步骤 #

1. 让Stack占满父容器 #

给Stack添加fit: StackFit.expand属性，强制它填充所有可用空间：

body: Stack(
  fit: StackFit.expand, // 新增这一行
  children: [
    // ... 原有子组件代码
  ],
),

2. 优化非Positioned子组件的布局（可选） #

默认情况下，非Positioned的子组件会占满整个Stack空间，可能导致TextField、Text和按钮互相覆盖，你可以用Align或SizedBox来控制它们的位置和尺寸：

Stack(
  fit: StackFit.expand,
  children: [
    // 把Text放在顶部居中
    Align(
      alignment: Alignment.topCenter,
      child: const Text(
        'test text',
        style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.w400,
            color: Colors.lightBlue),
      ),
    ),
    // 让TextField居中并限制宽度
    Align(
      alignment: Alignment.center,
      child: SizedBox(
        width: 320,
        child: TextField(
          onChanged: (input) {
            setState(() {
              inEquation = input;
            });
          },
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Enter equation',
          ),
        ),
      ),
    ),
    // 你的Positioned按钮
    Positioned(
      bottom: 50,
      right: 30,
      child: MaterialButton(
        onPressed: () {
          setState(() {
            toggled = !toggled;
          });
        },
        child: const Text('Enter'),
      ),
    )
  ],
),

关键提示 #

• StackFit.expand是核心：它让Stack的边界和父容器（Scaffold body）对齐，此时Positioned的bottom、right等属性才会相对于屏幕边缘生效。
• 非Positioned子组件默认会填充Stack，所以必须用布局组件（Align/Positioned/SizedBox）约束它们的位置和大小，避免布局混乱。

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