dart 我想在Flutter中画一个箭头,但我似乎无法填充空间

htrmnn0y  于 12个月前  发布在  Flutter
关注(0)|答案(3)|浏览(146)

我们用这种代码制作了箭头。然而,空间是不可避免地产生的。我们如何放置小部件而不产生空间?箭头的尖端不可避免地在它和主体之间产生空间。

class Line extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 100,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Align(
            alignment: Alignment.bottomRight,
            child: Transform.rotate(
              angle: pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ),
          const Divider(color: Colors.white),
          Align(
            alignment: Alignment.bottomRight,
            child: Transform.rotate(
              angle: -pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

字符串


的数据

0yg35tkg

0yg35tkg1#

您可以使用Transform.translate小部件来移动上下角线。下面是实现所需输出的工作代码:

class Line extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 100,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Transform.translate(
            offset: const Offset(2, 2.5),
            child: Align(
              alignment: Alignment.bottomRight,
              child: Transform.rotate(
                angle: pi / 4,
                child: Container(
                  width: 16,
                  height: 1,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          const Divider(color: Colors.black),
          Transform.translate(
            offset: const Offset(2, -2.5),
            child: Align(
              alignment: Alignment.bottomRight,
              child: Transform.rotate(
                angle: -pi / 4,
                child: Container(
                  width: 16,
                  height: 1,
                  color: Colors.black,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

字符串
https://i.stack.imgur.com/SNPwa.png

2w2cym1i

2w2cym1i2#

SizedBox( 
      width: 200,
      height: 100,
      child: Stack(
        alignment: Alignment.centerRight,
        children: [
          Align(
            alignment: Alignment.centerRight,
            child: Transform.rotate(
              angle: pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ).paddingOnly(bottom: 10.5),
          const Divider(color: Colors.white).paddingSymmetric(horizontal: 3),
          Align(
            alignment: Alignment.centerRight,
            child: Transform.rotate(
              angle: -pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ).paddingOnly(top: 10.5),
        ],
      ),
    ),

字符串

hrirmatl

hrirmatl3#

我认为你应该使用CustomPainter来画一个箭头。为了使你的任务变得简单,我在下面添加了可以帮助你的代码。
我们将使用以下坐标绘制一个箭头:


的数据
要绘制上面的图像,我们将使用CustomPainter创建一个ArrowPainter

class ArrowPainter extends CustomPainter{

    @override
    void paint(Canvas canvas,Size size){
        double width = size.width;
        double height = size.height;
        Paint paint = Paint();
        paint.color = Colors.black;
        //Draw Straight line using (x1,y1) and (x2,y2)
        double x1=0;
        double y1= height/2;
        double x2= width;
        double y2= y1;

        canvas.drawLine(Offset(x1,y1),Offset(x2,y2),paint);

        //Draw upper line using (x2,y2) and (x3,y3)
        double x3 = width-(width*0.20);
        double y3 = y2-(height*10);

        canvas.drawLine(Offset(x2,y2),Offset(x3,y3),paint);

        //Draw lower line using (x2,y2) and (x4,y4)
        double x4 = x3;
        double y4 = y2+(height*10);

        canvas.drawLine(Offset(x2,y2),Offset(x4,y4),paint);
    }
    
    @override
    bool shouldRepaint(covariant CustomPainter oldDelegate){
        return true;
    }
}

字符串
创建一个ArrowWidget:

class ArrowWidget extends StatelessWidget{
    final double size;
    
    const ArrowWidget({super.key,this,size = 300});
    
    @overrride
    Widget build(BuildContext context){
        return SizedBox(
                width:size,
                height:size,
                child: CustomPaint(
                        foregroundPainter: ArrowPainter(),
                );       
        );
    }
}


现在你可以在代码中的任何地方使用ArrowWidget。
注意:我使用宽度=高度来绘制箭头。你可以根据你的要求改变上面的代码。也可以为所需的类导入。

相关问题