Flutter测验应用关闭按钮异常：无法点击且无法定位代码下移

问题描述 #

我开发了一款基于Flutter的测验应用，目前遇到两个问题：

• 关闭图标（“X”按钮）无法正常工作；
• 找不到该按钮对应的代码位置，尝试将第一个SizedBox的height改为30后，仅“About this quiz”文本下移，按钮位置未发生变化。

相关代码：

import 'package:flutter/material.dart';
import 'package:bacgeografie/models/quiz_data.dart';
import 'package:bacgeografie/utils/string.dart';
import 'package:nb_utils/nb_utils.dart';

class QuizDescriptionComponent extends StatefulWidget {
  static String tag = '/QuizDescriptionComponent';

  final QuizData? quizModel;

  const QuizDescriptionComponent({Key? key, this.quizModel}) : super(key: key);

  @override
  QuizDescriptionComponentState createState() =
      QuizDescriptionComponentState();
}

class QuizDescriptionComponentState extends State<QuizDescriptionComponent> {
  // String university = 'Any';
  @override
  void initState() {
    super.initState();
    init();
  }

  init() async {
    //
  }

  @override
  void setState(fn) {
    if (mounted) super.setState(fn);
  }

  @override
  Widget build(BuildContext context) {
    
    return SingleChildScrollView(
      
      child: Column(
        
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 30),
          widget.quizModel!.imageUrl.isEmptyOrNull
              ? Image.network(
                  widget.quizModel!.imageUrl!,
                  width: context.width(),
                  height: context.height() * 0.50,
                  fit: BoxFit.fill,
                ).cornerRadiusWithClipRRectOnly(
                  bottomLeft: defaultRadius.toInt(),
                  bottomRight: defaultRadius.toInt())
              : Container(),
          50.height,
          Text('About this quiz', style: boldTextStyle(size: 20))
              .paddingOnly(left: 25, right: 30),
          SizedBox(height: 10),
          Container(
            margin: const EdgeInsets.all(25),
            padding: const EdgeInsets.all(25),
            width: context.width(),
            decoration: boxDecorationWithRoundedCorners(
              borderRadius: BorderRadius.circular(defaultRadius),
              border: Border.all(color: grey.withOpacity(0.3)),
              backgroundColor: Theme.of(context).cardColor,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Quiz title', style: boldTextStyle()),
                8.height,
                Text(widget.quizModel!.quizTitle.validate(),
                    style: primaryTextStyle()),
                8.height,
                Divider(color: grey.withOpacity(0.3), thickness: 1),
                8.height,
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(lbl_quiz_description, style: boldTextStyle()),
                    8.height,
                    Text(widget.quizModel!.description.validate(),
                        style: primaryTextStyle()),
                    8.height,
                    Divider(color: grey.withOpacity(0.3), thickness: 1),
                    8.height,
                  ],
                ).visible(widget.quizModel!.description.validate().isNotEmpty),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('No of questions' + ":", style: boldTextStyle()),
                    4.width,
                    Text('20', softWrap: true, style: primaryTextStyle())
                        .expand(),
                  ],
                ),
                8.height,
                Divider(color: grey.withOpacity(0.3), thickness: 1),
                8.height,
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Quiz duration', style: boldTextStyle()),
                    4.width,
                    Text('20' + " minutes",
                            softWrap: true, style: primaryTextStyle())
                        .expand(),
                  ],
                ),
                // 8.height,
                // Divider(color: grey.withOpacity(0.3), thickness: 1),
                // 8.height,
                // Text('Choose University', style: boldTextStyle()),
                // 8.height,
                // DropdownButtonFormField(
                //   decoration: InputDecoration(
                //       border: OutlineInputBorder(
                //           borderSide: BorderSide(color: black))),
                //   value: university,
                //   items: ['Any', '1', '2', '3']
                //       .map((label) => DropdownMenuItem(
                //             child: Text(label.toString()),
                //             value: label,
                //           ))
                //       .toList(),
                //   onChanged: (value) {
                //     setState(() {
                //       university = value.toString();
                //     });
                //   },
                // ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

应用界面截图：

解决方案 #

1. 找不到关闭按钮代码的原因 #

你贴的QuizDescriptionComponent里没有关闭按钮的代码，这个按钮肯定是在弹出这个组件的父页面/对话框/路由逻辑里：

• 如果是用showDialog弹出组件，按钮可能在对话框的标题栏；
• 如果是作为独立页面打开，按钮可能在页面的AppBar中；
• 也可能是自定义弹窗组件包裹时添加的悬浮按钮。

2. 修复关闭按钮不工作的方法 #

找到按钮所在位置后，给它绑定正确的关闭逻辑：

• 若是对话框，用Navigator.pop(context);关闭弹窗；
• 若是页面，用Navigator.pop(context);返回上一页；
• 确保按钮的onPressed属性不是空实现，必须绑定上述方法。

3. 修改SizedBox高度按钮不动的原因 #

你调整的SizedBox是QuizDescriptionComponent内部的间距，只会影响组件内的元素（比如“About this quiz”文本），而关闭按钮不在这个组件里，所以调整它不会改变按钮位置。要调整按钮位置，得去按钮所在的父容器里修改布局。

示例代码：给弹窗添加关闭按钮 #

假设你用showDialog弹出该组件，可这样添加关闭按钮：

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text("测验详情"),
          IconButton(
            icon: const Icon(Icons.close),
            onPressed: () {
              Navigator.pop(context); // 点击关闭弹窗
            },
          ),
        ],
      ),
      content: QuizDescriptionComponent(quizModel: yourQuizModel),
    );
  },
);

如果是作为独立页面打开：

Scaffold(
  appBar: AppBar(
    actions: [
      IconButton(
        icon: const Icon(Icons.close),
        onPressed: () {
          Navigator.pop(context); // 返回上一页
        },
      ),
    ],
  ),
  body: QuizDescriptionComponent(quizModel: yourQuizModel),
);

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