Flutter中SingleChildScrollView嵌套Stack无法滚动问题求助

你的问题出在Stack内部全使用Positioned组件，导致Stack本身没有固有尺寸，SingleChildScrollView无法正确计算可滚动区域的高度；同时底部的文本内容过长时，Positioned的Column没有足够的布局空间，直接溢出或被隐藏。

修复方案：调整布局结构，避免Stack滥用Positioned #

把顶部图片和悬浮按钮放在独立的Stack里，下方的详情内容直接作为SingleChildScrollView的子元素（不用Positioned），这样ScrollView能正确识别内容高度并触发滚动。

修改后的完整代码：

@override
Widget build(BuildContext context) {
  String mealID = Get.arguments['mealID'];
  DetailsController controller = Get.find<DetailsController>();
  controller.getFoodDetails(mealID);
  
  return Scaffold(
    body: Obx(() {
      if (controller.meals.value.meals != null) {
        var data = controller.meals.value.meals;
        return SingleChildScrollView(
          child: Column(
            children: [
              // 顶部图片+悬浮按钮的Stack
              Stack(
                alignment: Alignment.bottomRight,
                children: [
                  Image.network(
                    data![0].strMealThumb!,
                    fit: BoxFit.cover,
                    height: 250,
                    width: double.infinity,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(right: 20, bottom: 20),
                    child: FloatingActionButton(
                      onPressed: () {
                        var args = {'meal': data[0]};
                        Get.toNamed('/cooking', arguments: args);
                      },
                      child: Image.asset('assets/images/cook_image.png', height: 30, width: 30),
                    ),
                  ),
                ],
              ),
              // 下方详情内容（直接放在Column里，无需Positioned）
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 40),
                    Text(
                      data[0].strMeal!,
                      style: poppingMedium().copyWith(fontSize: 20, color: Colors.black87),
                    ),
                    const SizedBox(height: 10),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      decoration: BoxDecoration(
                        color: Colors.blueGrey,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Text(
                        data[0].strCategory!,
                        style: poppingMedium().copyWith(fontSize: 20, color: Colors.white),
                      ),
                    ),
                    const SizedBox(height: 10),
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 10),
                      decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Text(
                        data[0].strArea!,
                        style: poppingMedium().copyWith(fontSize: 20, color: Colors.white),
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      data[0].strInstructions!,
                      style: poppingMedium().copyWith(
                        fontSize: 15,
                        color: Colors.black38,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                    // 底部留白，避免内容被底部遮挡
                    const SizedBox(height: 20),
                  ],
                ),
              ),
            ],
          ),
        );
      } else {
        return const Center(
          child: CircularProgressIndicator(color: Colors.orange),
        );
      }
    }),
  );
}

关键改动说明： #

• 把原来的大Stack拆分为顶部图片区域的小Stack + 下方详情Column，让SingleChildScrollView能正确获取整个内容的高度
• 用alignment和Padding替代Positioned来定位悬浮按钮，布局更稳定
• 移除所有不必要的Positioned，确保文本内容有足够的布局空间，过长时能正常滚动

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