You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter3.7升级后ShowcaseView无法禁用目标组件点击问题求助

Flutter 3.7升级后ShowcaseView组件无法禁用目标组件点击

升级至Flutter 3.7版本后,出现ShowcaseView组件无法禁用目标组件点击的异常。在未完成全部展示流程前,点击目标组件(如浮动操作按钮)会直接跳转到下一页,导致展示流程中断,不符合预期效果。

以下是完整代码示例:

主页面(main.dart)

import 'package:flutter/material.dart';
import 'package:showcaseview/showcaseview.dart';

void main() {
 runApp(const MyApp());
}

MyApp组件

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
Widget build(BuildContext context) {
    return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
 //showCaseWidget
  home: ShowCaseWidget(
      disableMovingAnimation: true,
      disableScaleAnimation: true,
      builder: Builder(
          builder: (_) =>
              const MyHomePage(title: 'Flutter Demo Home Page')),
      onFinish: () async {}),
      );
     }
  }

MyHomePage组件

class MyHomePage extends StatefulWidget {
    const MyHomePage({super.key, required this.title});

  final String title;

 @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    final int _counter = 0;
//showCase keys
  final _increment = GlobalKey();
  final _decrement = GlobalKey();
  final _texxt = GlobalKey();

void navigateToPage(fun) {
   Navigator.push(
    context,
    MaterialPageRoute(
        builder: (_) => ShowCaseWidget(
            builder: Builder(builder: (_) => fun), onFinish: () async {})));
}

 void _incrementCounter() {
navigateToPage(const Increment());
}

 void _textWidget() {
 navigateToPage(const TextWidget());
}

 void _decrementCounter() async {
  navigateToPage( const Decrement());
}

 @override
void initState() {
  super.initState(); 
 //start showcase
  WidgetsBinding.instance.addPostFrameCallback(
  (_) => ShowCaseWidget.of(context)
      .startShowCase([_increment, _decrement, _texxt]),
   );
 }

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: InkWell(
    onTap: _textWidget,
    child: Center(
      child: CustomShowcaseWidget(
        description: 'this is text widget ',
        globalKey: _texxt,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
    ),
  ),
  floatingActionButton: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      CustomShowcaseWidget(
        description: 'this is increment floating button widget ',
        globalKey: _increment,
        child: FloatingActionButton(
          heroTag: "increment",
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
      CustomShowcaseWidget(
        description: 'this is decrement floating button widget ',
        globalKey: _decrement,
        child: FloatingActionButton(
          heroTag: "decrement",
          onPressed: _decrementCounter,
          tooltip: 'decrement',
          child: const Icon(Icons.minimize),
        ),
      ),
    ],
  ), 
   );
  }
}

CustomShowcaseWidget组件

class CustomShowcaseWidget extends StatelessWidget {
final Widget child;
 final String description;
final GlobalKey globalKey;

 const CustomShowcaseWidget(
  {required this.description,
  required this.child,
  required this.globalKey,
  Key? key})
  : super(key: key);

 @override
 Widget build(BuildContext context) => Showcase(
    key: globalKey,
    tooltipBackgroundColor: Colors.green,
    tooltipPadding:
        const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
    showArrow: true,
    disableMovingAnimation: true,
    disableScaleAnimation: true,
    disableDefaultTargetGestures: true,
    description: description,
    descTextStyle: const TextStyle(
        color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20),
    child: child,
  );
}

Increment组件

class Increment extends StatelessWidget {
  const Increment({super.key});

 @override
 Widget build(BuildContext context) {
   return Container(
  color: Colors.white,
  child: const Center(
    child: Text("Increment Screen"),
    ),
  );
  }
}

Decrement组件

class Decrement extends StatelessWidget {
  const Decrement({super.key});

 @override
 Widget build(BuildContext context) {
return Container(
  color: Colors.white,
  child: const Center(
    child: Text("Decrement Screen"),
  ),
);
 }
}

TextWidget组件

class TextWidget extends StatelessWidget {
 const TextWidget({super.key});

 @override
 Widget build(BuildContext context) {
   return Container(
    color: Colors.white,
    child: const Center(
      child: Text("Text Screen"),
     ),
    );
  }
 }

问题表现:展示流程中点击浮动操作按钮(+)这类目标组件,会直接跳转到对应页面,打断展示流程。


内容的提问来源于stack exchange,提问作者Sukaina Ahmed

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 15:35:44