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

发布于01月16日

我已经看过this、this和this了，但他们没有回答我的问题.我需要它下面Container just的高度，而不是它周围的高度.

这是我目前掌握的情况:

个

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

我使用thisAnswer中的代码在我的Container上实现阴影效果，但我不希望它一直绕着我，只在底部有圆角，而不是在顶部.任何帮助都将不胜感激.

推荐答案

使用ClipRRect消除阴影效果，并添加底部margin到Container以克服底部的ClipRRect，仅显示阴影效果.

Example:个

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

Result:

个