与容器装饰一起使用时，墨水瓶不显示波纹

Posted 2023-02-23

【中文标题】与容器装饰一起使用时，墨水瓶不显示波纹

【英文标题】：Inkwell not showing ripple when used with Container decoration

【发布时间】：2018-12-30 00:05:34

【问题描述】：

我想在一个项目上添加一个波纹，它工作正常，直到我使用BoxDecoration 在项目上添加一个渐变。

Widget build(BuildContext context) 
    return Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        shadowColor: Colors.grey[50],
        child: InkWell(
          onTap: () ,
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: AlignmentDirectional.bottomStart,
                end: AlignmentDirectional.topEnd,
                colors: [
                  Colors.yellow[800],
                  Colors.yellow[700],
                ],
              ),
            ),
            padding: EdgeInsets.all(16.0),
            child: Text(
              widget.title,
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  

【问题讨论】：

这能回答你的问题吗？ InkWell not showing ripple effect

【参考方案1】：

2019 年更新：

您应该在Material 中使用Ink 小部件，而不是Container。 它也需要decoration 参数：

Material(
      child: Ink(
        decoration: BoxDecoration(
          // ...
        ),
        child: InkWell(
          onTap: () ,
          child: child, // other widget
        ),
      ),
);

【讨论】：

那个帮助我，涟漪效应不在外部元素的后面。现在波纹在点击的元素中整体可见！

谢谢。它可以工作，但是，尽管是“边界半径”，但当它单击时，它会假装它不存在。这正常吗？

这是最好的答案，它更短。事实上，它在没有外部 Material 小部件的情况下对我有用。

@FatihMertDoğancan ***.com/questions/64410618/… InkWell 小部件具有 customBorder 属性。

【参考方案2】：

我找到了解决办法：

我需要一个Material 用于Inkwell，一个Material 用于高程和圆形边框。 内部Material 的类型为MaterialType.transparency，因此它不会在其父级的框装饰上绘制任何内容，并且仍保留墨迹效果。阴影和边框由外部Material控制。

Container(
      margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
      child: Material(  // <----------------------------- Outer Material
        shadowColor: Colors.grey[50],
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
        elevation: 6.0,
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: AlignmentDirectional.bottomStart,
              end: AlignmentDirectional.topEnd,
              colors: [
                AppColors.pinkDark,
                AppColors.pink,
              ],
            ),
          ),
          child: Material(  // <------------------------- Inner Material
            type: MaterialType.transparency,
            elevation: 6.0,
            color: Colors.transparent,
            shadowColor: Colors.grey[50],
            child: InkWell(  //<------------------------- InkWell
              splashColor: Colors.white30,
              onTap: () ,
              child: Container(
                padding: EdgeInsets.all(16.0),
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.work,
                      size: 40.0,
                      color: Colors.white,
                    ),
                    SizedBox(
                      width: 20.0,
                    ),
                    Column(
                      children: <Widget>[
                        Text(
                          widget.title,
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

【讨论】：

这个，工作伙伴，迄今为止最好的解决方案之一，谢谢 :)

【参考方案3】：

我创建的简单的飞溅效果小部件，效果很好。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SplashEffect extends StatelessWidget 
  final Widget child;
  final Function onTap;

  const SplashEffect(Key key, this.child, this.onTap) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Material(
      type: MaterialType.transparency,
      child: InkWell(
        borderRadius: BorderRadius.all(Radius.circular(16)),
        child: child,
        onTap: onTap,
      ),
    );
  

【参考方案4】：

Splash 颜色被容器 BoxDecoration 重叠

试试这个

  Widget build(BuildContext context) 
   return new Container(
      decoration: BoxDecoration(
      borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
      gradient: LinearGradient(
        begin: AlignmentDirectional.bottomStart,
        end: AlignmentDirectional.topEnd,
        tileMode: TileMode.repeated,
        colors: [
          Colors.yellow[800],
          Colors.yellow[700],
        ],
      ),
      boxShadow: <BoxShadow>[
        new BoxShadow(
            color: Colors.grey[50],
            //blurRadius: 0.3,
            blurRadius: 6.0,
            offset: new Offset(0.0, 4.0)
        )
      ]
  ),
  margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
  child: Material(
    color: Colors.transparent,
    //shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
    //elevation: 6.0,
    //shadowColor: Colors.grey[50],
    child: InkWell(
      splashColor: const Color(0x8034b0fc),
      onTap: () ,
      child: Container(
        //decoration: ,
        padding: EdgeInsets.all(16.0),
        child: Text(
          'Click',
          style: TextStyle(
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
 );

【讨论】：

不，结果很糟糕，项目顶部出现灰色。我已经尝试过这种方法。

您不必使用嵌套材质小部件。我更新了我的解决方案。我认为这会奏效。材料升高导致了这个问题。仅供参考：如果任何一种解决方案都不起作用，您不应该直接投反对票。首先，您必须让他们知道您面临的问题。然后决定。和平。

是的，您提供的解决方案有效，但我想要Material 本身的阴影和半径，这是我无法理解的。我知道 BoxDecoration 可以实现阴影，但需要 Material。很抱歉投了反对票！

【参考方案5】：

如果有人来这里想要使用带有圆形装饰的墨水瓶（就像我一样），我会使用公认的答案来想出这个。

Material(
  child: Ink(
      width: 150,
      height: 150,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.grey[350],
        border: Border.all(
          color: Colors.red,
          width: 4.0,
        ),
      ),
      child: InkWell(
        customBorder: const CircleBorder(),
        onTap: onTap,
        child: const Icon(Icons.add, size: 48, color: Colors.white),
      ),
    ));