如何在 Flutter 中为容器添加底部高程？

Question

我已经看过这个，这个和这个，但他们没有回答我的问题。我需要在它Container 正下方的海拔高度，而不是在它周围。

这是我目前所拥有的：

我最后的目标是消除一周中几天顶部的阴影。

我使用这个答案中的代码来实现我的阴影效果，Container但我不希望它一直存在，只是在带有圆角的底部而不是顶部。任何帮助，将不胜感激。

Answer 1

在我的选择中，最好的方法是在您当前使用的小部件上添加 Material()。

return Material(
       elevation: 20,
       child Container(),
       );

Answer 2

使用ClipRRect去除阴影效果，并添加底margin，以Container克服ClipRRect在底部只显示阴影效果。

例子：

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              height: 100.0,
              margin: const EdgeInsets.only(bottom: 6.0), //Same as `blurRadius` i guess
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5.0),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 6.0,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

结果：

Answer 3

如果你只想添加一个阴影，那么BoxDecoration结合起来BoxShadow就可以了

...
...
body: Container(
    margin: EdgeInsets.all(8),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        color: Colors.white,
        boxShadow: [
            BoxShadow(
                color: Colors.black,
                blurRadius: 2.0,
                spreadRadius: 0.0,
                offset: Offset(2.0, 2.0), // shadow direction: bottom right
            )
        ],
    ),
    child: Container(width: 100, height: 50) // child widget, replace with your own
),
...
...

Answer 4

使用Material和必须使用borderRadius:相同的Container()和Material()

Material(
                elevation: 5,
                borderRadius: BorderRadius.only(topLeft: Radius.circular(50)),
                child: Container(
                  height: 100,
                  width: _width / 1.1,
                  decoration: BoxDecoration(
                      color: Colors.amber,
                      borderRadius:
                          BorderRadius.only(topLeft: Radius.circular(50))),
                ),
              ),

结果

Answer 5

return PhysicalModel(
         elevation: 20,
         child: Container(),
       );

在 Flutter 文档中了解有关PhysicalModel的更多信息。

Answer 6

如果你想继续使用Container. 您可以将与辅助全局变量boxShadow一起使用。BoxDecoration kElevationToShadow

要仅在底部显示阴影，您可以使用该ClipRRect小部件。

import 'package:flutter/material.dart';

ClipRRect(
  borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
  child: Container(
    decoration: BoxDecoration(
      boxShadow: kElevationToShadow[4],
    ),
  ),
);

Answer 7

• 使用 Card

  

  Card(
    elevation: 8,
    shadowColor: Colors.blue,
    child: Container(width: 100, height: 100, color: Colors.white),
  )
  

• 使用 DecoratedBox

  

  DecoratedBox(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.blue,
          blurRadius: 8,
          spreadRadius: 4,
          offset: Offset(0, 10),
        ),
      ],
    ),
    child: Container(width: 100, height: 100, color: Colors.white),
  )
  

• 使用 PhysicalModel

  

  PhysicalModel(
    color: Colors.white,
    elevation: 8,
    shadowColor: Colors.blue,
    borderRadius: BorderRadius.circular(20),
    child: Container(width: 100, height: 100),
  )