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

这是您的构建方法的解决方案。我将InkWellMateral 小部件放置为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 中完全不起作用

如何用 Flutter 处理嵌套的 InkWell?

Dart/Flutter 不使用 Inkwell 和手势检测器更改页面

让小部件在点击另一个小部件时显示 Flutter

颤振更新文本小部件变量而无需重新加载

Flutter 中的索引堆叠。如何在所有其他小部件之上显示容器?