Question

我正在开发一个小部件，但由于某种原因，我无法显示 boxshadow。我已经将它设置在容器上，但我不知道为什么它不起作用。我猜它与 ClipPath 有关系？

Widget _routineBox({bool isNight}) {
return Padding(
  padding: EdgeInsets.all(18.0),
  child: ClipPath(
    clipper: ShapeBorderClipper(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(12)))),
    child: Container(
      height: 70.0,
      width: 200.0,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          left:
              BorderSide(color: Theme.of(context).primaryColor, width: 8.0),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 0.3,
            blurRadius: 10,
            offset: Offset(2, 2), // changes position of shadow
          ),
        ],
      ),
      child: Center(
          child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: new Text("Your Text",
            style: TextStyle(fontSize: 30.0, color: Colors.black)),
      )),
    ),
  ),
);

}

Answer 1

将 ClipPath 小部件放在 Material 小部件中，并给它一个像这样的高度：

child: Material(
          elevation: 10,
          child: ClipPath(
    ))

代码如下：

Padding(
    padding: EdgeInsets.all(18.0),
    child: Material(
      elevation: 10,
      child: ClipPath(
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(12)))),
        child: Container(
          height: 70.0,
          width: 200.0,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
              left: BorderSide(
                  color: Theme.of(context).primaryColor, width: 8.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                spreadRadius: 0.3,
                blurRadius: 10,
                offset: Offset(2, 2), // changes position of shadow
              ),
            ],
          ),
          child: Center(
              child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: new Text("Your Text",
                style: TextStyle(fontSize: 30.0, color: Colors.black)),
          )),
        ),
      ),
    ),
  )

Answer 2

想通了。不得不将整个东西包裹在另一个容器中，然后像这样将 boxShadow 放入那个外部容器中：

  Widget _routineBox({bool isNight}) {
    return Padding(
      padding: EdgeInsets.all(18.0),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(12)),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 0.3,
              blurRadius: 10,
              offset: Offset(2, 2),
            ),
          ],
        ),
        child: ClipPath(
          clipper: ShapeBorderClipper(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(12)))),
          child: Container(
            height: 150.0,
            width: MediaQuery.of(context).size.height * 0.8,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                left: BorderSide(
                    color: Theme.of(context).primaryColor, width: 8.0),
              ),
            ),
            child: Center(
                child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: new Text("Your Text",
                  style: TextStyle(fontSize: 30.0, color: Colors.black)),
            )),
          ),
        ),
      ),
    );
  }

为什么这个boxshadow没有出现？

2 个答案: