Question

考虑以下片段：

Material(
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(30.0),
    topRight: Radius.circular(30.0),
  ),
  elevation: 4.0,
  child: Container(
    padding: const EdgeInsets.fromLTRB(24, 30, 24, 8),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(30.0),
        topRight: Radius.circular(30.0),
      ),
    ),
    child: Text('foo'),
  )
)

这将在小部件周围渲染投影。但是，我只希望阴影向左/上/右，而不是底部。如何实现？

Answer 1

您可以删除Material小部件并使用Container的BoxShadow属性：

Container(        
        child: Center(
          child: Container(
            padding: const EdgeInsets.fromLTRB(24, 30, 24, 8),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(0, -2),
                  spreadRadius: 1.5,
                  blurRadius: 2
                )
              ],
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(30.0),
                topRight: Radius.circular(30.0),
              ),
            ),
            child: Text('foo'),
          ),
        ),
      ),

boxShadow可以接收BoxShadow的数组。因此，您可以根据需要设置阴影：

Container(
            padding: const EdgeInsets.fromLTRB(24, 30, 24, 8),
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(0, -2),
                  blurRadius: 2
                ),
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(-2,-1),
                  blurRadius: 2
                ),
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(2, -1),
                  blurRadius: 2
                ),
              ],
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(30.0),
                topRight: Radius.circular(30.0),
              ),
            ),
            child: Text('foo'),
          ),

颤振：仅具有部分阴影的材质

1 个答案: