Flutter调研应用：卡片与Back/Next按钮间距过大问题求助

问题描述 #

开发Flutter调研应用时，卡片与底部"Back"/"Next"按钮之间的垂直间距过大。使用Stack组件叠加主卡片和背景卡片实现悬浮效果，按钮放置在卡片下方的Row组件中，但始终无法缩小两者间的间距。

代码背景 #

使用Expanded组件包裹Stack实现卡片布局，按钮放在Row内的Padding组件中。尝试调整按钮内边距、卡片高度等操作后，间距仍无变化，需要让按钮紧邻卡片下方，且不影响整体布局。

已尝试操作 #

• 缩小按钮所在Padding组件的内边距
• 调整卡片及其他元素的高度，间距未改变
• 检查可用空间，确认Expanded组件未引发问题

预期结果 #

"Back"和"Next"按钮紧邻卡片下方，两者间仅保留最小垂直间距。

解决方案 #

问题核心是Expanded组件会强制占据父容器的剩余全部空间，导致Stack被拉伸至填满剩余高度，按钮只能在Expanded之外的区域显示，进而造成间距过大。

修复步骤 #

1. 移除包裹Stack的Expanded组件，让Stack自适应内容高度
2. 调整Stack外层Padding的垂直内边距，避免额外的上下间距
3. 让背景卡片自适应主卡片的高度（去掉固定height，改用Positioned的bottom属性约束）

修复后完整代码 #

// Survey question with stacked effect
Padding(
  padding: const EdgeInsets.symmetric(horizontal: 14.0), // 仅保留水平内边距，去掉垂直方向多余间距
  child: Stack(
    children: [
      // Background Card for the stacked effect
      Positioned(
        top: 16,
        left: 8,
        right: 8,
        bottom: 0, // 让背景卡片跟随Stack底部，自适应高度
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
          ),
        ),
      ),
      // Main Card
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30),
          ),
          elevation: 6,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Survey title
                Text(
                  "Select an answer",
                  style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: Colors.grey[600],
                  ),
                ),
                SizedBox(height: 16),
                // Survey question
                Text(
                  questions[currentQuestionIndex],
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(height: 24),
                // Options with grey background and right-aligned radio button
                ...options[currentQuestionIndex].map((option) {
                  return Container(
                    margin: const EdgeInsets.only(bottom: 12.0),
                    padding: const EdgeInsets.symmetric(
                        vertical: 12.0, horizontal: 16.0),
                    decoration: BoxDecoration(
                      color: Colors.grey
                          .shade200, // Grey background for each option
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    child: Row(
                      children: [
                        Expanded(
                          child: Text(
                            option,
                            style: TextStyle(fontSize: 16.0),
                          ),
                        ),
                        Radio<String>(
                          value: option,
                          groupValue: selectedAnswer,
                          onChanged: (value) {
                            setState(() {
                              selectedAnswer = value;
                            });
                          },
                        ),
                      ],
                    ),
                  );
                }),
              ],
            ),
          ),
        ),
      ),
    ],
  ),
),

// Back and Next buttons
Padding(
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ElevatedButton(
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30)),
        ),
        onPressed: currentQuestionIndex > 0
            ? () {
                setState(() {
                  currentQuestionIndex--;
                  selectedAnswer = null;
                });
              }
            : null,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            children: [
              Icon(
                Icons.arrow_back,
                color: currentQuestionIndex > 0
                    ? Colors.grey.shade700
                    : Colors.grey,
                size: 30,
              ),
              SizedBox(
                width: 8,
              ),
              Text(
                "Back",
                style: TextStyle(fontSize: 16),
              )
            ],
          ),
        ),
      ),
      ElevatedButton(
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30)),
        ),
        onPressed: selectedAnswer != null
            ? () {
                if (currentQuestionIndex < questions.length - 1) {
                  setState(() {
                    currentQuestionIndex++;
                    selectedAnswer = null;
                  });
                } else {
                  // Show a completion message or navigate
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      title: Text("Survey Completed"),
                      content: Text(
                          "Thank you for completing the survey!"),
                      actions: [
                        TextButton(
                          onPressed: () =>
                              Navigator.of(context).pop(),
                          child: Text("OK"),
                        ),
                      ],
                    ),
                  );
                }
              }
            : null,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            children: [
              Text(
                currentQuestionIndex == questions.length - 1
                    ? "Finish"
                    : "Next",
                style: TextStyle(fontSize: 16),
              ),
              SizedBox(
                width: 8,
              ),
              Icon(
                size: 30,
                currentQuestionIndex == questions.length - 1
                    ? Icons.check
                    : Icons.arrow_forward,
                color: selectedAnswer != null
                    ? Colors.grey.shade700
                    : Colors.grey,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
),

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