美文网首页
Flutter —— 自定义虚线widget

Flutter —— 自定义虚线widget

作者: 刘铁崧 | 来源:发表于2020-11-19 16:28 被阅读0次
  • 自定义密度
  • 自定义断线宽度
  • 自定义圆角样式

样式:



调用:

      body:Center(
        child: Container(
          width: 300,
          child:  CYDashedLine(width: 8,count: 20,),
        ),

封装代码:

class CYDashedLine extends StatelessWidget {
  final Axis axis;// 方向
  final double width;//宽度
  final double height;//高度
  final int count;// 个数,密度
  final Color color;
  CYDashedLine({
    this.axis = Axis.horizontal,
    this.width = 1,
    this.height = 1,
    this.count = 10,
    this.color = Colors.black
  });
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: axis,
      mainAxisAlignment: MainAxisAlignment.spaceBetween ,
      children: List.generate(count, (_){
        return SizedBox(
          width: width,
          height: height,
          child: DecoratedBox(
            decoration: BoxDecoration(color: color,borderRadius: BorderRadius.circular(width)),
          ),
        );
      }),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter —— 自定义虚线widget

      本文链接:https://www.haomeiwen.com/subject/eerliktx.html