Container BoxShadow 不适用于 InkWell 材料答案

【问题标题】：Container BoxShadow not working with InkWell MaterialContainer BoxShadow 不适用于 InkWell 材料
【发布时间】：2020-04-21 19:16:32
【问题描述】：

我想为这个容器使用 Inkwell splash。没有 Inkwell 小部件。

Expanded(
        child: Container(
          padding: EdgeInsets.all(12.0),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  color: Colors.black26,
                  offset: Offset(0, 1),
                  blurRadius: 2.0)
            ],
            borderRadius: BorderRadius.circular(12.0),
            color: _size.white,
          ),
          child: Column(
            children: <Widget>[
              Icon(
                Icons.book,
                color: _size.green,
              ),
              SizedBox(
                height: 4.0,
              ),
              Text('Instant'),
            ],
          ),
        ),
      ),

但是当我添加墨水瓶和材料小部件时，它看起来像

Expanded(
        child: Material(
          color: _size.white,
          child: InkWell(
            borderRadius: BorderRadius.circular(12.0),
            onTap: () {},
            splashColor: Colors.red,
            splashFactory: InkSplash.splashFactory,
            child: Container(
              padding: EdgeInsets.all(12.0),
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Colors.black26,
                      offset: Offset(0, 1),
                      blurRadius: 2.0)
                ],
                borderRadius: BorderRadius.circular(12.0),
                //color: _size.white,
              ),
              child: Column(
                children: <Widget>[
                  Icon(
                    Icons.book,
                    color: _size.green,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text('Instant'),
                ],
              ),
            ),
          ),
        ),
      ),

我从容器中删除了 boxshadow 并为材质添加了高程，我得到了这样的结果。

Expanded(
        child: Material(
          borderRadius: BorderRadius.circular(12.0),
          elevation: 2.0,
          color: _size.white,
          child: InkWell(
            borderRadius: BorderRadius.circular(12.0),
            onTap: () {},
            splashColor: Colors.red,
            splashFactory: InkSplash.splashFactory,
            child: Container(
              padding: EdgeInsets.all(12.0),
              decoration: BoxDecoration(
                /*boxShadow: [
                  BoxShadow(
                      color: Colors.black26,
                      offset: Offset(0, 1),
                      blurRadius: 2.0)
                ],*/
                borderRadius: BorderRadius.circular(12.0),
                //color: _size.white,
              ),
              child: Column(
                children: <Widget>[
                  Icon(
                    Icons.book,
                    color: _size.green,
                  ),
                  SizedBox(
                    height: 4.0,
                  ),
                  Text('Instant'),
                ],
              ),
            ),
          ),
        ),
      )

最后它类似于我需要的东西，但在容器顶部，即将到来的阴影或高程并不像需要的那样。任何人都如何获得像第一张图像一样的阴影。

【问题讨论】：

你为什么不直接使用一个凸起的按钮，它已经有了阴影和带有涟漪效果的 onPressed 回调。您可以像现有容器一样塑造按钮及其子项。

标签： flutter dart flutter-layout

【解决方案1】：

我通过用另一个 Container 小部件包装 Material 小部件来解决这个问题，然后我给这个容器提供了盒子阴影，我解决了我的问题。

Expanded(
        child: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  color: Colors.black26,
                  offset: Offset(0, 1),
                  blurRadius: 2.0)
            ],
            borderRadius: BorderRadius.circular(12.0),
            color: _size.white,
          ),
          child: Material(
            borderRadius: BorderRadius.circular(12.0),
            color: _size.white,
            child: InkWell(
              borderRadius: BorderRadius.circular(12.0),
              onTap: () {},
              splashColor: Colors.red,
              splashFactory: InkSplash.splashFactory,
              child: Container(
                padding: EdgeInsets.all(12.0),
                child: Column(
                  children: <Widget>[
                    Icon(
                      Icons.book,
                      color: _size.green,
                    ),
                    SizedBox(
                      height: 4.0,
                    ),
                    Text('Instant'),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),

【讨论】：

【解决方案2】：

使用 Card

试试这种方式

Card(
            elevation: 10.0,
              child: Container(
            padding: EdgeInsets.all(12.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12.0),
            ),
            child: Column(
              children: <Widget>[
                Icon(
                  Icons.book,
                  color: Colors.blue,
                ),
                SizedBox(
                  height: 4.0,
                ),
                Text('Instant'),
              ],
            ),
          ))

输出

【讨论】：

之前我也试过卡片，兄弟，当我使用卡片时，顶部阴影与底部阴影不同。现在我解决了我的问题兄弟。谢谢兄弟的回复。

【解决方案3】：

使用Inkwell时使用Ink而不是Material，然后给内部Container一个颜色（默认是透明的，只显示下面的阴影）：

Expanded(
  child: Ink(
    color: _size.white,
    child: InkWell(
      ...
      child: Container(
        decoration: BoxDecoration(
          color: Color.white,
          ...
        ),
        ...
      ),
    ),
  ),
),

【讨论】：

我还需要波纹效果，当我使用 Ink 代替 Material 时，波纹效果不起作用。现在我也解决了我的问题。感谢您的回复。