颤振卡提升不适用于卡顶答案

【问题标题】：Flutter card elevation not applying on card top颤振卡提升不适用于卡顶
【发布时间】：2022-01-07 19:05:52
【问题描述】：

在卡片小部件中添加容器时，卡片的高度不会应用于卡片顶部。

Card(
  elevation: 10,
  shadowColor: Colors.green,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12.0),
  ),
  child: Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // widget goes here
          ],
        ),
      ),
      SizedBox(
        height: 20,
      ),
      // some more widgets
    ],
  ),
);

【问题讨论】：

stackoverflow.com/questions/53347831/…
它不起作用是什么意思？它工作正常。演示dartpad.dev/…
@OMiShah 查看卡片顶部。海拔不适用于卡片顶部。
@Phanindra，您可能想查看shadow 而不是elevation。不要混淆这两者。

标签： flutter dart elevation card

【解决方案1】：

考虑使用容器装饰而不是卡片提升

return Container(
  margin: EdgeInsets.all(50),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(12)),
    boxShadow: [
      BoxShadow(
        color: Colors.green.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
child:Column(), //your widget here
)

【讨论】：

【解决方案2】：

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Align(
        alignment: AlignmentDirectional.topCenter,
        child: Container(
          height: 200,
          width: 200,
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  color: Colors.cyan,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("SOMETHING")
                      // widget goes here
                    ],
                  ),
                ),
              ],
            ),
            color: Colors.orange,
            elevation: 10,
            shadowColor: Colors.green,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0),
            ),
          ),
        ),
      )),
    );
  }

【讨论】：