dart 在Flutter中提供自定义形状以展示小部件的工具提示

vsaztqbk  于 2023-10-13  发布在  Flutter
关注(0)|答案(1)|浏览(119)

在flutter应用中,我使用flutter show case view dependency

class CustomShowCaseWidget extends StatelessWidget {
  final Widget child;
  final String description;
  final GlobalKey globalKey;
  final double radius;
  const CustomShowCaseWidget(
      {Key key,
      @required this.child,
      @required this.description,
      @required this.globalKey,
      @required this.radius})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Showcase(
        key: globalKey,
        showArrow: false,
        description: description,
        disableAnimation: true,
        shapeBorder: const CircleBorder(),
        radius: BorderRadius.all(Radius.circular(radius)),
        child: child);
  }
}

现在,工具提示背景是一个圆角矩形,它出现在所展示项的附近。但我希望它是一个特定的形状,在我的情况下,左下四分之一的圆圈,这是坚持到屏幕的最右边的3/10高度的设备,为每一个展示的项目,因为它可能是在顶部或非常底部的屏幕。我可以用这些参数做这个吗?:

const Showcase({
    required this.key,
    required this.child,
    this.title,
    required this.description,
    this.shapeBorder,
    this.overlayColor = Colors.black45,
    this.overlayOpacity = 0.75,
    this.titleTextStyle,
    this.descTextStyle,
    this.showcaseBackgroundColor = Colors.white,
    this.textColor = Colors.black,
    this.scrollLoadingWidget = const CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation(Colors.white)),
    this.showArrow = true,
    this.onTargetClick,
    this.disposeOnTap,
    this.animationDuration = const Duration(milliseconds: 2000),
    this.disableAnimation,
    this.contentPadding =
        const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
    this.onToolTipClick,
    this.overlayPadding = EdgeInsets.zero,
    this.blurValue,
    this.radius,
    this.onTargetLongPress,
    this.onTargetDoubleTap,
    this.tipBorderRadius,
  })
ni65a41a

ni65a41a1#

我发现这个解决方案可以使用showcaseview定义你自己的工具提示小部件

Showcase.withWidget(
  key: _one,
  height: 70, // tooltip height
  width: 80,
  targetShapeBorder: CircleBorder(), 
  container: Row(), // custom tooltip
  child: Row(), 
),

相关问题