是否可以使用 Flutter 创建类似的东西？ #设计挑战

Question

我想知道是否有人可以帮助我使用Trutter设计这样的东西：

到目前为止，我尝试在彼此之间创建两个容器，但我不知道如何在中间制作该半圈卡。

同样，如果我们可以将此图像切成两个相等的半部分并为它们分别编写代码，那就太好了。原因是，我需要将数据放入两半，我希望高度是动态的（不是固定的）。

我想使用最佳的设计方法来创建此方法。任何帮助都将不胜感激。

Answer 1

我就是这样做的：

1. 创建一个列作为具有两个子项的父项。
2. 创建容器作为第一个子容器。
3. 创建一个堆栈作为第二个子级。

现在，由于我们将堆栈作为第二个孩子，因此我们可以在其中拥有三个孩子。

1. 第一个子元素是位于 left:0 和 top:0 的左圆/半圆。
2. 第二个子元素是位于 right:0 和 top:0 的右圆/半圆
3. 第三个子元素是没有位置限制的容器。输入 left:0 和 right:0 以将其完全拉伸并适合屏幕。

这将为我们提供所需的结果，而无需使用任何其他复杂的方法。

Answer 2

使用 CustomPaint，请在此处了解更多信息， fluttershapemaker 可以帮助您轻松完成此操作，只需绘制它或将此 SVG 转换为 CustomPaint 代码。

Answer 3

有几种方法可以做到这一点，

1. 您可以使用普通的矩形容器，并在左侧和右侧给topRight和bottomRight高边框半径，而不是制作圆形容器，您可以在topLeft和右侧给容器高边框半径左下角。代码看起来像

Container(height:MediaQuery.of(context).size.height,aligment:Alignment.center, child:Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
      Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(100),
            bottomRight: Radius.circular(100),
          ),
        ),
      ),
      Container(
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(100),
            bottomLeft: Radius.circular(100),
          ),
        ),
      )
    ]),),

2. 如果你想坚持创建一个圆圈，你可以添加到堆栈上的圆圈并将它们放置在左和右的负值上。从而按照您想要的方式切割圆圈。

我希望这有帮助