如何在颤动中使用此图像中的容器内的半圆形？答案

【问题标题】：How to use a semi circle inside a container like in this image in flutter?如何在颤动中使用此图像中的容器内的半圆形？
【发布时间】：2020-06-01 12:06:29
【问题描述】：

我正在尝试在容器内的图像中制作半圆形，我已经尝试了很多但无法弄清楚如何制作这个

现在让我解释一下我到目前为止所做的尝试以及我是如何得到结果的

我曾尝试使用 custompainter 类，但得到的结果如下：

enum CircleAlignment {
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
}

class QuarterCirclePainter extends CustomPainter {
  final CircleAlignment circleAlignment;
  final Color color;

  const QuarterCirclePainter({this.circleAlignment, this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final radius = math.min(size.height, size.width-80);
    final offset = circleAlignment == CircleAlignment.topLeft
        ? Offset(.0, .0)
        : circleAlignment == CircleAlignment.topRight
        ? Offset(size.width, 5)
        : circleAlignment == CircleAlignment.bottomLeft
        ? Offset(.0, size.height+10)
        : Offset(size.width, size.height);
    canvas.drawCircle(offset, radius, Paint()..color = color);
  }

  @override
  bool shouldRepaint(QuarterCirclePainter oldDelegate) {
    return color == oldDelegate.color &&
        circleAlignment == oldDelegate.circleAlignment;
  }
}

但我得到这样的结果：

有人知道怎么做吗？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

下面是一个位于圆圈中心的文本示例。

你可以用你的图片替换文本，也可以选择你想在你的情况下对齐孩子的位置图片小部件

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 500,
      height: 250,
      color: Colors.pink,
      child: Align(
        alignment: Alignment.topRight,
        child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(90)),
                border: Border.all(width: 3, color: Colors.green, style: BorderStyle.solid)),
            child: Align(alignment: Alignment.center, child: Text('asdasd'))),
      ),
    );
  }
}

我已经编辑，现在曲线只是边框的一侧。如您所愿在左上角

编辑：

右上角不是理想的半曲线，无论多么接近，我认为您可以使用半径值，并找到您想要的@M.Yogeshwaran

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return         Container(      
      width: 500,
      height:250,
      color: Colors.pink,
      child: Align(
        alignment: Alignment.topRight,
        child: RotatedBox(
          quarterTurns: 1,
          child: Container(                    
                      width: 115,
                      height: 125,

                      decoration: BoxDecoration(
                        color: Colors.orange,
          borderRadius: BorderRadius.only(bottomLeft:  Radius.circular(60), bottomRight:  Radius.circular(80), topRight:  Radius.circular(60)),
          border: Border.all(width: 3,color: Colors.green,style: BorderStyle.none)
          ),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text('asdasd'))),
        ),
      ),
    );
  }
}

【讨论】：

没有不同的图像，我可以将其放置在中心需要的是容器中的那个角圈
感谢 tolga 我已经尝试了上面的代码，但看起来和我发布的图像完全一样，请你看一下原始图像圈，这看起来很清晰

【解决方案2】：

在使用它之前，请确保您使用的是“堆栈小部件”

Positioned(
        top: -(displayWidth(context) * 0.085),
        left: -(displayWidth(context) * 0.15),
        child: Container(
          height: displayWidth(context) * 0.5,
          width: displayWidth(context) * 0.5,
          decoration: BoxDecoration(
            color: HexColor('a4d9e9'),
            borderRadius: BorderRadius.all(Radius.circular(
              displayWidth(context) * 0.5
            ))
          ),
        ),
      ),

【讨论】：