如何在颤动的盒子周围创建虚线边框? [英] How to create a dotted border around a box in flutter?

问题描述

我正在使用颤振在我的应用程序中构建一个盒子布局列表.我想要盒子周围的虚线边框.我已经使用 card 小部件来创建盒子.但是，如何在框周围设置虚线边框?

解决方案

编辑

我已将此作为一个包添加到

就像 tomerpacific 在 这个回答，Flutter 目前没有虚线边框的默认实现.

我昨天工作了一段时间，并能够使用 CustomPainter 提出解决方案.希望这对某人有所帮助.

将 DashedRect 添加到您的容器中，就像这样

class _MyHomePageState extends State{@覆盖小部件构建(BuildContext 上下文){返回脚手架(应用栏:应用栏(标题:文本(widget.title)，),身体:中心(孩子:容器(身高:400，宽度:300，颜色:Colors.black12，孩子:DashedRect(颜色:Colors.red，strokeWidth:2.0，gap:3.0，)，),),);}}

DashedRect.dart

import 'package:flutter/material.dart';导入飞镖:数学"作为数学；类 DashedRect 扩展 StatelessWidget {最终颜色颜色；最终双笔画宽度；最后的双重差距；虚线矩形({this.color = Colors.black, this.strokeWidth = 1.0, this.gap = 5.0});@覆盖小部件构建(BuildContext 上下文){返回容器(孩子:填充(填充:EdgeInsets.all(strokeWidth/2),孩子:自定义油漆(画家:DashRectPainter(颜色:颜色，笔画宽度:笔画宽度，间隙:间隙)，),),);}}类 DashRectPainter 扩展 CustomPainter {双笔画宽度；颜色颜色；双间隙；DashRectPainter({this.strokeWidth = 5.0, this.color = Colors.red, this.gap = 5.0});@覆盖无效油漆(帆布画布，尺寸大小){绘制 dashedPaint = Paint()..color = 颜色..strokeWidth = 中风宽度..style = 绘画风格.stroke;双 x = 尺寸. 宽度；双 y = size.height;路径 _topPath = getDashedPath(a: 数学.Point(0, 0),b: 数学.Point(x, 0),间隙:间隙，);路径 _rightPath = getDashedPath(a: 数学.Point(x, 0),b: 数学.Point(x, y),间隙:间隙，);路径 _bottomPath = getDashedPath(a: 数学.Point(0, y),b: 数学.Point(x, y),间隙:间隙，);路径 _leftPath = getDashedPath(a: 数学.Point(0, 0),b: 数学.Point(0.001, y),间隙:间隙，);canvas.drawPath(_topPath, dashedPaint);canvas.drawPath(_rightPath, dashedPaint);canvas.drawPath(_bottomPath, dashedPaint);canvas.drawPath(_leftPath, dashedPaint);}路径 getDashedPath({@required math.Point<double>一个，@required math.Point<double>乙，@必需的间隙，}) {尺寸 size = 尺寸(b.x - a.x, b.y - a.y);路径 path = Path();path.moveTo(a.x, a.y);布尔应该画=真；math.Point currentPoint = math.Point(a.x, a.y);弧度数 = math.atan(size.height/size.width);num dx = math.cos(radians) * gap <0?math.cos(弧度) * 间隙 * -1: math.cos(弧度) * 差距；num dy = math.sin(radians) * gap <0?math.sin(弧度) * 间隙 * -1: math.sin(弧度) * 差距;而 (currentPoint.x <= b.x && currentPoint.y <= b.y) {应该画?path.lineTo(currentPoint.x, currentPoint.y): path.moveTo(currentPoint.x, currentPoint.y);应该画=！应该画；currentPoint = math.Point(currentPoint.x + dx,currentPoint.y + dy,);}返回路径；}@覆盖bool shouldRepaint(CustomPainter oldDelegate) {返回真；}}

我不希望这适用于所有用例，并且有很大的定制和改进空间.如果您发现任何错误，请发表评论.

I am building a list of boxes layouts in my app using flutter. I want dotted border around the box. I have used card widget to create the boxes. But, how can I get dotted border around the boxes?

解决方案

EDIT

I have added this as a package in pub.

Now, all you need to do is

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

Working Solution [Outdated]

Like tomerpacific said in this answer, Flutter does not have a default implementation for dashed border at the moment.

I worked for some time yesterday and was able to come up with a solution using CustomPainter. Hope this helps someone.

Add the DashedRect to your container, like so

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;
  }
}

I do not expect this to fit in with all use cases and there is a lot of room for customization and improvement. Comment if you find any bugs.

这篇关于如何在颤动的盒子周围创建虚线边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！