【发布时间】：2025-12-07 03:15:02
【问题描述】：
Flutter Github 中的问题类似：https://github.com/flutter/flutter/issues/23454。我对手势检测器有一个混乱的问题。方法onTap() 没有给我打印出来。它看起来像静态的，但是我把它放在有状态的小部件中，我已经用有状态的小部件编写了它，它的 sn-p 代码如下：
class HeaderData extends StatefulWidget {
@override
_HeaderDataState createState() => _HeaderDataState();
}
class _HeaderDataState extends State<HeaderData> {
List<String> lsDummy = ['image1',
'image2',
'image3'
];
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: 250,
child: Swiper(
autoplayDelay: 3000,
itemCount: lsDummy.length,
autoplay: true,
pagination: SwiperPagination(),
itemBuilder: (context, index){
return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
},
),
),
Container(
padding: const EdgeInsets.only(left: 16.0, right: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 70),
Image(
image: AssetImage('images/travel_logo.png'),
alignment: Alignment.center,
width: 200,
color: Colors.blue,
),
const SizedBox(height: 20.0),
],
),
GestureDetector(
onTap: (){
print('test');
},
child: Container(
padding: EdgeInsets.all(4),
child: Icon(Icons.settings, color: Colors.white,)
)
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 150),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.8),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
SizedBox(width: 10,),
Icon(Icons.keyboard_arrow_down, color: Colors.white,)
],
),
),
),
SizedBox(height: 10.0),
],
);
}
}
如果我们运行应用程序，这个小部件将像这张图片一样呈现。有人可以帮我为什么会这样吗？如果您认为这个问题不清楚，请告诉我。所以我可以更新问题
更新
我已经使用iconButton尝试了代码，但仍然无法触发print
return Stack(
children: <Widget>[
Container(
height: 250,
child: Swiper(
autoplayDelay: 3000,
itemCount: lsDummy.length,
autoplay: true,
pagination: SwiperPagination(),
itemBuilder: (context, index){
return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
},
),
),
Container(
padding: const EdgeInsets.only(left: 16.0, right: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(height: 70),
Image(
image: AssetImage('images/travel_logo.png'),
alignment: Alignment.center,
width: 200,
color: Colors.blue,
),
const SizedBox(height: 20.0),
],
),
IconButton(
icon: Icon(Icons.settings, color: Colors.white,),
onPressed: ()=> print('test')
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 150),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.8),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
SizedBox(width: 10,),
Icon(Icons.keyboard_arrow_down, color: Colors.white,)
],
),
),
),
SizedBox(height: 10.0),
],
);
更新 2 我为此做了新的实验。我尝试制作位于其他小部件之上的虚拟容器。然后我设置了手势检测器。但我仍然没有打印出来。这是我的代码和小部件的图片。顺便说一句，flutter github 中有类似的问题，这里：https://github.com/flutter/flutter/issues/23454 票务问题仍未解决。
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: 250,
child: Swiper(
autoplayDelay: 3000,
itemCount: lsDummy.length,
autoplay: true,
pagination: SwiperPagination(),
itemBuilder: (context, index){
return PNetworkImage(image: lsDummy[index], fit: BoxFit.cover, height: 200,);
},
),
),
Padding(
padding: const EdgeInsets.only(top: 150),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 50),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.8),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('PILIH DESTINASI', style: TextStyle(color: Colors.white),),
SizedBox(width: 10,),
Icon(Icons.keyboard_arrow_down, color: Colors.white,)
],
),
),
),
Container(
padding: EdgeInsets.only(top: 50),
child: Image(image: AssetImage('images/travel_logo.png'),
alignment: Alignment.center,
width: 200,
color: Colors.blue,),
),
GestureDetector(
onTap: (){
print('teste');
},
child: Container(
width: 100,
height: 100,
color: Colors.grey,
),
)
],
);
}
【问题讨论】：
-
堆栈小部件保持小部件的位置，以便检测到您的 GestureDetector，将其放在堆栈小部件的末尾，这会将您的 GestureDetector 放在堆栈的顶部
-
但是，我只需要手势检测器仅适用于设置图标，正如您在图片圈中看到的那样。如果我把它放在栈顶，它可能会触发其他小部件，对吧？
-
如果你只想要 SettingsIcon 点击你可以使用 IconButton 小部件
-
你试过用
IgnorePointer包裹除设置部分之外的小部件吗？如果这是唯一可点击的部分，您可能想要这样做。我不确定这是否符合您的需要。 -
@YogeshChawla 我试过这样的 IconBotton： IconButton( icon: Icon(Icons.settings, color: Colors.white,), onPressed: (){ print('oke'); } ),但仍然没有触发打印
标签： android flutter dart stackview