我正在使用 flutter 在我的应用程序中构建一个框布局列表。我想要盒子周围有虚线边框。我使用
card
小部件来创建盒子。但是,我怎样才能在盒子周围得到虚线边框呢?
我已将其作为包添加到 pub 中。
现在,您需要做的就是
DottedBorder(
color: Colors.black,
gap: 3,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)
就像tomerpacific在这个答案中所说,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,),
),
),
);
}
}
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;
}
}
我不希望这适合所有用例,并且还有很大的定制和改进空间。如果发现任何错误请评论。
您可以使用dotted_borderFlutter包
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")),
)
有一个插件可以在小部件周围绘制虚线边框
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),
)
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;
}
}
BorderStyle.none 如果你想应用一些动画或删除 dd 边框函数 onTap(如照明边框)事件或类似的东西,会很有用。