Flutter如何使用Stack与Positioned实现SafeArea内响应式SVG布局

优化后完整代码 #

class Shape extends StatelessWidget {
  static Route route() {
    return MaterialPageRoute<void>(builder: (_) => Shape());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 完全移除AppBar配置
      body: _profilePage(context),
    );
  }

  Widget _profilePage(BuildContext context) {
    return SafeArea(
      child: Stack(
        // Stack自动占满整个SafeArea空间
        fit: StackFit.expand,
        children: <Widget>[
          // 不需要手动Positioned定位，SVG自动适配容器
          _curved(context),
          // 这里可以直接加其他需要放在SVG上层的组件，比如头像、文本等
        ],
      ),
    );
  }

  Widget _curved(BuildContext context) {
    return SvgPicture.asset(
      'assets/images/shape_purple.svg',
      color: Colors.blue,
      // 宽度铺满，高度按SVG原始比例自适应，不会变形
      fit: BoxFit.fitWidth,
      // 如果需要SVG铺满整个SafeArea，把上面的fit改成BoxFit.cover即可
      allowDrawingOutsideViewBox: true,
      // 对齐方式，保证SVG顶部和SafeArea顶部对齐
      alignment: Alignment.topCenter,
    );
  }
}

改动说明 #

• 完全移除了AppBar相关配置，避免颜色衔接问题
• 删掉了多余的Align、Center嵌套，整个布局仅用一层Stack实现，符合单部分布局要求
• 给Stack设置fit: StackFit.expand，自动占满整个SafeArea的可用空间，不需要手动通过MediaQuery计算宽高
• 移除了硬编码的Positioned偏移参数，通过SvgPicture自带的fit和alignment属性实现响应式适配，所有尺寸屏幕都可以自动适配不会错位
• 可根据需求调整fit参数：BoxFit.fitWidth保证宽度铺满、比例不变，适合顶部弧形的场景；BoxFit.cover会铺满整个SafeArea，可按需选择

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