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
相关产品推荐
相关产品推荐

