Flutter InkWell 小部件未通过容器的渐变和颜色显示
Posted
技术标签:
【中文标题】Flutter InkWell 小部件未通过容器的渐变和颜色显示【英文标题】:Flutter InkWell widget not showing through a container's gradient and color 【发布时间】:2020-08-04 11:59:40 【问题描述】:编辑:我尝试将Container
包装在Material
小部件中并将颜色属性移动到Material
小部件,但我将一堆ResourceCards
放置在水平ListView,
中所以Material
小部件的颜色似乎只填充了 ResourceCard
周围的空间。
我在 Flutter 中创建了自己的小部件 ResourceCard
。我用GestureDetector
包裹它来检测点击,但我想显示某种反馈或效果来通知用户它被点击了。我决定用InkWell
小部件替换GestureDetector
,但我没有通过容器的线性渐变和颜色看到飞溅效果,所以我只是将其恢复为GestureDetector
。我看过其他具有潜在解决方法的帖子,但没有一个适用于线性渐变和颜色。这是ResourceCard
小部件之一的外观:https://imgur.com/dg3fu9e。这是小部件的代码:
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',
),
),
),
],
),
);
【问题讨论】:
只是为了确保:您希望 InkWell 在孔卡上产生飞溅效果,而不仅仅是带有渐变的圆形容器? 查看api.flutter.dev/flutter/material/InkWell-class.html 并查看Troubleshooting
部分
@Manuel 我希望 InkWell 飞溅只出现在卡片上(里面有几个字母的圆形容器),而不是下面的文本。本质上,我希望它像一个 FlatButton。
【参考方案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,
),
),
),
),
),
...
【讨论】:
如果我在容器上包含装饰,则对我不起作用 @Moralde-Sama 用 Ink 小部件包裹 InkWell,该小部件具有装饰参数以上是关于Flutter InkWell 小部件未通过容器的渐变和颜色显示的主要内容,如果未能解决你的问题,请参考以下文章
Flutter:InkWell 在 Card 中完全不起作用