如何在Flutter中向容器添加高程？

Question

我已经看过this和this和this，但他们没有回答我的问题。我需要在其下面的Container just上标高，而不是全部标高。

这是我现在拥有的：

我的最终目标是消除一周中大部分时间的阴影。

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

Answer 1

[很遗憾，elevation没有Container属性，您需要使用其他Widget，例如Card，但是如果您确实想为Container提供elevation属性，则可以使用查看division并观看有关使用该软件包的tutorial。

部门：简单易用但功能强大的样式小部件，其语法受CSS启发。

Answer 2

如果只想添加阴影，则将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 3

使用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,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

结果：