[英]IconButton onPressed not working | InkWell onTap not working | Flutter
So I've seen this weird behaviour in flutter and that is when I'm using a SvgPicture as a child widget to IconButton or InkWell.所以我在 flutter 中看到了这种奇怪的行为,那是当我使用 SvgPicture 作为 IconButton 或 InkWell 的子窗口小部件时。
I've this card which has two parts separated by a divider.我有这张卡片,它有两个部分,中间用分隔线隔开。 First part is a TextWidget which shows the card name and the Second part is a SVG (add button icon)
第一部分是显示卡片名称的 TextWidget,第二部分是 SVG(添加按钮图标)
Card(
elevation: 0,
child: Column(
children: [
Text(
cardName,
),
Divider(
color: dividerColor,
),
SvgPicture.asset(
'assets/icons/add_button_icon.svg',
color: iconColor,
),
],
),
);
What I want to do?我想做的事? I want to be able to execute a function whenever this card is clicked (be that it's cardName or the SVG icon that I'm using)
我希望能够在单击此卡时执行 function(无论是 cardName 还是我正在使用的 SVG 图标)
What I did?我做了什么?
No matter where I put InkWell, the callback only gets executed when I click the card name and not the whole card or the SVG icon.无论我将 InkWell 放在哪里,回调只会在我单击卡片名称而不是整个卡片或 SVG 图标时执行。
Any idea what I'm doing wrong and how I can resolve this?知道我做错了什么以及如何解决这个问题吗?
EDIT: The whole widget looks like this:编辑:整个小部件看起来像这样:
InkWell renderCard(
BuildContext context,
String cardName,
int index,
int? counter,
Color dividerColor,
Color textColor,
Color iconColor,
void Function() onPress) {
return InkWell(
onTap: onPress,
child: Card(
elevation: 0,
color: index == counter ? cPrimaryColor : cSecondaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(cDefaultPadding),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: cDefaultPadding),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
cardName,
style: Theme.of(context).textTheme.titleMedium!.copyWith(
color: textColor,
fontSize:
2.2 * TextSizeConfig.blockSizeVertical!.toDouble()),
),
Divider(
color: dividerColor,
),
spacer(1),
SvgPicture.asset(
'assets/icons/add_button_icon.svg',
color: iconColor,
),
spacer(1),
Text(
'ADD DOCUMENT',
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: textColor,
fontSize:
1.5 * TextSizeConfig.blockSizeVertical!.toDouble()),
),
],
),
),
),
);
}
Overall Structure: SafeArea -> SingleChildScrollView -> Column -> Stack -> Column -> renderCard总体结构:SafeArea -> SingleChildScrollView -> Column -> Stack -> Column -> renderCard
I tested your icon and here is my code:我测试了你的图标,这是我的代码:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: InkWell(
onTap: (() => print('tapped')),
child: Card(
elevation: 0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('name'),
const Divider(color: Colors.red,),
SvgPicture.asset('assets/icons/plus.svg', color: Colors.blue,)
],
),
),
),
),
);
}
As I click on the icon, it works.当我单击该图标时,它起作用了。 See here
看这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.