Flutter Widget 之 PhysicalModel

所有最好的应用程序都从屏幕中间的正方形开始，但是要将这个抽象的想法变成更真实的东西，我们需要跳出框框思考。

如果你看一个真实的盒子，你能看到它的唯一方法就是用光，而这些光会投射阴影。

如果我们希望我们的抽象盒子有真实的阴影呢？就像真的盒子一样。以便我们的用户对你的应用程序中的内容有一个心理模型，好吧，这就是PhysicalModel的用途

只需拿起你正在使用的任何小部件，将其包装在PhysicalModel中斌给它一个颜色即可

PhysicalModel(
    child: BlurBox(),
    color: Colors.black,
)

但是，等等，仍然没有阴影？默认情况下，PhysicalModel的高程为零

PhysicalModel(
    child: BlurBox(),
    color: Colors.black,
    elevation: 8.0,
)

因此我们需要拿起该盒子才能看到阴影

但是与真实世界不同，对于我们的PhysicalModel的阴影创建我们有额外的选项,例如颜色

PhysicalModel(
    child: BlueBox(),
    color: Colors.black,
    shadowColor: Colors.pink,
    elevation: 8.0,
)

你还可以更改阴影角的圆角

PhysicalModel(
    child: BlueBox(),
    color: Colors.black,
    shadowColor: Colors.pink,
    elevation: 8.0,
    borderRadius: BorderRadius.circular(45),
),

或仅更新其形状

PhysicalModel(
    child: BlueBox(),
    color: Colors.black,
    shadowColor: Colors.pink,
    elevatioon: 8.0,
    shape: BoxShape.circle,
)

但是，在摆弄阴影和阴影颜色的同时，你可能想知道为什么更改color参数，没有任何作用。

如果你尝试改变盒子的不透明度会怎么样？蓝色盒子下方展露了什么？

PhysicalModel(
    child: BlueBox(opacity: 1.0),
    color: Colors.black,
    shadowColor: Colors.pink,
    elevation: 8.0,
    shape: BoxShape.circle,
)

PhysicalModel不会导致小部件投射阴影，而是在其下方创建一个层，代表投射阴影对象

PhysicalModel(
    child: BlueBox(opacity: 0.0),
    color: Colors.black,
    shadowColor: Colors.pink,
    elevation: 8.0,
    shape: BoxShape.circle,
)

实际上，你可以让子小部件处于关闭状态,但此模型不会占用任何空间，因此没有阴影

PhysicalModel(
    color: Colors.black,
    shadowColor: Colors.pink,
    elevation: 8.0,
    shape: BoxShape.circle,
)

当你有对自定义阴影效果的想法时，PhysicalModel非常有用

它还可以在诸如Material之类的小部件中用于构建材质阴影

如果想了解有关PhysicalModel的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址