如何在flutter框周围创建虚线边框?

ogsagwnx  于 2023-08-07  发布在  Flutter
关注(0)|答案(5)|浏览(531)

我正在构建一个列表的框布局在我的应用程序使用flutter。我想要盒子周围有虚线边框。我已经使用card小部件创建了盒子。但是,我如何才能得到虚线边框周围的框?

kx5bkwkv

kx5bkwkv1#

编辑

我把它作为一个包添加到pub中。
现在你要做的就是

DottedBorder(
  color: Colors.black,
  gap: 3,
  strokeWidth: 1,
  child: FlutterLogo(size: 148),
)

字符串

工作溶液[过期]


的数据
就像tomerpacificthis answer中所说的那样,Flutter目前没有虚线边框的默认实现。
我昨天工作了一段时间,能够使用CustomPainter提出一个解决方案。希望这对某人有帮助。
DashedRect添加到容器中,如下所示

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 400,
          width: 300,
          color: Colors.black12,
          child: DashedRect(color: Colors.red, strokeWidth: 2.0, gap: 3.0,),
        ),
      ),
    );
  }
}

DashedRect.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

class DashedRect extends StatelessWidget {
  final Color color;
  final double strokeWidth;
  final double gap;

  DashedRect(
      {this.color = Colors.black, this.strokeWidth = 1.0, this.gap = 5.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Padding(
        padding: EdgeInsets.all(strokeWidth / 2),
        child: CustomPaint(
          painter:
              DashRectPainter(color: color, strokeWidth: strokeWidth, gap: gap),
        ),
      ),
    );
  }
}

class DashRectPainter extends CustomPainter {
  double strokeWidth;
  Color color;
  double gap;

  DashRectPainter(
      {this.strokeWidth = 5.0, this.color = Colors.red, this.gap = 5.0});

  @override
  void paint(Canvas canvas, Size size) {
    Paint dashedPaint = Paint()
      ..color = color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    double x = size.width;
    double y = size.height;

    Path _topPath = getDashedPath(
      a: math.Point(0, 0),
      b: math.Point(x, 0),
      gap: gap,
    );

    Path _rightPath = getDashedPath(
      a: math.Point(x, 0),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _bottomPath = getDashedPath(
      a: math.Point(0, y),
      b: math.Point(x, y),
      gap: gap,
    );

    Path _leftPath = getDashedPath(
      a: math.Point(0, 0),
      b: math.Point(0.001, y),
      gap: gap,
    );

    canvas.drawPath(_topPath, dashedPaint);
    canvas.drawPath(_rightPath, dashedPaint);
    canvas.drawPath(_bottomPath, dashedPaint);
    canvas.drawPath(_leftPath, dashedPaint);
  }

  Path getDashedPath({
    required math.Point<double> a,
    required math.Point<double> b,
    required gap,
  }) {
    Size size = Size(b.x - a.x, b.y - a.y);
    Path path = Path();
    path.moveTo(a.x, a.y);
    bool shouldDraw = true;
    math.Point currentPoint = math.Point(a.x, a.y);

    num radians = math.atan(size.height / size.width);

    num dx = math.cos(radians) * gap < 0
        ? math.cos(radians) * gap * -1
        : math.cos(radians) * gap;

    num dy = math.sin(radians) * gap < 0
        ? math.sin(radians) * gap * -1
        : math.sin(radians) * gap;

    while (currentPoint.x <= b.x && currentPoint.y <= b.y) {
      shouldDraw
          ? path.lineTo(currentPoint.x, currentPoint.y)
          : path.moveTo(currentPoint.x, currentPoint.y);
      shouldDraw = !shouldDraw;
      currentPoint = math.Point(
        currentPoint.x + dx,
        currentPoint.y + dy,
      );
    }
    return path;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}


我并不期望这能适应所有用例,并且有很大的定制和改进空间。如果你发现任何bug,请评论。

y4ekin9u

y4ekin9u2#

可以使用dotted_border Flutter包

return DottedBorder(
   borderType: BorderType.RRect,
   radius: Radius.circular(20),
   dashPattern: [10, 10],
   color: Colors.grey,
   strokeWidth: 2,
   child: Card(
       color: Colors.amber,
       shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
       ),
       child: Center(child: Text("hi")),
   )

字符串


的数据

xhv8bpkk

xhv8bpkk3#

有一个插件,用于绘制小部件周围的虚线边框
https://pub.dev/packages/dotted_border
使用这个插件你可以画点或虚线边框

//1. Install the plugin by add dependencies in pubspace.yaml
dotted_border: ^1.0.6

字符串
添加以下显示边框的代码

DottedBorder(
color: Colors.black,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)

f5emj3cl

f5emj3cl4#

CustomPaint(
      painter: DottedBorderPainter(),
      child:Container(
            child: Text('dashed border',style: TextStyle(
                   fontSize: 13.5,color: Colors.black))))



class DottedBorderPainter extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
        final paint = Paint()
          ..color = Colors.black
          ..strokeWidth = 2
          ..style = PaintingStyle.stroke;
    
        final double dashWidth = 5; // Width of each dash
        final double dashSpace = 5; // Space between each dash
    
        double startX = 0;
        while (startX < size.width) {
          canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
          startX += dashWidth + dashSpace;
        }
    
        // Draw right border
        double startY = 0;
        while (startY < size.height) {
          canvas.drawLine(
            Offset(size.width, startY),
            Offset(size.width, startY + dashWidth),
            paint,
          );
          startY += dashWidth + dashSpace;
        }
    
        // Draw bottom border
        startX = 0;
        while (startX < size.width) {
          canvas.drawLine(
            Offset(startX, size.height),
            Offset(startX + dashWidth, size.height),
            paint,
          );
          startX += dashWidth + dashSpace;
        }
    
        // Draw left border
        startY = 0;
        while (startY < size.height) {
          canvas.drawLine(Offset(0, startY), Offset(0, startY + dashWidth), paint);
          startY += dashWidth + dashSpace;
        }
        
    
      }

字符串

eoxn13cs

eoxn13cs5#

如果你想应用一些动画或者在Tap(比如一个光照边框)事件或类似事件中移除/添加边框函数,borderStyle.none会很有用。

相关问题