时间戳

首页 > 解决方案 > 如何在颤动中使用此图像中的容器内的半圆形？

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

问题描述

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

在此处输入图像描述

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

我曾尝试使用 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;
  }
}

但我得到这样的结果：

在此处输入图像描述

任何人都知道如何做到这一点？

标签： flutterflutter-layout

解决方案

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

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

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'))),
        ),
      ),
    );
  }
}

推荐阅读