与容器装饰一起使用时，墨槽未显示出波纹 [英] Inkwell not showing ripple when used with Container decoration

问题描述

我想在项目上添加波纹，直到我使用 BoxDecoration 在项目上添加渐变为止，它都可以正常工作.

I want to add a ripple on an item, it is working fine until I add a gradient on the item using 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,
              ),
            ),
          ),
        ),
      ),
    );
  }

推荐答案

我找到了解决方法:

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

I need one Material for Inkwell, and one Material for elevation and rounded borders. The inner Material has a type of MaterialType.transparency so that it doesn't draw anything over the box decoration of its parent and still preserve the ink effect. The shadow and borders are controlled by outer 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,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );

这篇关于与容器装饰一起使用时，墨槽未显示出波纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！