颤振墨孔小部件未通过容器的渐变和颜色显示

Question

EDIT：我曾尝试将Container包装在Material小部件中，并将颜色属性移动到Material小部件，但我将一堆ResourceCards放置在水平的ListView,中，因此Material小部件的颜色似乎只填充了ResourceCard周围的空间。

我在Flutter中创建了自己的小部件ResourceCard。我用GestureDetector来检测敲击，但我想显示某种反馈或效果来通知用户它被敲击了。我决定用InkWell小部件替换GestureDetector，但通过容器的线性渐变和颜色看不到飞溅效果，所以我只是将其恢复为GestureDetector。我见过其他有可能解决问题的帖子，但没有一个能使用线性渐变和颜色。以下是其中一个ResourceCard小部件的外观：https://i.stack.imgur.com/N2txv.jpg.这是小部件的代码：

class ResourceCard extends StatelessWidget {
ResourceCard({
@required this.colour,
@required this.margin,
@required this.cardText,
this.onPress,
@required this.cardCaption,
@required this.paddingText,
});
final Color colour;
final String cardText;
final Function onPress;
final EdgeInsets margin;
final String cardCaption;
final EdgeInsets paddingText;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Column(
children: <Widget>[
Container(
width: 75.0,
height: 75.0,
child: Center(
child: Text(
cardText,
style: TextStyle(
color: Colors.white,
fontFamily: 'Circular STD',
fontWeight: FontWeight.w900,
fontSize: 20.0,
),
),
),
margin: margin,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [colour, Colors.blue],
),
color: colour,
borderRadius: BorderRadius.circular(15.0),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.5),
blurRadius: 10.0,
spreadRadius: 1.0,
)
],
),
),
Padding(
padding: paddingText,
child: Text(
cardCaption,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white70,
fontWeight: FontWeight.w300,
fontSize: 10.0,
fontFamily: 'Circular STD',
),
),
),
],
),
);
}
}

Answer 1

最简单的解决方案是使用Material小部件作为InkWell的父级，并将其color设置为透明。InkWell必须仅在卡上设置(在您的示例中，GestureDetector设置在整列上(。为了适应确切的形状，InkWell获得与您的卡(容器(相同的borderRadius

以下是您的构建方法的解决方案。我放置了InkWell和Materal小部件作为Center小部件的父级

@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
width: 75.0,
height: 75.0,
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onPress,
borderRadius: BorderRadius.circular(15.0),
splashColor: Colors.grey[500],
child: Center(
child: Text(
cardText,
style: TextStyle(
color: Colors.white,
fontFamily: 'Circular STD',
fontWeight: FontWeight.w900,
fontSize: 20.0,
),
),
),
),
),
...

Answer 2

只需在Material类上设置所需的背景颜色：

Material(
color: Colors.grey.shade200, // background color
child: InkWell(
onTap: () {},
splashColor: Colors.grey.shade300, // splash color
child: Container(
// content
),
),
);