Flutter中AnimatedPositioned动画时占用过多空间，如何优化？

你的问题出在AnimatedPositioned的height和top属性组合设置错误，导致组件实际布局范围超出屏幕可视区域，甚至延伸到安全区。以下是具体修复方案：

核心问题分析 #

当selected=true时，你设置了：

• height: MediaQuery.of(context).size.height（整个屏幕高度）
• top:50.0（距离顶部50像素）

这会让组件的底部位置变为top + height = 50 + 屏幕高度，远远超出屏幕底部，自然会延伸到安全区之外。

修复方案 #

方案1：修正height的计算逻辑 #

让selected=true时的height等于屏幕高度减去top值，确保组件底部刚好对齐屏幕底部：

height: selected
    ? MediaQuery.of(context).size.height - 50.0
    : MediaQuery.of(context).size.height * .7,

方案2：改用bottom属性控制位置（更直观） #

放弃top+height的组合，直接用bottom属性控制组件距离屏幕底部的距离，搭配合适的height：

AnimatedPositioned(
  curve: Curves.elasticOut,
  duration: Duration(milliseconds: 10000),
  width: MediaQuery.of(context).size.width,
  height: selected
      ? MediaQuery.of(context).size.height - 50.0
      : MediaQuery.of(context).size.height * .7,
  // 用bottom代替top，直接控制组件底部距离屏幕底部的距离
  bottom: selected
      ? 0.0 // 选中时贴紧屏幕底部
      : MediaQuery.of(context).size.height * 0.3, // 未选中时底部留出30%屏幕高度
  child: Container(
      padding: EdgeInsets.fromLTRB(26, 0, 26, 25.51),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.vertical(top: Radius.circular(40)),
      ),
      child: Column(children: [])),
)

方案3：适配安全区（可选） #

如果需要确保组件不侵入安全区，可以结合MediaQuery获取安全区边距，调整bottom或height：

final bottomPadding = MediaQuery.of(context).padding.bottom;

// 在方案2的基础上，修改bottom值：
bottom: selected
    ? bottomPadding // 选中时贴紧安全区上方
    : MediaQuery.of(context).size.height * 0.3 + bottomPadding,

完整修改后的代码 #

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> with TickerProviderStateMixin {
  bool selected = false;

  late AnimationController colorController;
  late Animation animation;

  @override
  initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      setState(() {
        selected = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    changeStatusColor(colorPrimary);
    final bottomPadding = MediaQuery.of(context).padding.bottom;
    return Scaffold(
      backgroundColor: colorPrimary,
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          AnimatedPositioned(
            curve: Curves.elasticOut,
            duration: Duration(milliseconds: 10000),
            width: MediaQuery.of(context).size.width,
            height: selected
                ? MediaQuery.of(context).size.height - 50.0 - bottomPadding
                : MediaQuery.of(context).size.height * .7,
            bottom: selected
                ? bottomPadding
                : MediaQuery.of(context).size.height * 0.3,
            child: Container(
                padding: EdgeInsets.fromLTRB(26, 0, 26, 25.51),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(40)),
                ),
                child: Column(children: [])),
          ),
        ],
      ),
    );
  }
}

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