“后退”和“下一步”按钮远离卡片

Question

我正在开发 Flutter 调查应用程序，我面临一个问题，即卡片与“后退”和“下一步”按钮之间的空间太大。我正在使用堆栈小部件将主卡覆盖在背景卡上。这些按钮位于行小部件中的卡片下方，但它们看起来距离卡片太远。

代码上下文：我正在使用一个扩展小部件来包装卡片布局的堆栈。这些按钮放置在行内的填充小部件中，但我似乎无法调整按钮和卡片之间的垂直间距。距离仍然太大，我需要按钮离卡更近。

屏幕截图：

因此，查看屏幕截图，您可以看到卡片和按钮之间的距离太远了

我尝试过的事情：

减少了按钮的 Padding 小部件内的填充。 调整了卡片和其他元素的高度，但空间保持不变。 通过检查可用空间，确保扩展小部件不会导致问题。 预期结果： “后退”和“下一步”按钮应直接放置在卡片下方，它们之间的垂直空间最小。

有人可以指导我如何固定按钮和卡片之间的距离吗？我需要在不影响整体布局的情况下减少空间。”

这是我的完整代码：

          // Survey question with stacked effect
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(14.0),
              child: Stack(
                children: [
                  // Background Card for the stacked effect
                  Positioned(
                    top: 16,
                    left: 8,
                    right: 8,
                    child: Container(
                      height: 240, // Adjust the height based on the options
                      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,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ), ```

Answer 1

您已将“扩展”小部件用于问题卡，这意味着此部分占用了所有可用空间。我注意到您提到，“通过检查可用空间确保扩展小部件不会导致问题。”您能否澄清一下您是如何验证这一点的？当我用 ColoredBox 包裹 Padding 小部件（Expanded 的子部件）并添加颜色时，它清楚地表明 Expanded 小部件正在使用整个可用空间（请参阅屏幕截图；绿色区域代表 Expanded 占用的空间）。

删除扩展小部件和两个定位小部件将消除该空间。但是，您可能需要调整代码以维持所需的“堆栈效果”