如何在Flutter的SingleChildScrollView上创建固定不滚动的弹出Container

你需要将根布局从原来的SingleChildScrollView替换为Stack组件，利用Stack的子元素层级堆叠特性，实现两层结构：

• 第一层（底层）：放置SingleChildScrollView作为可滚动的背景层
• 第二层（上层）：放置你已经开发完成的固定Container，通过Positioned/Align指定固定位置，即可实现不跟随滚动、层级高于滚动视图的效果

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

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int currentIndex = 0;
  // 可选：添加变量控制固定容器的显隐
  bool _showFixedContainer = true;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 第一层：可滚动的背景层
        SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
              HomePageWidget(),
              // 你的其他滚动内容组件
            ],
          ),
        ),
        // 第二层：固定位置的Container，层级高于下层滚动视图
        if(_showFixedContainer)
          Align(
            // 可自行调整对齐方式，比如Alignment.bottomCenter、Alignment.topRight等
            alignment: Alignment.bottomCenter,
            child: Container(
              // 这里替换为你已经开发好的Container组件内容
              width: double.infinity,
              height: 60,
              margin: const EdgeInsets.all(16),
              color: Colors.blue,
            ),
          )
      ],
    );
  }
}

• Stack的子元素遵循「后写层级更高」的规则，所以固定Container要放在SingleChildScrollView之后
• 如果你需要固定在屏幕的具体坐标位置，可以把Align替换为Positioned，通过top/bottom/left/right参数指定精确位置
• 固定Container的点击事件不受下层滚动视图影响，正常配置GestureDetector即可生效

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