之所以有白色，是因为Column以连续的垂直模式布局其子元素。它不能用于将一个子对象放置在另一个子对象之上（除非您应用了转换，但这违背了目的）。
这个UI可以使用LayoutBuilder来获取constraints，这样我们就可以正确地将我们的header，body和image正确地放置在Stack中。
输出量：

让我们定义一些大小。您可以根据应用程序的需要随意计算此值。首先，让我们为我们的头设置一个大小。

final headerSize = constraints.maxHeight * .25;

其次，让我们确定我们身体的卡的半径：

const radius = 24.0;

第三，让我们确定图像的大小：

const imageSize = 128.0;

接下来，我们将使用一个堆栈和我们确定的值以正确的顺序放置和绘制元素。我们还应用上面定义的值。

final myCard = LayoutBuilder(
  builder: (context, constraints) {
    /// Determine your image size; could be a factor of
    /// [constraints.maxWidth].
    const imageSize = 128.0;

    /// Determine the border radius of the body.
    const radius = 24.0;

    /// 
    final headerSize = constraints.maxHeight * .25;

    return Stack(
      children: [
        /// Header height includes radius to avoid empty corners.
        Positioned(
          height: headerSize + radius,
          top: .0,
          left: .0,
          right: .0,
          child: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(imagePath),
                fit: BoxFit.cover,
              ),
            ),
            alignment: Alignment.topCenter,
            child: const Text(
              "Header",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),

        /// The body is drawn after the header. It has rounded
        /// [topLeft] and [topRight] corners.
        Positioned.fill(
          top: headerSize,
          child: Container(
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(radius),
                topRight: Radius.circular(radius),
              ),
            ),
            clipBehavior: Clip.antiAlias,
            child: const Text("Body"),
          ),
        ),

        /// The image is added last, so that it can drawn last (on top
        /// of other elements).
        Positioned(
          top: headerSize - imageSize / 2.0,
          left: constraints.maxWidth / 2.0 - imageSize / 2.0,
          child: Container(
            width: imageSize,
            height: imageSize,
            decoration: const BoxDecoration(
              color: Colors.cyan,
              borderRadius: BorderRadius.all(
                Radius.circular(imageSize / 2.0),
              ),
            ),
            alignment: Alignment.center,
            child: const Text("Image"),
          ),
        ),
      ],
    );
  },
),

我们还希望外部部分具有边界半径和背景颜色：

return Container(
  padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 48.0),
  color: Colors.deepPurple,
  alignment: Alignment.center,
  child: ClipRRect(
    borderRadius: const BorderRadius.all(Radius.circular(8.0)),
    child: myCard,
  ),
);