我正在构建一个列表的框布局在我的应用程序使用flutter。我想要盒子周围有虚线边框。我已经使用card小部件创建了盒子。但是,我如何才能得到虚线边框周围的框?
card
kx5bkwkv1#
我把它作为一个包添加到pub中。现在你要做的就是
DottedBorder( color: Colors.black, gap: 3, strokeWidth: 1, child: FlutterLogo(size: 148), )
字符串
的数据就像tomerpacific在this answer中所说的那样,Flutter目前没有虚线边框的默认实现。我昨天工作了一段时间,能够使用CustomPainter提出一个解决方案。希望这对某人有帮助。将DashedRect添加到容器中,如下所示
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; } }
型我并不期望这能适应所有用例,并且有很大的定制和改进空间。如果你发现任何bug,请评论。
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")), )
的数据
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), )
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; } }
eoxn13cs5#
如果你想应用一些动画或者在Tap(比如一个光照边框)事件或类似事件中移除/添加边框函数,borderStyle.none会很有用。
5条答案
按热度按时间kx5bkwkv1#
编辑
我把它作为一个包添加到pub中。
现在你要做的就是
字符串
工作溶液[过期]
的数据
就像tomerpacific在this answer中所说的那样,Flutter目前没有虚线边框的默认实现。
我昨天工作了一段时间,能够使用
CustomPainter
提出一个解决方案。希望这对某人有帮助。将
DashedRect
添加到容器中,如下所示型
DashedRect.dart
型
我并不期望这能适应所有用例,并且有很大的定制和改进空间。如果你发现任何bug,请评论。
y4ekin9u2#
可以使用dotted_border Flutter包
字符串
的数据
xhv8bpkk3#
有一个插件,用于绘制小部件周围的虚线边框
https://pub.dev/packages/dotted_border
使用这个插件你可以画点或虚线边框
字符串
添加以下显示边框的代码
型
f5emj3cl4#
字符串
eoxn13cs5#
如果你想应用一些动画或者在Tap(比如一个光照边框)事件或类似事件中移除/添加边框函数,borderStyle.none会很有用。