flutter - Flutter InkWell 小部件未通过容器的渐变和颜色显示
问题描述
编辑:我尝试将 包装Container
在一个Material
小部件中并将颜色属性移动到Material
小部件,但我将一堆ResourceCards
水平放置,因此来自小部件ListView,
的颜色似乎只填充. Material
ResourceCard
我ResourceCard
在 Flutter 中创建了自己的小部件。我用 a 包裹它GestureDetector
来检测点击,但我想显示某种反馈或效果来通知用户它被点击了。我决定GestureDetector
用一个InkWell
小部件替换 ,但我没有通过容器的线性渐变和颜色看到飞溅效果,所以我只是将它恢复为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',
),
),
),
],
),
);
}
}
解决方案
最简单的解决方案是使用Material
小部件作为父级InkWell
并将其设置color
为透明。InkWell
必须仅在卡片上设置(在您的示例中,设置GestureDetector
在整个列上)。为了适合确切的形状,与您的卡片(容器)InkWell
相同borderRadius
这是您的构建方法的解决方案。我将InkWell
and小部件作为小部件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,
),
),
),
),
),
...
推荐阅读
- multithreading - 将相同的可变函数同时应用于相同 Vec 的不同元素
- python - 为什么我没有从 Scrapy 的工作页面获取数据?
- java - guava LoadingCache.refresh - 如果我们可以只使用 Cache.invalidate,为什么还需要它?
- java - 使用带有嵌套导入的模式在 java 中验证 XML
- node.js - https.Agent 在 Node 中的作用是什么?
- android - 安卓; OkHttpClient 不适用于 httpS
- javascript - FirebaseError:消息:我们无法注册默认服务工作者。无法为范围注册 ServiceWorker
- c# - C#如何忽略无效列
- c# - 如何初始化一个`List
>>`正确吗? - typescript - 如何使用 Typescript 在 Vue 3.0 setup() 函数中使用 async/await