多个小部件使用相同的GlobalKey

Question

我现在正面临着这个问题。我正在开发一个小测验应用程序，每当一个问题的答案被按下时，应用程序应该向下滚动到下一个问题，但是我得到了这个错误：

​

​

我分配了10个键，然后抛到一个自定义小部件中，这个小部件接受一个函数，然后按下任何一个按钮，应用程序就应该向下滚动到下一个问题:下面是一个小测验的样子：

​

​

我调用自定义小部件的主要代码：

Questions(
                        Keys.key1,
                        'assets/images/malware_quiz.jpeg',
                        '1. What is a malware?',
                        'Designed to damage computers, servers or any other devices',
                        "Used to get user's credentials",
                        "It's used to destroy networks",
                        true,
                        false,
                        false,
                        Color(0xFF383c40),
                        Color(0xff5e517d),
                        media.height),

 Questions(
                        Keys.key2,
                        'assets/images/cyberattack.jpg',
                        '2. What is the most used cyber-attack?',
                        'DDoS',
                        'Ransomware',
                        'Phishing',
                        false,
                        false,
                        true,
                        Color(0xFF383c40),
                        Color(0xffe9755c),
                        media.height * 2),
                    SizedBox(
                      height: media.width > 600 ? heightQuestions : 250,
                    ),
                    Questions(
                        Keys.key3,
                        'assets/images/ransomware_quiz.png',
                        '3. What type of attack is this?',
                        'Phishing',
                        'Ransomware',
                        'Zero-day exploit',
                        false,
                        true,
                        false,
                        Color(0xFF383c40),
                        Color(0xff061f3e),
                        media.height * 3),

键的自定义类：

class Keys {
  static final key1 = GlobalKey();
  static final key2 = GlobalKey();
  static final key3 = GlobalKey();
  static final key4 = GlobalKey();
  static final key5 = GlobalKey();
  static final key6 = GlobalKey();
  static final key7 = GlobalKey();
  static final key8 = GlobalKey();
  static final key9 = GlobalKey();

  static final key10 = GlobalKey();
  static final key11 = GlobalKey();
}

我将函数设置为滚动的自定义小部件：

class Questions extends StatefulWidget {
  final String imagePath;
  final String question;
  final String answer1;
  final String answer2;
  final String answer3;

  final bool iscorrectAnswer1;
  final bool iscorrectAnswer2;
  final bool iscorrectAnswer3;

  final double offset;

  final GlobalKey key;

  final Color colorTop;
  final Color colorBot;

  int score = 0;

  bool questionsAnswered = false;

  Questions(
    this.key,
    this.imagePath,
    this.question,
    this.answer1,
    this.answer2,
    this.answer3,
    this.iscorrectAnswer1,
    this.iscorrectAnswer2,
    this.iscorrectAnswer3,
    this.colorBot,
    this.colorTop,
    this.offset,
  );

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

class _QuestionsState extends State<Questions> {
  disableButton() {
    setState(() {
      widget.questionsAnswered = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    var media = MediaQuery.of(context).size;

    void scrollPage() {
      Scrollable.ensureVisible(widget.key.currentContext!,
          alignment: 1, duration: Duration(seconds: 2), curve: Curves.ease);

      print(widget.offset);
    }

    void createSnackBar(String text, Color c) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Container(
            alignment: Alignment.center,
            height: media.width > 600 ? 100 : 50,
            child: Text(
              text,
              style: TextStyle(fontSize: 30, color: Colors.white),
            )),
        duration: const Duration(milliseconds: 4000),
        width: 500.0,
        backgroundColor: c,
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        behavior: SnackBarBehavior.floating,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      ));
    }

