css - 如何防止box shadow被裁掉？

Question

我刚开始学习 Dart 和 Flutter 开发，一直在玩 BoxShadow。正如您在下图中看到的，Bar、Boo 和 Faz 卡片的阴影被截断，而文本框的阴影出现。如何确保卡片的阴影正确显示？

这是我的代码:

import 'package:flutter/material.dart';
import 'package:reminder_app/constants.dart';

class Body extends StatelessWidget {
  Widget _buildBanner(size) {
    return Container(
      height: size.height * 0.7,
      decoration: BoxDecoration(
        color: kPrimaryColor,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(36),
          bottomRight: Radius.circular(36),
        ),
      ),
    );
  }

  Widget _buildCard(text) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.teal[200],
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            offset: Offset(10, 10),
            blurRadius: 25,
            color: Colors.black.withOpacity(
              0.75,
            ),
          ),
        ],
      ),
      child: Text(text),
    );
  }

  Widget _buildCardGrid() {
    return Expanded(
      child: GridView.count(
        primary: false,
        padding: EdgeInsets.symmetric(
          vertical: kDefaultPadding * 1.5,
        ),
        crossAxisSpacing: 20,
        mainAxisSpacing: 20,
        crossAxisCount: 2,
        children: <Widget>[
          _buildCard("Foo"),
          _buildCard("Bar"),
          _buildCard("Baz"),
          _buildCard("Boo"),
          _buildCard("Far"),
          _buildCard("Faz"),
        ],
      ),
    );
  }

  Widget _buildInputBox() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            offset: Offset(10, 10),
            blurRadius: 25,
            color: Colors.black.withOpacity(
              0.75,
            ),
          ),
        ],
      ),
      height: 55,
      child: TextField(
        decoration: InputDecoration(
          hintText: "Text Here",
          hintStyle: TextStyle(
            color: kPrimaryColor.withOpacity(
              0.5,
            ),
          ),
          enabledBorder: InputBorder.none,
          focusedBorder: InputBorder.none,
        ),
      ),
    );
  }

  Widget _buildInteractionContainers(size) {
    return Positioned(
      child: Container(
        margin: EdgeInsets.symmetric(
          horizontal: kDefaultPadding * 2,
        ),
        width: size.width,
        child: Column(
          children: [
            _buildInputBox(),
            _buildCardGrid(),
          ],
        ),
      ),
    );
  }

  Widget _buildBody(size) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Container(
            height: size.height * 0.7,
            child: Stack(
              children: <Widget>[
                _buildBanner(size),
                _buildInteractionContainers(size),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return _buildBody(size);
  }
}

Bar, Boo and Faz's shadows are cutoff while the shadow for the text box shows up

编辑 [Answer]:我能够通过将 clipBehavior: Clip.none 添加到 GridView 来防止阴影剪切来解决此问题。

Answer 1

请试试这段代码，如何防止box-shadow被切断？

如果框阴影被静音，请确保

overflow: visible 

设置为包含您的元素的所有 div 标签。

希望这些信息对您有用。

谢谢。