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

Question

我已经看过 this and and 但他们没有回答我的问题。我需要在我的 Container 下方处提升高度，而不是在它周围。

这是我目前拥有的：

我最后的目标是消除星期几顶部的阴影。

我使用答案中的代码在我的 Container 上实现阴影效果，但我不想要它，只是在底部有圆角而不是在顶端。任何帮助将不胜感激。

Answer 1

遗憾的是 Container 没有 elevation 属性，您需要使用其他 Widget，例如 Card，但如果您真的想要给 Container 一个 elevation 属性，你可以看看 division and watch this tutorial 关于使用那个包。

Division：简单易用但功能强大的样式小部件，其语法灵感来自 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,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

结果：

Answer 4

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

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

Answer 5

使用 Material 并且 Container() 和 Material()

必须使用相同的 borderRadius:

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 6

child: Container(
                  height: Get.height/4,
                  width: Get.width/1.1,
                  decoration: BoxDecoration(
                    color: UIDataColors.white,
                    borderRadius: BorderRadius.circular(10.0),
                    border: Border.all(color: UIDataColors.white),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        blurRadius: 2.0,
                        spreadRadius: 0.0,
                        offset: Offset(2.0, 2.0), // shadow direction: bottom right
                      )
                    ],
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                ],
              ),


              //color: UIDataColors.white,

            )

Answer 7

使用 Card 作为您的小部件的父级并使用 Card 的高度属性。

Answer 8

使用`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),
)

Answer 9

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

在 Flutter 文档中了解更多 PhysicalModel。

Answer 10

如果您想继续使用Container。您可以在 BoxDecoration 中使用 boxShadow 和辅助全局变量 kElevationToShadow.

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

import 'package:flutter/material.dart';

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

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

How to add bottom elevation to a container in Flutter?

shadow

flutter

使用Card

使用DecoratedBox

使用PhysicalModel

使用`Card`

使用`DecoratedBox`

使用`PhysicalModel`