    return Align(
        alignment: Alignment.topCenter,
        child: Container(
            key: widget.key,
            width: 500,
            height: media.width < 600 ? 600 : 900,
            decoration: BoxDecoration(
              border: Border.all(width: 1, color: Color(0xFFdbe1e4)),
              borderRadius: BorderRadius.all(Radius.circular(15)),
              color: widget.colorBot,
            ),
            child: Column(
              children: [
                Align(
                    alignment: Alignment.topCenter,
                    child: Padding(
                        padding: EdgeInsets.only(
                          top: 0,
                        ),
                        child: Container(
                            width: 700,
                            height: media.width >= 600 ? 500 : 350,
                            decoration: BoxDecoration(
                              boxShadow: [
                                BoxShadow(
                                    color: Colors.white.withOpacity(0.4),
                                    spreadRadius: 2,
                                    blurRadius: 3,
                                    offset: Offset(0, 4)),
                              ],
                              border: Border.all(
                                  width: 1, color: Color(0xFFdbe1e4)),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(15)),
                              color: widget.colorTop,
                            ),
                            child: Column(children: [
                              Text(
                                widget.question,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: media.width > 600 ? 30 : 25,
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 15),
                                child: Image.asset(
                                  widget.imagePath,
                                  height: media.width > 600 ? 300 : 250,
                                  width: media.width > 600 ? 400 : 300,
                                ),
                              )
                            ])))),
                Padding(
                    padding: EdgeInsets.only(
                      top: 40,
                    ),
                    child: SizedBox(
                      width: 300,
                      height: 60,
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(15)),
                        child: ElevatedButton(
                            style: ButtonStyle(
                              backgroundColor: MaterialStateProperty.all(
                                Color(0xFF304e60),
                              ),
                            ),
                            child: Text(
                              widget.answer1,
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 15,
                              ),
                            ),
                            onPressed: widget.questionsAnswered == false
                                ? () {
                                    setState(() {
                                      if (widget.iscorrectAnswer1 == true) {
                                        scrollPage(); //THIS IS WHERE I USE THE FUNCTION TO SCROLL ON ALL BUTTONS
                                        createSnackBar(
                                            'Correct!', Color(0xFFa4d2ac));
                                        disableButton();
                                        Score.score++;
                                      } else {
                                        scrollPage();
                                        disableButton();
                                        createSnackBar(
                                            'Wrong Answer!', Color(0xFFEA4C46));
                                      }
                                    });
                                  }
                                : null),

移除了一些不必要的代码

Answer 1

您必须动态地创建和初始化全局密钥--请查看代码片段

`1.Map<int, GlobalKey> globalKeyMap = {}; 2.void initializeKeyMap() { for (int index = 0; index < yourListname.length; index++) { globalKeyMap[index] = GlobalKey(); }} 3.@override void initState() {  super.initState(); initializeKeyMap(); }   4.Container( key: globalKeyMap[index],child:.......<your Code>)`

Answer 2

我通过在质询()小部件中创建另一个参数来解决这个问题，并为每个小部件设置了一个键。然后我将使用moveToWidget键滚动到下一个问题()小部件

代码：

class Questions extends StatefulWidget {
  final String imagePath;
  final String question;
  final String answer1;
  final String answer2;
  final String answer3;

  final bool iscorrectAnswer1;
  final bool iscorrectAnswer2;
  final bool iscorrectAnswer3;

  final GlobalKey moveToWidgetKey;

  final Color colorTop;
  final Color colorBot;

  int score = 0;

  bool questionsAnswered = false;

  Questions({
    Key? key, //Set a unique key for each Question Widget
    required this.moveToWidgetKey, // Set the key of the next Question widget to scroll at
    required this.imagePath,
    required this.question,
    required this.answer1,
    required this.answer2,
    required this.answer3,
    required this.iscorrectAnswer1,
    required this.iscorrectAnswer2,
    required this.iscorrectAnswer3,
    required this.colorBot,
    required this.colorTop,
  }) : super(key: key);

scroll() {
    Scrollable.ensureVisible(widget.moveToWidgetKey.currentContext! //NEW CODE,
        duration: Duration(seconds: 2));

//Instantiate a Question
Questions(
                      key: Keys.key2,
                      moveToWidgetKey: Keys.key3,
                      imagePath: 'assets/images/cyberattack.jpg',
                      question: '2. What is the most used cyber-attack?',
                      answer1: 'DDoS',
                      answer2: 'Ransomware',
                      answer3: 'Phishing',
                      iscorrectAnswer1: false,
                      iscorrectAnswer2: false,
                      iscorrectAnswer3: true,
                      colorBot: Color(0xFF383c40),
                      colorTop: Color(0xffe9755c),
                    ),