当前位置：首页 > news >正文

Flutter 自定义虚线分割线

news 2025/8/16 1:36:19

学习使用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)});@overrideWidget 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),),);}),);});}
}

使用方法：

@overrideWidget 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,),)],),),);}
}