Container BoxShadow 不适用于 InkWell 材料

Question

我想在这个容器中使用 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'),
                ],
              ),
            ),
          ),
        ),
      )

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

Answer 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'),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),