flutter教程coachmark位置错误

Question

我有本教程的 3 个目标，在第二个和第三个教程中工作正常，但在教程的第一个目标中位置错误。我在 2 个 Android 设备中尝试过，它工作正常，但我在其他 Android 设备上尝试过，圆圈突出显示的位置错误，如下所示，圆圈必须位于右上角的红色标记中。

关键位置不对是keyEditButton

注意：（ketEditButton第一个目标）和keySaveButton（第三个目标）具有相同的位置，keySaveButton位置很好，但是keyEditButton is not

这是我的代码

void initState() {
  Future.delayed(Duration.zero, showTutorial);
}



void showTutorial() {
    tutorialON = true;
    initTargets();
    tutorialCoachMark = TutorialCoachMark(
      context,
      targets: targets,
      colorShadow: const Color(0xFF061988),
      textSkip: "SKIP",
      paddingFocus: 10,
      opacityShadow: 0.8,
      onFinish: () {
        // print("finish");
        tutorialON = false;
        categoriesTutorialPreference(true);
      },
      onClickTarget: (target) {
        // print('onClickTarget: $target');
        
      },
      onClickOverlay: (target) {
        print('onClickOverlay: $target');
      },
      onSkip: () {
        
      },
    )..show();
  }

void initTargets() {
    targets.clear();
    targets.add(
      TargetFocus(
        identify: "keyEditButton",
        keyTarget: keyEditButton,
        alignSkip: Alignment.topLeft,
        enableOverlayTab: false,
        contents: [
          TargetContent(
            align: ContentAlign.bottom,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "Klik untuk edit urutan kategori",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: textHeader2
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );

    targets.add(
      TargetFocus(
        identify: "keyCategoriesContainer",
        keyTarget: keyCategoriesContainer,
        alignSkip: Alignment.topLeft,
        enableOverlayTab: false,
        contents: [
          TargetContent(
            align: ContentAlign.bottom,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    "klik dan tahan untuk menggeser urutan kategori",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: textHeader2
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );

    targets.add(
      TargetFocus(
        identify: "keySaveButton",
        keyTarget: keySaveButton,
        alignSkip: Alignment.topLeft,
        enableOverlayTab: false,
        contents: [
          TargetContent(
            align: ContentAlign.bottom,
            builder: (context, controller) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text(
                    "Klik untuk keluar dari proses edit kategori",
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: textHeader2
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

这就是我添加这个库的密钥的方法

appBar: AppBar(
          backgroundColor: Palette.color_primary,
          title: const Text("Categories", style: TextStyle(color: Colors.white)),
          actions: <Widget>[
            Padding(
                key: edit ? keySaveButton : keyEditButton,  // <- this key
                padding: const EdgeInsets.only(right: 20.0),
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      if (edit) {
                        btnEdit = "Edit";
                        icon = const FaIcon(FontAwesomeIcons.pen);
                        edit = false;
                      } else {
                        btnEdit = "Done";
                        icon = const FaIcon(FontAwesomeIcons.check);
                        edit = true;
                      }
                    });
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [icon],
                  ),
                )),
          ],
          iconTheme: const IconThemeData(
            color: Colors.white, //change your color here
          ),
        ),

Answer 1

添加更多延迟。发生这种情况是因为 showTutorial 在页面未完全呈现时调用。下面，为我工作。

Future.delayed(const Duration(seconds: 1), showTutorial);