工作中需要用到虚线控件,Flutter官方没有相关的控件,自定义一个支持横向和竖向的虚线控件,
import 'package:flutter/material.dart';
/// 虚线
class DottedLine extends StatelessWidget {
final double height;
final Color color;
final Axis direction;
const DottedLine({
this.height = 1,
this.color = Colors.black,
this.direction = Axis.horizontal,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final boxWidth = direction == Axis.horizontal
? constraints.constrainWidth()
: constraints.constrainHeight();
final dashWidth = 10.0;
final dashHeight = height;
final dashCount = (boxWidth / (2 * dashWidth)).floor();
return Flex(
children: List.generate(dashCount, (_) {
return SizedBox(
width: direction == Axis.horizontal ? dashWidth : dashHeight,
height: direction == Axis.horizontal ? dashHeight : dashWidth,
child: DecoratedBox(
decoration: BoxDecoration(color: color),
),
);
}),
mainAxisAlignment: MainAxisAlignment.spaceBetween,
direction: direction,
);
},
);
}
}
- direction: 支持属性Axis.horizontal,Axis.vertical,用于切换是横向或竖向虚线
- height:虚线的宽度
- color: 虚线的颜色
仅此记录虚线控件的使用