展示视图滚动问题 - Flutter 移动应用

Question

展示视图：^3.0.0

final GlobalKey iconShowcaseKey = GlobalKey();

/////

VisibilityDetector(
       key: Key(
       'visibility_detector'),
       onVisibilityChanged: (visibilityInfo) {
       var visiblePercentage =
       visibilityInfo.visibleFraction * 100;

       // Check if more than 50% of the widget is visible
       if (visiblePercentage > 50) {
        ShowCaseWidget.of(context).startShowCase([iconShowcaseKey]);
        print(" 50% visible");
         }
        },

      child: Showcase(
       key: iconShowcaseKey,
      descriptionPadding:
      EdgeInsets.all(2.sp),
      tooltipPosition: TooltipPosition.bottom,
      overlayOpacity: 0,
      tooltipBackgroundColor: ColorConstants.blackColor,
      descTextStyle: TextStyle(
      fontSize: 10.sp,
      fontWeight: FontWeight.w500,
      color: Colors.white,
      ),
      titleTextStyle: TextStyle(
      fontSize: 12.sp,
      fontWeight: FontWeight.w500,
      color: Color(0XFF3E3E3E),
      ),
      child:Container(
            height:100,
            width:80,
            color:Colors.red),
     description:"Click for options",
  )
 )
)

我在屏幕上使用展示视图，但在脚手架内滚动时，展示工具提示有时会与目标小部件不对齐并出现在错误的位置。您对如何解决此问题有什么建议吗？提前致谢！！！

Answer 1

要解决问题并确保工具提示与目标小部件正确对齐，您可以：

延迟 ShowCaseWidget.startShowCase 调用。 在开始 Showcase 之前确保小部件已完全渲染。

VisibilityDetector( key: Key('visibility_detector'),
onVisibilityChanged: (visibilityInfo) {
var visiblePercentage = visibilityInfo.visibleFraction * 100;

// Check if more than 50% of the widget is visible
if (visiblePercentage > 50) {
  Future.delayed(const Duration(milliseconds: 100), () {
    ShowCaseWidget.of(context)?.startShowCase([iconShowcaseKey]);
  });
  print("50% visible");
}
  },
child: Showcase(
key: iconShowcaseKey,
descriptionPadding: EdgeInsets.all(2.sp),
tooltipPosition: TooltipPosition.bottom,
overlayOpacity: 0,
tooltipBackgroundColor: ColorConstants.blackColor,
descTextStyle: TextStyle(
  fontSize: 10.sp,
  fontWeight: FontWeight.w500,
  color: Colors.white,
),
titleTextStyle: TextStyle(
  fontSize: 12.sp,
  fontWeight: FontWeight.w500,
  color: Color(0XFF3E3E3E),
),
child: Container(
  height: 100,
  width: 80,
  color: Colors.red,
),
description: "Click for options",
),
)