直播平台源码，Flutter 自定义 虚线 分割线
学习使用Flutter 进行 虚线 自定义控件 练习
// 自定义虚线 （默认是垂直方向）
class DashedLind extends StatelessWidget {
final Axis axis; // 虚线方向
final double dashedWidth; // 根据虚线的方向确定自己虚线的宽度
final double dashedHeight; // 根据虚线的方向确定自己虚线的高度
final int count; // 内部会根据设置的个数和宽度确定密度(虚线的空白间隔)
final Color color; // 虚线的颜色
const DashedLind({super.key,
required this.axis,
this.dashedWidth = 1,
this.dashedHeight = 1,
this.count = 10,
this.color = const Color(0xffaaaaaa)
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// 根据宽度计算个数
return Flex(
direction: axis,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(count, (_) {
return SizedBox(
width: dashedWidth,
height: dashedHeight,
child: DecoratedBox(
decoration: BoxDecoration(color: color),
),
);
}),);
});
}
}
使用方法：
@override
Widget build(BuildContext context) {
return Scaffold(
// 脚手架
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
children: [
Container (
height: 200,
child: const DashedLind(
axis:Axis.vertical, // 垂直方向设置
dashedHeight: 8,
count: 12,
color: Colors.red,
),
),
Container(
width: 200,
child: const DashedLind(
axis: Axis.horizontal, // 水平方向设置
dashedWidth: 6,count: 15,
color: Colors.red,
),
)
],
),
),
);
}
}
以上就是直播平台源码，Flutter 自定义 虚线 分割线， 更多内容欢迎关注之后的文章