时间戳

首页 > 解决方案 > 如何将背景颜色/图像设置为堆叠在另一个展开的小部件上方？或者有没有其他方法

android - 如何将背景颜色/图像设置为堆叠在另一个展开的小部件上方？或者有没有其他方法

问题描述

目前，我可以制作这种弯曲效果的唯一方法是制作 2 个容器，使 1 个容器成为另一个容器的孩子，并将 1 个容器的颜色变成背景颜色。但是，如果背景是图像，我无法复制此效果。有人可以帮忙吗？

在此处输入图像描述

我使用的代码示例：

Scaffold(
  body: SafeArea(
      child: Column(
    children: <Widget>[
      Container(
        height: 100,
        color: Color(0xFF0D6068),
      ),
      Expanded(
          child: Container(
        color: Color(0xFF0D6068),
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(50),
                topRight: Radius.circular(50),
              )),
        ),
      ))
    ],
  )),
);

标签： androidiosflutter

解决方案

您可以使用 Stack 小部件来实现此目的，例如背景颜色或图像将位于后面，然后将弯曲的容器堆叠在其上。这是一个示例代码。

Stack(children <Widget> [
        Image.asset(''),
        Container()
   ]
)

您可以将 BoxDecoration 与容器的装饰参数一起使用，而不是使用图像资产。BoxDecoration 有一个 image 参数，您可以在其中为您的图像提供一个 DecorationImage() 小部件。

推荐阅读