代码之家 › 专栏 › 技术社区 › kokoko

只将底部阴影拍打到容器上

flutter-container shadow flutter

kokoko · 技术社区 · 4 年前

我尝试了很多解决方案,但都没能得到我想要的。

https://stackoverflow.com/a/56744034/4862911 我申请了这个答案,但没有得到正确的答案。容器顶部仍有阴影。我怎样才能实现它?

此外,我还试图用以下内容包围我的小部件 Material 但仍然无法解决问题。

 Material(
        elevation: 5,
        child: Container(
          height: 50,
          child: _buildEloAndLevel(),

        ),
      ),

0 回复 | 直到 4 年前

Navaneeth P 4 年前

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
      ],
    ),
  ),
),

这将创建一个 shadow 属于 15 units 周围 Container 。现在,阴影可以用 offset 财产。既然我们不希望阴影出现在顶部,我们可以通过以下方式将其向下移动 15台 .

Material(
  elevation: 5,
  child: Container(
    height: 50,
    child: _buildEloAndLevel(),

    // add boxShadow
    decoration: BoxDecoration(
      boxShadow: [
        color: Colors.black54,
        blurRadius: 15.0,
        offset: Offset(0, 15), // horizontally move 0, vertically move 15,
      ],
    ),
  ),
),

Erisan Olasheni 3 年前

我不知道其他例子是否真的只为底部设置了阴影,但这里有一个已知的解决方案:

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  blurRadius: 20.0,
                  spreadRadius: -20.0,
                  offset: Offset(0.0, 25.0),
                )
              ],
            color: Colors.red,
          ),
        ),

使用以下参数设置阴影的模糊 blurRadius 然后设置 spreadRadius 否定 blur半径 然后使用 dy 财产 Offset() 构造函数,将其设置为正值以控制阴影底部。

hisam 4 年前

你所要做的就是玩弄你的偏移值。我认为你不需要用 Material .

偏移是阴影从长方体中的位移。它需要2个双类型值, Offset(x, y);

例子:

Container(
          height: 50.0,
          decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black54,
                  offset: Offset(15.0, 20.0),
                  blurRadius: 20.0,
                )
              ],
            color: Colors.red,
          ),
        ),

我的建议: 为了确保阴影不会出现在容器的顶部,请确保模糊半径 不是更大 而不是偏移量的y值。